fix: correct Chip touchable style (#2976)

callstack · Dec 10, 2021 · 69d5ffe · 69d5ffe
1 parent bd0bae2
commit 69d5ffe
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 8 deletions.
diff --git a/example/src/Examples/ChipExample.tsx b/example/src/Examples/ChipExample.tsx
@@ -216,6 +216,9 @@ const ChipExample = () => {
               With custom close icon
             </Chip>
           </View>
+          <Chip mode="outlined" onPress={() => {}} style={styles.fullWidthChip}>
+            Full width chip
+          </Chip>
         </List.Section>
       </ScreenWrapper>
       <Snackbar
@@ -253,6 +256,10 @@ const styles = StyleSheet.create({
   bigTextStyle: {
     flex: -1,
   },
+  fullWidthChip: {
+    marginVertical: 4,
+    marginHorizontal: 12,
+  },
 });
 
 export default ChipExample;
diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx
@@ -355,6 +355,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingLeft: 4,
     position: 'relative',
+    flexGrow: 1,
   },
   icon: {
     padding: 4,
@@ -391,7 +392,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   touchable: {
-    flex: 1,
+    flexGrow: 1,
   },
 });
 

diff --git a/src/components/__tests__/__snapshots__/Chip.test.js.snap b/src/components/__tests__/__snapshots__/Chip.test.js.snap
@@ -41,7 +41,7 @@ exports[`renders chip with close button 1`] = `
             "borderRadius": 16,
           },
           Object {
-            "flex": 1,
+            "flexGrow": 1,
           },
         ],
       ]
@@ -53,6 +53,7 @@ exports[`renders chip with close button 1`] = `
           Object {
             "alignItems": "center",
             "flexDirection": "row",
+            "flexGrow": 1,
             "paddingLeft": 4,
             "position": "relative",
           },
@@ -263,7 +264,7 @@ exports[`renders chip with custom close button 1`] = `
             "borderRadius": 16,
           },
           Object {
-            "flex": 1,
+            "flexGrow": 1,
           },
         ],
       ]
@@ -275,6 +276,7 @@ exports[`renders chip with custom close button 1`] = `
           Object {
             "alignItems": "center",
             "flexDirection": "row",
+            "flexGrow": 1,
             "paddingLeft": 4,
             "position": "relative",
           },
@@ -485,7 +487,7 @@ exports[`renders chip with icon 1`] = `
             "borderRadius": 16,
           },
           Object {
-            "flex": 1,
+            "flexGrow": 1,
           },
         ],
       ]
@@ -497,6 +499,7 @@ exports[`renders chip with icon 1`] = `
           Object {
             "alignItems": "center",
             "flexDirection": "row",
+            "flexGrow": 1,
             "paddingLeft": 4,
             "position": "relative",
           },
@@ -634,7 +637,7 @@ exports[`renders chip with onPress 1`] = `
             "borderRadius": 16,
           },
           Object {
-            "flex": 1,
+            "flexGrow": 1,
           },
         ],
       ]
@@ -646,6 +649,7 @@ exports[`renders chip with onPress 1`] = `
           Object {
             "alignItems": "center",
             "flexDirection": "row",
+            "flexGrow": 1,
             "paddingLeft": 4,
             "position": "relative",
           },
@@ -735,7 +739,7 @@ exports[`renders outlined disabled chip 1`] = `
             "borderRadius": 16,
           },
           Object {
-            "flex": 1,
+            "flexGrow": 1,
           },
         ],
       ]
@@ -747,6 +751,7 @@ exports[`renders outlined disabled chip 1`] = `
           Object {
             "alignItems": "center",
             "flexDirection": "row",
+            "flexGrow": 1,
             "paddingLeft": 4,
             "position": "relative",
           },
@@ -836,7 +841,7 @@ exports[`renders selected chip 1`] = `
             "borderRadius": 16,
           },
           Object {
-            "flex": 1,
+            "flexGrow": 1,
           },
         ],
       ]
@@ -848,6 +853,7 @@ exports[`renders selected chip 1`] = `
           Object {
             "alignItems": "center",
             "flexDirection": "row",
+            "flexGrow": 1,
             "paddingLeft": 4,
             "position": "relative",
           },

diff --git a/src/components/__tests__/__snapshots__/ListItem.test.js.snap b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
@@ -124,7 +124,7 @@ exports[`renders list item with custom description 1`] = `
                       "borderRadius": 16,
                     },
                     Object {
-                      "flex": 1,
+                      "flexGrow": 1,
                     },
                   ],
                 ]
@@ -136,6 +136,7 @@ exports[`renders list item with custom description 1`] = `
                     Object {
                       "alignItems": "center",
                       "flexDirection": "row",
+                      "flexGrow": 1,
                       "paddingLeft": 4,
                       "position": "relative",
                     },