Repository: callstack/react-native-paper
Pull request #788 (2019-01-30 12:30:31)

fix: Android P ripple effect using overflow hidden and useForeground
This https://github.com/facebook/react-native/issues/6480#issuecomment-454183413 works.

callstack-bot: Hey @ferrannp, thank you for your pull request 🤗. The documentation from this branch can be viewed [here](https://7491-71323749-gh.circle-artifacts.com/0/docs/index.html). Please remember to update Typescript types if you changed API.

Patch:
diff --git a/docs/pages/5.react-native-web.md b/docs/pages/5.react-native-web.md
index 20298b316..28ee8771d 100644
--- a/docs/pages/5.react-native-web.md
+++ b/docs/pages/5.react-native-web.md
@@ -26,6 +26,8 @@ If you don't have a webpack config in your project, copy the following to `webpa
 const path = require('path');
 
 module.exports = {
+  mode: 'development',
+
   // Path to the entry file, change it according to the path you have
   entry: path.join(__dirname, 'App.js'),
 
@@ -40,13 +42,17 @@ module.exports = {
 
   // Loaders and resolver config
   module: {
-    rules: [],
+    rules: [
+
+    ],
+  },
+  resolve: {
+
   },
-  resolver: {},
 
   // Development server config
   devServer: {
-    contentBase: [path.join(__dirname, 'public'), path.join(__dirname, 'dist')],
+    contentBase: [path.join(__dirname, 'public')],
     historyApiFallback: true,
   },
 };
@@ -87,7 +93,7 @@ Now we're ready to start configuring the project.
 
 ### 1. Alias `react-native` to `react-native-web`
 
-First, we have to tell webpack to use `react-native-web` instead of `react-native`. Add the following alias in your webpack config under `resolver`:
+First, we have to tell webpack to use `react-native-web` instead of `react-native`. Add the following alias in your webpack config under `resolve`:
 
 ```js
 alias: {
diff --git a/src/components/IconButton.js b/src/components/IconButton.js
index 71a5088e3..37900d1b1 100644
--- a/src/components/IconButton.js
+++ b/src/components/IconButton.js
@@ -132,6 +132,7 @@ const styles = StyleSheet.create({
         margin: 10,
         alignItems: 'center',
         justifyContent: 'center',
+        overflow: 'visible',
       }
     : {
         borderRadius: 36 / 2,
diff --git a/src/components/Searchbar.js b/src/components/Searchbar.js
index 498949a27..b3c64a9cb 100644
--- a/src/components/Searchbar.js
+++ b/src/components/Searchbar.js
@@ -192,6 +192,7 @@ const styles = StyleSheet.create({
     paddingLeft: 8,
     alignSelf: 'stretch',
     textAlign: I18nManager.isRTL ? 'right' : 'left',
+    minWidth: 0,
   },
 });
 
diff --git a/src/components/TouchableRipple.js b/src/components/TouchableRipple.js
index 7b68d882d..9789aac71 100644
--- a/src/components/TouchableRipple.js
+++ b/src/components/TouchableRipple.js
@@ -13,7 +13,7 @@ import { withTheme } from '../core/theming';
 import type { Theme } from '../types';
 
 const ANDROID_VERSION_LOLLIPOP = 21;
-const ANDROID_VERSION_NOUGAT = 27;
+const ANDROID_VERSION_PIE = 28;
 
 type Props = React.ElementConfig<typeof TouchableWithoutFeedback> & {|
   /**
@@ -84,12 +84,7 @@ class TouchableRipple extends React.Component<Props, void> {
    * Whether ripple effect is supported.
    */
   static supported =
-    Platform.OS === 'android' &&
-    Platform.Version >= ANDROID_VERSION_LOLLIPOP &&
-    // Ripple effect doesn't work properly with border radius on Android P
-    // So we disable it temporarily
-    // https://github.com/facebook/react-native/issues/6480
-    Platform.Version <= ANDROID_VERSION_NOUGAT;
+    Platform.OS === 'android' && Platform.Version >= ANDROID_VERSION_LOLLIPOP;
 
   render() {
     const {
@@ -113,11 +108,19 @@ class TouchableRipple extends React.Component<Props, void> {
         .rgb()
         .string();
 
+    // A workaround for ripple on Android P is to use useForeground + overflow: 'hidden'
+    // https://github.com/facebook/react-native/issues/6480
+    const useForeground =
+      Platform.OS === 'android' &&
+      Platform.Version >= ANDROID_VERSION_PIE &&
+      borderless;
+
     if (TouchableRipple.supported) {
       return (
         <TouchableNativeFeedback
           {...rest}
           disabled={disabled}
+          useForeground={useForeground}
           background={
             background != null
               ? background
@@ -127,7 +130,9 @@ class TouchableRipple extends React.Component<Props, void> {
                 )
           }
         >
-          <View style={style}>{React.Children.only(children)}</View>
+          <View style={[borderless && { overflow: 'hidden' }, style]}>
+            {React.Children.only(children)}
+          </View>
         </TouchableNativeFeedback>
       );
     }
@@ -136,7 +141,7 @@ class TouchableRipple extends React.Component<Props, void> {
       <TouchableHighlight
         {...rest}
         disabled={disabled}
-        style={style}
+        style={[borderless && { overflow: 'hidden' }, style]}
         underlayColor={
           underlayColor != null
             ? underlayColor


Test patch:
diff --git a/src/components/__tests__/__snapshots__/Banner.test.js.snap b/src/components/__tests__/__snapshots__/Banner.test.js.snap
index a640ed5fc..e96b31ac0 100644
--- a/src/components/__tests__/__snapshots__/Banner.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Banner.test.js.snap
@@ -200,9 +200,14 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "borderRadius": 4,
-            }
+            Array [
+              Object {
+                "overflow": "hidden",
+              },
+              Object {
+                "borderRadius": 4,
+              },
+            ]
           }
         >
           <View
@@ -353,9 +358,14 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "borderRadius": 4,
-            }
+            Array [
+              Object {
+                "overflow": "hidden",
+              },
+              Object {
+                "borderRadius": 4,
+              },
+            ]
           }
         >
           <View
@@ -435,9 +445,14 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            Object {
-              "borderRadius": 4,
-            }
+            Array [
+              Object {
+                "overflow": "hidden",
+              },
+              Object {
+                "borderRadius": 4,
+              },
+            ]
           }
         >
           <View
diff --git a/src/components/__tests__/__snapshots__/Button.test.js.snap b/src/components/__tests__/__snapshots__/Button.test.js.snap
index d6364056a..25076c9a7 100644
--- a/src/components/__tests__/__snapshots__/Button.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Button.test.js.snap
@@ -32,9 +32,14 @@ exports[`renders button with color 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "borderRadius": 4,
-      }
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        Object {
+          "borderRadius": 4,
+        },
+      ]
     }
   >
     <View
