feat: add a flag to suppress accessibility color warning

intergalacticspacehighway · intergalacticspacehighway · commit f290b8b4abd5 · 2021-07-19T19:36:38.000+05:30
diff --git a/example/nativebase.config.ts b/example/nativebase.config.ts
@@ -1,5 +1,8 @@
+import { INativebaseConfig } from 'native-base';
+
 export default {
   dependencies: {
     'linear-gradient': require('expo-linear-gradient').LinearGradient,
   },
-};
+  suppressAccessibilityWarning: true,
+} as INativebaseConfig;
diff --git a/src/core/NativeBaseContext.ts b/src/core/NativeBaseContext.ts
@@ -9,6 +9,7 @@ export {
 
 export interface INativebaseConfig {
   theme?: ITheme;
+  suppressAccessibilityWarning?: boolean;
   dependencies?: {
     'linear-gradient': any;
   };
diff --git a/src/core/index.ts b/src/core/index.ts
@@ -7,6 +7,8 @@ export {
   useAccessibleColors,
 } from './color-mode';
 
+export { INativebaseConfig } from './NativeBaseContext';
+
 export type {
   StorageManager,
   ColorMode,
diff --git a/src/hooks/useContrastText.ts b/src/hooks/useContrastText.ts
@@ -1,6 +1,7 @@
 import Color from 'tinycolor2';
 import { useToken } from './useToken';
 import { useAccessibleColors } from '../core/color-mode/hooks';
+import { useNativeBaseConfig } from '../core/NativeBaseContext';
 
 export function useContrastText(bg: string, color?: string) {
   let [
@@ -17,6 +18,10 @@ export function useContrastText(bg: string, color?: string) {
     color ?? '',
   ]);
 
+  let suppressAccessibilityWarning = useNativeBaseConfig(
+    'NativeBaseConfigProvider'
+  ).config.suppressAccessibilityWarning;
+
   let [accessibleColors] = useAccessibleColors();
 
   if (typeof bg !== 'string') {
@@ -37,7 +42,8 @@ export function useContrastText(bg: string, color?: string) {
           trueBg,
           trueColor,
           bg,
-          color
+          color,
+          suppressAccessibilityWarning
         );
 
   return textColor;
@@ -62,7 +68,8 @@ function getAccessibleContrastColor(
   trueBg: string,
   trueColor: string,
   bg: string,
-  color?: string
+  color?: string,
+  suppressAccessibilityWarning?: boolean
 ) {
   if (typeof trueBg !== 'string') {
     trueBg = bg;
@@ -88,7 +95,7 @@ function getAccessibleContrastColor(
       trueBg,
       trueColor ? trueColor : trueContrastColor
     );
-    if (contrast < 3) {
+    if (contrast < 3 && !suppressAccessibilityWarning) {
       console.warn(
         [
           `NativeBase: The contrast ratio of ${contrast}:1 for ${
