fix: use new Switch API from RN >= 0.57. fixes #571

callstack · Nov 5, 2018 · 4aa7add · 4aa7add
1 parent dcc5bf1
commit 4aa7add
Showing 1 changed file with 21 additions and 6 deletions.
diff --git a/src/components/Switch.js b/src/components/Switch.js
@@ -1,12 +1,15 @@
 /* @flow */
-import * as React from 'react';
 
+import * as React from 'react';
 import { grey400, grey800, grey50, white, black } from '../styles/colors';
 import { Switch as NativeSwitch, Platform } from 'react-native';
 import setColor from 'color';
 import { withTheme } from '../core/theming';
 import type { Theme } from '../types';
 
+// eslint-disable-next-line import/no-unresolved
+const { version } = require('ReactNativeVersion');
+
 type Props = React.ElementProps<NativeSwitch> & {
   /**
    * Disable toggling the switch.
@@ -85,12 +88,12 @@ class Switch extends React.Component<Props> {
       onValueChange,
       color,
       theme,
-      ...props
+      ...rest
     } = this.props;
 
     const checkedColor = color || theme.colors.accent;
 
-    const trackTintColor =
+    const onTintColor =
       Platform.OS === 'ios'
         ? checkedColor
         : disabled
@@ -121,14 +124,26 @@ class Switch extends React.Component<Props> {
               ? grey400
               : grey50;
 
+    const props =
+      version.major === 0 && version.minor <= 56
+        ? {
+            onTintColor,
+            thumbTintColor,
+          }
+        : {
+            thumbColor: thumbTintColor,
+            trackColor: {
+              true: onTintColor,
+            },
+          };
+
     return (
       <NativeSwitch
-        {...props}
         value={value}
         disabled={disabled}
-        onTintColor={trackTintColor}
-        thumbTintColor={thumbTintColor}
         onValueChange={disabled ? undefined : onValueChange}
+        {...props}
+        {...rest}
       />
     );
   }