@@ -114,9 +119,14 @@ exports[`renders button with icon 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "borderRadius": 4,
-      }
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        Object {
+          "borderRadius": 4,
+        },
+      ]
     }
   >
     <View
@@ -240,9 +250,14 @@ exports[`renders contained contained with mode 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "borderRadius": 4,
-      }
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        Object {
+          "borderRadius": 4,
+        },
+      ]
     }
   >
     <View
@@ -320,9 +335,14 @@ exports[`renders disabled button 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "borderRadius": 4,
-      }
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        Object {
+          "borderRadius": 4,
+        },
+      ]
     }
   >
     <View
@@ -402,9 +422,14 @@ exports[`renders loading button 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "borderRadius": 4,
-      }
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        Object {
+          "borderRadius": 4,
+        },
+      ]
     }
   >
     <View
@@ -497,9 +522,14 @@ exports[`renders outlined button with mode 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "borderRadius": 4,
-      }
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        Object {
+          "borderRadius": 4,
+        },
+      ]
     }
   >
     <View
@@ -579,9 +609,14 @@ exports[`renders text button by default 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "borderRadius": 4,
-      }
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        Object {
+          "borderRadius": 4,
+        },
+      ]
     }
   >
     <View
@@ -661,9 +696,14 @@ exports[`renders text button with mode 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "borderRadius": 4,
-      }
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        Object {
+          "borderRadius": 4,
+        },
+      ]
     }
   >
     <View
diff --git a/src/components/__tests__/__snapshots__/Checkbox.test.js.snap b/src/components/__tests__/__snapshots__/Checkbox.test.js.snap
index 792b7c960..a0cb5ad8b 100644
--- a/src/components/__tests__/__snapshots__/Checkbox.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Checkbox.test.js.snap
@@ -12,10 +12,15 @@ exports[`renders checked Checkbox with color 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "borderRadius": 18,
-      "padding": 6,
-    }
+    Array [
+      Object {
+        "overflow": "hidden",
+      },
+      Object {
+        "borderRadius": 18,
+        "padding": 6,
+      },
+    ]
   }
 >
   <View
