feat: expose new props to add custom color in Chip component

example/src/Examples/ChipExample.js

@@ -20,7 +20,12 @@ class ChipExample extends React.Component<Props> {
       >
         <List.Section title="Flat chip">
           <View style={styles.row}>
-            <Chip onPress={() => {}} style={styles.chip}>
+            <Chip
+              mode="outlined"
+              selected
+              onPress={() => {}}
+              style={styles.chip}
+            >
               Simple
             </Chip>
             <Chip onPress={() => {}} onClose={() => {}} style={styles.chip}>
@@ -137,6 +142,42 @@ class ChipExample extends React.Component<Props> {
             </Chip>
           </View>
         </List.Section>
+        <List.Section title="Custom chip">
+          <View style={styles.row}>
+            <Chip
+              selected
+              onPress={() => {}}
+              style={[styles.chip, { backgroundColor: 'rgba(128,0,128,0.2)' }]}
+              selectedColor="#800080"
+            >
+              Flat selected chip with custom color
+            </Chip>
+            <Chip
+              onPress={() => {}}
+              style={styles.chip}
+              selectedColor="#800080"
+            >
+              Flat unselected chip with custom color
+            </Chip>
+            <Chip
+              selected
+              mode="outlined"
+              onPress={() => {}}
+              style={[styles.chip, { backgroundColor: 'rgba(128,0,128, 0.2)' }]}
+              selectedColor="#800080"
+            >
+              Outlined selected chip with custom color
+            </Chip>
+            <Chip
+              mode="outlined"
+              onPress={() => {}}
+              style={styles.chip}
+              selectedColor="#800080"
+            >
+              Outlined unselected chip with custom color
+            </Chip>
+          </View>
+        </List.Section>
       </ScrollView>
     );
   }

src/components/Chip.js

@@ -38,9 +38,13 @@ type Props = React.ElementConfig<typeof Surface> & {|
    */
   avatar?: React.Node,
   /**
-   * Whether to style the chip as selected.
+   * Whether chip is selected.
    */
   selected?: boolean,
+  /**
+   * Whether to style the chip color as selected.
+   */
+  selectedColor?: string,
   /**
    * Whether the chip is disabled. A disabled chip is greyed out and `onPress` is not called on touch.
    */
@@ -137,6 +141,7 @@ class Chip extends React.Component<Props, State> {
       style,
       theme,
       testID,
+      selectedColor,
       ...rest
     } = this.props;
     const { dark, colors } = theme;
@@ -151,20 +156,24 @@ class Chip extends React.Component<Props, State> {
 
     const borderColor =
       mode === 'outlined'
-        ? color(dark ? white : black)
+        ? color(
+            selectedColor !== undefined
+              ? selectedColor
+              : color(dark ? white : black)
+          )
             .alpha(0.29)
             .rgb()
             .string()
         : backgroundColor;
     const textColor = disabled
       ? colors.disabled
-      : color(colors.text)
+      : color(selectedColor !== undefined ? selectedColor : colors.text)
           .alpha(0.87)
           .rgb()
           .string();
     const iconColor = disabled
       ? colors.disabled
-      : color(colors.text)
+      : color(selectedColor !== undefined ? selectedColor : colors.text)
           .alpha(0.54)
           .rgb()
           .string();
@@ -175,6 +184,13 @@ class Chip extends React.Component<Props, State> {
       .rgb()
       .string();
 
+    const underlayColor = selectedColor
+      ? color(selectedColor)
+          .fade(0.5)
+          .rgb()
+          .string()
+      : selectedBackgroundColor;
+
     const accessibilityTraits = ['button'];
     const accessibilityStates = [];
 
@@ -210,7 +226,7 @@ class Chip extends React.Component<Props, State> {
           onPress={onPress}
           onPressIn={this._handlePressIn}
           onPressOut={this._handlePressOut}
-          underlayColor={selectedBackgroundColor}
+          underlayColor={underlayColor}
           disabled={disabled}
           accessibilityLabel={accessibilityLabel}
           accessibilityTraits={accessibilityTraits}