✨ Text color is now inverted color of bg color

Author: sam-drew

index.js

@@ -6,6 +6,8 @@ import {
     StyleSheet,
 } from 'react-native';
 
+import invert from 'invert-color';
+
 export default class RNChipPicker extends React.Component {
     render() {
         // Check & set the colour for selected chips.
@@ -38,6 +40,9 @@ export default class RNChipPicker extends React.Component {
                 alignSelf: 'stretch',
                 flexDirection: 'row',
                 backgroundColor: this.props.backgroundColor,
+            },
+            innerText: {
+                color: invert(this.props.backgroundColor, true)
             }
         });
 
@@ -59,7 +64,7 @@ export default class RNChipPicker extends React.Component {
             chips.push(
                 <TouchableOpacity key={i} style={chipStyle} onPress={() => this.props.onValueSelect(item)}>
                     <View>
-                        <Text>{item}</Text>
+                        <Text style={style.innerText}>{item}</Text>
                     </View>
                 </TouchableOpacity>
             );

package.json

@@ -9,5 +9,8 @@
   "devDependencies": {
     "react": "16.9.0",
     "react-native": "^0.61.4"
+  },
+  "dependencies": {
+    "invert-color": "^2.0.0"
   }
 }

yarn.lock

@@ -2191,6 +2191,11 @@ invariant@^2.2.4:
   dependencies:
     loose-envify "^1.0.0"
 
+invert-color@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/invert-color/-/invert-color-2.0.0.tgz#894ab1f7494a6e45f5e74c2f99ec042cd67dd23e"
+  integrity sha512-9s6IATlhOAr0/0MPUpLdMpk81ixIu8IqwPwORssXBauFT/4ff/iyEOcojd0UYuPwkDbJvL1+blIZGhqVIaAm5Q==
+
 invert-kv@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"