@@ -75,10 +80,15 @@ exports[`renders checked Checkbox with onPress 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "borderRadius": 18,
-      "padding": 6,
-    }
+    Array [
+      Object {
+        "overflow": "hidden",
+      },
+      Object {
+        "borderRadius": 18,
+        "padding": 6,
+      },
+    ]
   }
 >
   <View
@@ -138,10 +148,15 @@ exports[`renders indeterminate Checkbox 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "borderRadius": 18,
-      "padding": 6,
-    }
+    Array [
+      Object {
+        "overflow": "hidden",
+      },
+      Object {
+        "borderRadius": 18,
+        "padding": 6,
+      },
+    ]
   }
 >
   <View
@@ -201,10 +216,15 @@ exports[`renders indeterminate Checkbox with color 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "borderRadius": 18,
-      "padding": 6,
-    }
+    Array [
+      Object {
+        "overflow": "hidden",
+      },
+      Object {
+        "borderRadius": 18,
+        "padding": 6,
+      },
+    ]
   }
 >
   <View
@@ -264,10 +284,15 @@ exports[`renders unchecked Checkbox with color 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "borderRadius": 18,
-      "padding": 6,
-    }
+    Array [
+      Object {
+        "overflow": "hidden",
+      },
+      Object {
+        "borderRadius": 18,
+        "padding": 6,
+      },
+    ]
   }
 >
   <View
@@ -327,10 +352,15 @@ exports[`renders unchecked Checkbox with onPress 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "borderRadius": 18,
-      "padding": 6,
-    }
+    Array [
+      Object {
+        "overflow": "hidden",
+      },
+      Object {
+        "borderRadius": 18,
+        "padding": 6,
+      },
+    ]
   }
 >
   <View
diff --git a/src/components/__tests__/__snapshots__/Chip.test.js.snap b/src/components/__tests__/__snapshots__/Chip.test.js.snap
index eaf514bae..95511f8cd 100644
--- a/src/components/__tests__/__snapshots__/Chip.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Chip.test.js.snap
@@ -25,9 +25,14 @@ exports[`renders chip with close button 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "borderRadius": 16,
-      }
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        Object {
+          "borderRadius": 16,
+        },
+      ]
     }
   >
     <View
@@ -193,9 +198,14 @@ exports[`renders chip with icon 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "borderRadius": 16,
-      }
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        Object {
+          "borderRadius": 16,
+        },
+      ]
     }
   >
     <View
@@ -310,9 +320,14 @@ exports[`renders chip with onPress 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "borderRadius": 16,
-      }
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        Object {
+          "borderRadius": 16,
+        },
+      ]
     }
   >
     <View
@@ -386,9 +401,14 @@ exports[`renders outlined disabled chip 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "borderRadius": 16,
-      }
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        Object {
+          "borderRadius": 16,
+        },
+      ]
     }
   >
     <View
@@ -462,9 +482,14 @@ exports[`renders selected chip 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "borderRadius": 16,
-      }
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        Object {
+          "borderRadius": 16,
+        },
+      ]
     }
   >
     <View
diff --git a/src/components/__tests__/__snapshots__/DataTable.test.js.snap b/src/components/__tests__/__snapshots__/DataTable.test.js.snap
index a64841767..713203802 100644
--- a/src/components/__tests__/__snapshots__/DataTable.test.js.snap
+++ b/src/components/__tests__/__snapshots__/DataTable.test.js.snap
@@ -12,13 +12,16 @@ exports[`renders data table cell 1`] = `
   onStartShouldSetResponder={[Function]}
   style={
     Array [
-      Object {
-        "alignItems": "center",
-        "flex": 1,
-        "flexDirection": "row",
-      },
-      undefined,
-      undefined,
+      false,
+      Array [
+        Object {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+        },
+        undefined,
+        undefined,
+      ],
     ]
   }
 >
@@ -216,15 +219,20 @@ exports[`renders data table pagination 1`] = `
     style={
       Array [
         Object {
-          "alignItems": "center",
-          "borderRadius": 18,
-          "height": 36,
-          "justifyContent": "center",
-          "margin": 6,
-          "width": 36,
+          "overflow": "hidden",
         },
-        false,
-        undefined,
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderRadius": 18,
+            "height": 36,
+            "justifyContent": "center",
+            "margin": 6,
+            "width": 36,
+          },
+          false,
+          undefined,
+        ],
       ]
     }
   >
@@ -288,15 +296,20 @@ exports[`renders data table pagination 1`] = `
     style={
       Array [
         Object {
-          "alignItems": "center",
-          "borderRadius": 18,
-          "height": 36,
-          "justifyContent": "center",
-          "margin": 6,
-          "width": 36,
+          "overflow": "hidden",
         },
-        false,
-        undefined,
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderRadius": 18,
+            "height": 36,
+            "justifyContent": "center",
+            "margin": 6,
+            "width": 36,
+          },
+          false,
+          undefined,
+        ],
       ]
     }
   >
@@ -401,15 +414,20 @@ exports[`renders data table pagination with label 1`] = `
     style={
       Array [
         Object {
-          "alignItems": "center",
-          "borderRadius": 18,
-          "height": 36,
-          "justifyContent": "center",
-          "margin": 6,
-          "width": 36,
+          "overflow": "hidden",
         },
-        false,
-        undefined,
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderRadius": 18,
+            "height": 36,
+            "justifyContent": "center",
+            "margin": 6,
+            "width": 36,
+          },
+          false,
+          undefined,
+        ],
       ]
     }
   >
@@ -473,15 +491,20 @@ exports[`renders data table pagination with label 1`] = `
     style={
       Array [
         Object {
-          "alignItems": "center",
-          "borderRadius": 18,
-          "height": 36,
-          "justifyContent": "center",
-          "margin": 6,
-          "width": 36,
+          "overflow": "hidden",
         },
-        false,
-        undefined,
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderRadius": 18,
+            "height": 36,
+            "justifyContent": "center",
+            "margin": 6,
+            "width": 36,
+          },
+          false,
+          undefined,
+        ],
       ]
     }
   >
@@ -739,15 +762,18 @@ exports[`renders right aligned data table cell 1`] = `
   onStartShouldSetResponder={[Function]}
   style={
     Array [
-      Object {
-        "alignItems": "center",
-        "flex": 1,
-        "flexDirection": "row",
-      },
-      Object {
-        "justifyContent": "flex-end",
-      },
-      undefined,
+      false,
+      Array [
+        Object {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+        },
+        Object {
+          "justifyContent": "flex-end",
+        },
+        undefined,
+      ],
     ]
   }
 >
diff --git a/src/components/__tests__/__snapshots__/DrawerItem.test.js.snap b/src/components/__tests__/__snapshots__/DrawerItem.test.js.snap
index 68743e408..bd453794a 100644
--- a/src/components/__tests__/__snapshots__/DrawerItem.test.js.snap
+++ b/src/components/__tests__/__snapshots__/DrawerItem.test.js.snap
@@ -27,9 +27,14 @@ exports[`renders DrawerItem with icon 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "borderRadius": 4,
-      }
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        Object {
+          "borderRadius": 4,
+        },
+      ]
     }
   >
     <View
@@ -137,9 +142,14 @@ exports[`renders active DrawerItem 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "borderRadius": 4,
-      }
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        Object {
+          "borderRadius": 4,
+        },
+      ]
     }
   >
     <View
@@ -242,9 +252,14 @@ exports[`renders basic DrawerItem 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "borderRadius": 4,
-      }
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        Object {
+          "borderRadius": 4,
+        },
+      ]
     }
   >
     <View
diff --git a/src/components/__tests__/__snapshots__/FAB.test.js.snap b/src/components/__tests__/__snapshots__/FAB.test.js.snap
index ca6462df4..2be767320 100644
--- a/src/components/__tests__/__snapshots__/FAB.test.js.snap
+++ b/src/components/__tests__/__snapshots__/FAB.test.js.snap
@@ -36,9 +36,14 @@ exports[`renders extended FAB 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "borderRadius": 28,
-      }
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        Object {
+          "borderRadius": 28,
+        },
+      ]
     }
   >
     <View
@@ -187,9 +192,14 @@ exports[`renders normal FAB 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "borderRadius": 28,
-      }
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        Object {
+          "borderRadius": 28,
+        },
+      ]
     }
   >
     <View
@@ -315,9 +325,14 @@ exports[`renders small FAB 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={
-      Object {
-        "borderRadius": 28,
-      }
+      Array [
+        Object {
+          "overflow": "hidden",
+        },
+        Object {
+          "borderRadius": 28,
+        },
+      ]
     }
   >
     <View
diff --git a/src/components/__tests__/__snapshots__/IconButton.test.js.snap b/src/components/__tests__/__snapshots__/IconButton.test.js.snap
index 2c3287312..86b78bbd7 100644
--- a/src/components/__tests__/__snapshots__/IconButton.test.js.snap
+++ b/src/components/__tests__/__snapshots__/IconButton.test.js.snap
@@ -27,17 +27,22 @@ exports[`renders disabled icon button 1`] = `
   style={
     Array [
       Object {
-        "alignItems": "center",
-        "borderRadius": 18,
-        "height": 36,
-        "justifyContent": "center",
-        "margin": 6,
-        "width": 36,
+        "overflow": "hidden",
       },
-      Object {
-        "opacity": 0.32,
-      },
-      undefined,
+      Array [
+        Object {
+          "alignItems": "center",
+          "borderRadius": 18,
+          "height": 36,
+          "justifyContent": "center",
+          "margin": 6,
+          "width": 36,
+        },
+        Object {
+          "opacity": 0.32,
+        },
+        undefined,
+      ],
     ]
   }
 >
@@ -104,15 +109,20 @@ exports[`renders icon button by default 1`] = `
   style={
     Array [
       Object {
-        "alignItems": "center",
-        "borderRadius": 18,
-        "height": 36,
-        "justifyContent": "center",
-        "margin": 6,
-        "width": 36,
+        "overflow": "hidden",
       },
-      undefined,
-      undefined,
+      Array [
+        Object {
+          "alignItems": "center",
+          "borderRadius": 18,
+          "height": 36,
+          "justifyContent": "center",
+          "margin": 6,
+          "width": 36,
+        },
+        undefined,
+        undefined,
+      ],
     ]
   }
 >
@@ -179,15 +189,20 @@ exports[`renders icon button with color 1`] = `
   style={
     Array [
       Object {
-        "alignItems": "center",
-        "borderRadius": 18,
-        "height": 36,
-        "justifyContent": "center",
-        "margin": 6,
-        "width": 36,
+        "overflow": "hidden",
       },
-      undefined,
-      undefined,
+      Array [
+        Object {
+          "alignItems": "center",
+          "borderRadius": 18,
+          "height": 36,
+          "justifyContent": "center",
+          "margin": 6,
+          "width": 36,
+        },
+        undefined,
+        undefined,
+      ],
     ]
   }
 >
@@ -254,15 +269,20 @@ exports[`renders icon button with size 1`] = `
   style={
     Array [
       Object {
-        "alignItems": "center",
-        "borderRadius": 18,
-        "height": 36,
-        "justifyContent": "center",
-        "margin": 6,
-        "width": 36,
+        "overflow": "hidden",
       },
-      undefined,
-      undefined,
+      Array [
+        Object {
+          "alignItems": "center",
+          "borderRadius": 18,
+          "height": 36,
+          "justifyContent": "center",
+          "margin": 6,
+          "width": 36,
+        },
+        undefined,
+        undefined,
+      ],
     ]
   }
 >
@@ -329,15 +349,20 @@ exports[`renders icon change animated 1`] = `
   style={
     Array [
       Object {
-        "alignItems": "center",
-        "borderRadius": 18,
-        "height": 36,
-        "justifyContent": "center",
-        "margin": 6,
-        "width": 36,
+        "overflow": "hidden",
       },
-      undefined,
-      undefined,
+      Array [
+        Object {
+          "alignItems": "center",
+          "borderRadius": 18,
+          "height": 36,
+          "justifyContent": "center",
+          "margin": 6,
+          "width": 36,
+        },
+        undefined,
+        undefined,
+      ],
     ]
   }
 >
diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap
index d821f21b6..5d09154e4 100644
--- a/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap
@@ -14,10 +14,13 @@ exports[`renders expanded accordion 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Array [
-        Object {
-          "padding": 8,
-        },
-        undefined,
+        false,
+        Array [
+          Object {
+            "padding": 8,
+          },
+          undefined,
+        ],
       ]
     }
   >
@@ -124,10 +127,13 @@ exports[`renders expanded accordion 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Array [
-        Object {
-          "padding": 8,
-        },
-        undefined,
+        false,
+        Array [
+          Object {
+            "padding": 8,
+          },
+          undefined,
+        ],
       ]
     }
   >
@@ -195,10 +201,13 @@ exports[`renders list accordion with children 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Array [
-        Object {
-          "padding": 8,
-        },
-        undefined,
+        false,
+        Array [
+          Object {
+            "padding": 8,
+          },
+          undefined,
+        ],
       ]
     }
   >
@@ -361,10 +370,13 @@ exports[`renders list accordion with left items 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Array [
-        Object {
-          "padding": 8,
-        },
-        undefined,
+        false,
+        Array [
+          Object {
+            "padding": 8,
+          },
+          undefined,
+        ],
       ]
     }
   >
@@ -527,10 +539,13 @@ exports[`renders multiline list accordion 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Array [
-        Object {
-          "padding": 8,
-        },
-        undefined,
+        false,
+        Array [
+          Object {
+            "padding": 8,
+          },
+          undefined,
+        ],
       ]
     }
   >
diff --git a/src/components/__tests__/__snapshots__/ListItem.test.js.snap b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
index 01b3eb821..946ebd4cd 100644
--- a/src/components/__tests__/__snapshots__/ListItem.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
@@ -12,10 +12,13 @@ exports[`renders list item with left and right items 1`] = `
   onStartShouldSetResponder={[Function]}
   style={
     Array [
-      Object {
-        "padding": 8,
-      },
-      undefined,
+      false,
+      Array [
+        Object {
+          "padding": 8,
+        },
+        undefined,
+      ],
     ]
   }
 >
@@ -156,10 +159,13 @@ exports[`renders list item with left item 1`] = `
   onStartShouldSetResponder={[Function]}
   style={
     Array [
-      Object {
-        "padding": 8,
-      },
-      undefined,
+      false,
+      Array [
+        Object {
+          "padding": 8,
+        },
+        undefined,
+      ],
     ]
   }
 >
@@ -274,10 +280,13 @@ exports[`renders list item with right item 1`] = `
   onStartShouldSetResponder={[Function]}
   style={
     Array [
-      Object {
-        "padding": 8,
-      },
-      undefined,
+      false,
+      Array [
+        Object {
+          "padding": 8,
+        },
+        undefined,
+      ],
     ]
   }
 >
@@ -345,10 +354,13 @@ exports[`renders list item with title and description 1`] = `
   onStartShouldSetResponder={[Function]}
   style={
     Array [
-      Object {
-        "padding": 8,
-      },
-      undefined,
+      false,
+      Array [
+        Object {
+          "padding": 8,
+        },
+        undefined,
+      ],
     ]
   }
 >
diff --git a/src/components/__tests__/__snapshots__/ListSection.test.js.snap b/src/components/__tests__/__snapshots__/ListSection.test.js.snap
index d594f4392..ccb243031 100644
--- a/src/components/__tests__/__snapshots__/ListSection.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ListSection.test.js.snap
@@ -47,10 +47,13 @@ exports[`renders list section with title 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Array [
-        Object {
-          "padding": 8,
-        },
-        undefined,
+        false,
+        Array [
+          Object {
+            "padding": 8,
+          },
+          undefined,
+        ],
       ]
     }
   >
@@ -162,10 +165,13 @@ exports[`renders list section with title 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Array [
-        Object {
-          "padding": 8,
-        },
-        undefined,
+        false,
+        Array [
+          Object {
+            "padding": 8,
+          },
+          undefined,
+        ],
       ]
     }
   >
@@ -291,10 +297,13 @@ exports[`renders list section without title 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Array [
-        Object {
-          "padding": 8,
-        },
-        undefined,
+        false,
+        Array [
+          Object {
+            "padding": 8,
+          },
+          undefined,
+        ],
       ]
     }
   >
@@ -406,10 +415,13 @@ exports[`renders list section without title 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Array [
-        Object {
-          "padding": 8,
-        },
-        undefined,
+        false,
+        Array [
+          Object {
+            "padding": 8,
+          },
+          undefined,
+        ],
       ]
     }
   >
diff --git a/src/components/__tests__/__snapshots__/Searchbar.test.js.snap b/src/components/__tests__/__snapshots__/Searchbar.test.js.snap
index 700f30d63..35ac802c3 100644
--- a/src/components/__tests__/__snapshots__/Searchbar.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Searchbar.test.js.snap
@@ -40,15 +40,20 @@ exports[`renders with placeholder 1`] = `
     style={
       Array [
         Object {
-          "alignItems": "center",
-          "borderRadius": 18,
-          "height": 36,
-          "justifyContent": "center",
-          "margin": 6,
-          "width": 36,
+          "overflow": "hidden",
         },
-        undefined,
-        undefined,
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderRadius": 18,
+            "height": 36,
+            "justifyContent": "center",
+            "margin": 6,
+            "width": 36,
+          },
+          undefined,
+          undefined,
+        ],
       ]
     }
   >
@@ -106,6 +111,7 @@ exports[`renders with placeholder 1`] = `
           "alignSelf": "stretch",
           "flex": 1,
           "fontSize": 18,
+          "minWidth": 0,
           "paddingLeft": 8,
           "textAlign": "left",
         },
@@ -143,17 +149,22 @@ exports[`renders with placeholder 1`] = `
     style={
       Array [
         Object {
-          "alignItems": "center",
-          "borderRadius": 18,
-          "height": 36,
-          "justifyContent": "center",
-          "margin": 6,
-          "width": 36,
+          "overflow": "hidden",
         },
-        Object {
-          "opacity": 0.32,
-        },
-        undefined,
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderRadius": 18,
+            "height": 36,
+            "justifyContent": "center",
+            "margin": 6,
+            "width": 36,
+          },
+          Object {
+            "opacity": 0.32,
+          },
+          undefined,
+        ],
       ]
     }
   >
@@ -239,15 +250,20 @@ exports[`renders with text 1`] = `
     style={
       Array [
         Object {
-          "alignItems": "center",
-          "borderRadius": 18,
-          "height": 36,
-          "justifyContent": "center",
-          "margin": 6,
-          "width": 36,
+          "overflow": "hidden",
         },
-        undefined,
-        undefined,
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderRadius": 18,
+            "height": 36,
+            "justifyContent": "center",
+            "margin": 6,
+            "width": 36,
+          },
+          undefined,
+          undefined,
+        ],
       ]
     }
   >
@@ -305,6 +321,7 @@ exports[`renders with text 1`] = `
           "alignSelf": "stretch",
           "flex": 1,
           "fontSize": 18,
+          "minWidth": 0,
           "paddingLeft": 8,
           "textAlign": "left",
         },
@@ -338,15 +355,20 @@ exports[`renders with text 1`] = `
     style={
       Array [
         Object {
-          "alignItems": "center",
-          "borderRadius": 18,
-          "height": 36,
-          "justifyContent": "center",
-          "margin": 6,
-          "width": 36,
+          "overflow": "hidden",
         },
-        false,
-        undefined,
+        Array [
+          Object {
+            "alignItems": "center",
+            "borderRadius": 18,
+            "height": 36,
+            "justifyContent": "center",
+            "margin": 6,
+            "width": 36,
+          },
+          false,
+          undefined,
+        ],
       ]
     }
   >
diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
index b3f6e0a9a..a2aed10b8 100644
--- a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
@@ -171,9 +171,14 @@ exports[`renders snackbar with action button 1`] = `
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
         style={
-          Object {
-            "borderRadius": 4,
-          }
+          Array [
+            Object {
+              "overflow": "hidden",
+            },
+            Object {
+              "borderRadius": 4,
+            },
+          ]
         }
       >
         <View
diff --git a/src/components/__tests__/__snapshots__/ToggleButton.test.js.snap b/src/components/__tests__/__snapshots__/ToggleButton.test.js.snap
index 3f5c015a9..0eaeeb510 100644
--- a/src/components/__tests__/__snapshots__/ToggleButton.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ToggleButton.test.js.snap
@@ -26,29 +26,32 @@ exports[`renders disabled toggle button 1`] = `
   onStartShouldSetResponder={[Function]}
   style={
     Array [
-      Object {
-        "alignItems": "center",
-        "borderRadius": 18,
-        "height": 36,
-        "justifyContent": "center",
-        "margin": 6,
-        "width": 36,
-      },
-      Object {
-        "opacity": 0.32,
-      },
+      false,
       Array [
         Object {
-          "height": 42,
-          "margin": 0,
-          "width": 42,
+          "alignItems": "center",
+          "borderRadius": 18,
+          "height": 36,
+          "justifyContent": "center",
+          "margin": 6,
+          "width": 36,
         },
         Object {
-          "backgroundColor": "rgba(0, 0, 0, .08)",
-          "borderColor": "rgba(0, 0, 0, 0.29)",
-          "borderRadius": 4,
+          "opacity": 0.32,
         },
-        undefined,
+        Array [
+          Object {
+            "height": 42,
+            "margin": 0,
+            "width": 42,
+          },
+          Object {
+            "backgroundColor": "rgba(0, 0, 0, .08)",
+            "borderColor": "rgba(0, 0, 0, 0.29)",
+            "borderRadius": 4,
+          },
+          undefined,
+        ],
       ],
     ]
   }
@@ -115,27 +118,30 @@ exports[`renders toggle button 1`] = `
   onStartShouldSetResponder={[Function]}
   style={
     Array [
-      Object {
-        "alignItems": "center",
-        "borderRadius": 18,
-        "height": 36,
-        "justifyContent": "center",
-        "margin": 6,
-        "width": 36,
-      },
-      undefined,
+      false,
       Array [
         Object {
-          "height": 42,
-          "margin": 0,
-          "width": 42,
-        },
-        Object {
-          "backgroundColor": "rgba(0, 0, 0, .08)",
-          "borderColor": "rgba(0, 0, 0, 0.29)",
-          "borderRadius": 4,
+          "alignItems": "center",
+          "borderRadius": 18,
+          "height": 36,
+          "justifyContent": "center",
+          "margin": 6,
+          "width": 36,
         },
         undefined,
+        Array [
+          Object {
+            "height": 42,
+            "margin": 0,
+            "width": 42,
+          },
+          Object {
+            "backgroundColor": "rgba(0, 0, 0, .08)",
+            "borderColor": "rgba(0, 0, 0, 0.29)",
+            "borderRadius": 4,
+          },
+          undefined,
+        ],
       ],
     ]
   }
@@ -207,29 +213,32 @@ exports[`renders unchecked toggle button 1`] = `
   onStartShouldSetResponder={[Function]}
   style={
     Array [
-      Object {
-        "alignItems": "center",
-        "borderRadius": 18,
-        "height": 36,
-        "justifyContent": "center",
-        "margin": 6,
-        "width": 36,
-      },
-      Object {
-        "opacity": 0.32,
-      },
+      false,
       Array [
         Object {
-          "height": 42,
-          "margin": 0,
-          "width": 42,
+          "alignItems": "center",
+          "borderRadius": 18,
+          "height": 36,
+          "justifyContent": "center",
+          "margin": 6,
+          "width": 36,
         },
         Object {
-          "backgroundColor": "transparent",
-          "borderColor": "rgba(0, 0, 0, 0.29)",
-          "borderRadius": 4,
+          "opacity": 0.32,
         },
-        undefined,
+        Array [
+          Object {
+            "height": 42,
+            "margin": 0,
+            "width": 42,
+          },
+          Object {
+            "backgroundColor": "transparent",
+            "borderColor": "rgba(0, 0, 0, 0.29)",
+            "borderRadius": 4,
+          },
+          undefined,
+        ],
       ],
     ]
   }