Repository: codypearce/material-bread
Pull request #374 (2020-04-01 15:43:00)

Added useNativeDriver to Animated to supress warnings on RN .62


Patch:
diff --git a/src/Components/Backdrop/BackLayer/BackLayer.js b/src/Components/Backdrop/BackLayer/BackLayer.js
index 04f92be..d010a9f 100644
--- a/src/Components/Backdrop/BackLayer/BackLayer.js
+++ b/src/Components/Backdrop/BackLayer/BackLayer.js
@@ -29,7 +29,9 @@ class BackLayer extends Component {
     });
 
     return (
-      <Animated.View style={[styles.backLayer, { opacity }]}>
+      <Animated.View
+        style={[styles.backLayer, { opacity }]}
+        useNativeDriver={false}>
         {backLayerConcealed}
       </Animated.View>
     );
@@ -47,7 +49,9 @@ class BackLayer extends Component {
     });
 
     return (
-      <Animated.View style={[styles.backLayer, { opacity }]}>
+      <Animated.View
+        style={[styles.backLayer, { opacity }]}
+        useNativeDriver={false}>
         {this.renderBackElements()}
       </Animated.View>
     );
@@ -62,7 +66,7 @@ class BackLayer extends Component {
     });
 
     return (
-      <Animated.View style={{ flex: 1, opacity }}>
+      <Animated.View style={{ flex: 1, opacity }} useNativeDriver={false}>
         {backLayerRevealed}
       </Animated.View>
     );
diff --git a/src/Components/Backdrop/FrontLayer/FrontLayer.js b/src/Components/Backdrop/FrontLayer/FrontLayer.js
index a73af07..40951b5 100644
--- a/src/Components/Backdrop/FrontLayer/FrontLayer.js
+++ b/src/Components/Backdrop/FrontLayer/FrontLayer.js
@@ -72,6 +72,7 @@ class FrontLayer extends PureComponent {
 
     return (
       <Animated.View
+        useNativeDriver={false}
         style={[
           styles.frontLayerContainer,
           frontLayerStyle,
diff --git a/src/Components/Backdrop/FrontLayerScrim/FrontLayerScrim.js b/src/Components/Backdrop/FrontLayerScrim/FrontLayerScrim.js
index bc8f738..0051972 100644
--- a/src/Components/Backdrop/FrontLayerScrim/FrontLayerScrim.js
+++ b/src/Components/Backdrop/FrontLayerScrim/FrontLayerScrim.js
@@ -22,7 +22,9 @@ class FrontLayerScrim extends Component {
 
     return (
       <TouchableWithoutFeedback onPress={() => toggleLayout()}>
-        <Animated.View style={[styles.scrimLayer, { opacity: animate }]}>
+        <Animated.View
+          style={[styles.scrimLayer, { opacity: animate }]}
+          useNativeDriver={false}>
           <Icon
             name="expand-less"
             size={24}
diff --git a/src/Components/Backdrop/HeaderButton/HeaderButton.js b/src/Components/Backdrop/HeaderButton/HeaderButton.js
index e9feb78..a95a8af 100644
--- a/src/Components/Backdrop/HeaderButton/HeaderButton.js
+++ b/src/Components/Backdrop/HeaderButton/HeaderButton.js
@@ -48,7 +48,7 @@ class HeaderButton extends Component {
     ];
 
     return (
-      <Animated.View style={style}>
+      <Animated.View style={style} useNativeDriver={false}>
         <Ripple
           rippleContainerBorderRadius={100}
           onPress={() => this._handleSpin()}
diff --git a/src/Components/Badge/Badge.js b/src/Components/Badge/Badge.js
index a1df7c3..15bfdad 100644
--- a/src/Components/Badge/Badge.js
+++ b/src/Components/Badge/Badge.js
@@ -134,6 +134,7 @@ class Badge extends Component {
 
     return (
       <Animated.View
+        useNativeDriver={false}
         style={[
           {
             height: size,
diff --git a/src/Components/Banner/Banner.js b/src/Components/Banner/Banner.js
index 9858966..f47cf17 100644
--- a/src/Components/Banner/Banner.js
+++ b/src/Components/Banner/Banner.js
@@ -209,6 +209,7 @@ class Banner extends Component {
 
     return (
       <Animated.View
+        useNativeDriver={false}
         style={[
           styles.container,
           {
diff --git a/src/Components/BottomNavigation/BottomNavigationItem/BottomNavigationItem.js b/src/Components/BottomNavigation/BottomNavigationItem/BottomNavigationItem.js
index f477152..1205485 100644
--- a/src/Components/BottomNavigation/BottomNavigationItem/BottomNavigationItem.js
+++ b/src/Components/BottomNavigation/BottomNavigationItem/BottomNavigationItem.js
@@ -84,6 +84,7 @@ class BottomNavigationItem extends Component {
     const { label } = this.props;
     return (
       <Animated.Text
+        useNativeDriver={false}
         style={{
           color: color,
           fontSize: this.state.scaleText,
diff --git a/src/Components/Button/ContainedButton/ContainedButton.js b/src/Components/Button/ContainedButton/ContainedButton.js
index ebf48f8..57c9ef8 100644
--- a/src/Components/Button/ContainedButton/ContainedButton.js
+++ b/src/Components/Button/ContainedButton/ContainedButton.js
@@ -190,6 +190,7 @@ class ContainedButton extends Component {
         style={[containerStyle]}>
         {() => (
           <Animated.View
+            useNativeDriver={false}
             style={[
               disabled ? {} : this.getShadowStyle(),
               {
diff --git a/src/Components/DataTable/DataTableCell/DataTableCell.js b/src/Components/DataTable/DataTableCell/DataTableCell.js
index b52bc6b..d4a600d 100644
--- a/src/Components/DataTable/DataTableCell/DataTableCell.js
+++ b/src/Components/DataTable/DataTableCell/DataTableCell.js
@@ -58,6 +58,7 @@ class TableCell extends Component {
   _renderSortingIcon() {
     return (
       <Animated.View
+        useNativeDriver={false}
         style={{
           transform: [
             {
diff --git a/src/Components/Drawer/Drawer.js b/src/Components/Drawer/Drawer.js
index 49933a5..29c1a4c 100644
--- a/src/Components/Drawer/Drawer.js
+++ b/src/Components/Drawer/Drawer.js
@@ -174,6 +174,7 @@ class Drawer extends PureComponent {
     if (scrimColor) scrimColorImplemented = scrimColor;
     return (
       <Animated.View
+        useNativeDriver={false}
         style={[
           styles.container,
           {
@@ -215,6 +216,7 @@ class Drawer extends PureComponent {
         <View style={contentContainerStyle}>
           {appbar ? this._renderAppBar() : null}
           <Animated.View
+            useNativeDriver={false}
             style={{
               transform: [{ translateX: leftOffset }],
               flex: 1,
@@ -257,6 +259,7 @@ class Drawer extends PureComponent {
     return (
       <Fragment>
         <Animated.View
+          useNativeDriver={false}
           style={[
             theme.drawer,
             {
diff --git a/src/Components/Fab/Fab.js b/src/Components/Fab/Fab.js
index 37795bf..4fde266 100644
--- a/src/Components/Fab/Fab.js
+++ b/src/Components/Fab/Fab.js
@@ -146,6 +146,7 @@ export class Fab extends Component {
 
     return (
       <Animated.View
+        useNativeDriver={false}
         style={[
           {
             transform: [{ scale: scale }],
diff --git a/src/Components/Fab/FabSpeedDial/FabSpeedDial.js b/src/Components/Fab/FabSpeedDial/FabSpeedDial.js
index aa9b5f4..c35b153 100644
--- a/src/Components/Fab/FabSpeedDial/FabSpeedDial.js
+++ b/src/Components/Fab/FabSpeedDial/FabSpeedDial.js
@@ -132,6 +132,7 @@ class FabSpeedDial extends Component {
         {actions.map((item, index) => {
           return (
             <Animated.View
+              useNativeDriver={false}
               key={index}
               style={{
                 marginTop: 16,
diff --git a/src/Components/List/ListExpand/ListExpand.js b/src/Components/List/ListExpand/ListExpand.js
index 408987f..e337a30 100644
--- a/src/Components/List/ListExpand/ListExpand.js
+++ b/src/Components/List/ListExpand/ListExpand.js
@@ -85,6 +85,7 @@ class ListExpand extends Component {
 
     return (
       <Animated.View
+        useNativeDriver={false}
         style={{
           height: menuHeight,
           overflow: 'hidden',
diff --git a/src/Components/Menu/Menu.js b/src/Components/Menu/Menu.js
index 5b0a690..8461605 100644
--- a/src/Components/Menu/Menu.js
+++ b/src/Components/Menu/Menu.js
@@ -236,6 +236,7 @@ class Menu extends Component {
           noBackDrop={noBackDrop}
           transparent>
           <Animated.View
+            useNativeDriver={false}
             style={[styles.menuContainer, menuContainerStyle, modalMenuStyle]}>
             <View
               style={[
diff --git a/src/Components/Menu/ModalMenu/index.native.js b/src/Components/Menu/ModalMenu/index.native.js
index 7f672fa..79dd00e 100644
--- a/src/Components/Menu/ModalMenu/index.native.js
+++ b/src/Components/Menu/ModalMenu/index.native.js
@@ -52,6 +52,7 @@ class Modal extends Component {
         <View style={[styles.container, containerStyle]}>
           <TouchableWithoutFeedback onPress={onBackdropPress}>
             <Animated.View
+              useNativeDriver={false}
               style={{
                 width: deviceWidth,
                 height: deviceHeight,
diff --git a/src/Components/Menu/ModalMenu/index.web.js b/src/Components/Menu/ModalMenu/index.web.js
index 1a0a50a..707370e 100644
--- a/src/Components/Menu/ModalMenu/index.web.js
+++ b/src/Components/Menu/ModalMenu/index.web.js
@@ -260,6 +260,7 @@ export default class Modal extends Component {
     return (
       <ModalPortal visible={visible}>
         <Animated.View
+          useNativeDriver={false}
           onLayout={onLayout}
           aria-modal="true"
           style={[
diff --git a/src/Components/Modal/Modal.android.js b/src/Components/Modal/Modal.android.js
index caded1c..b3ad52c 100644
--- a/src/Components/Modal/Modal.android.js
+++ b/src/Components/Modal/Modal.android.js
@@ -116,6 +116,7 @@ class Modal extends Component {
         <View style={[styles.container, containerStyle]}>
           <TouchableWithoutFeedback onPress={onTouchOutside}>
             <Animated.View
+              useNativeDriver={false}
               style={{
                 width: deviceWidth,
                 height: deviceHeight,
@@ -127,6 +128,7 @@ class Modal extends Component {
             />
           </TouchableWithoutFeedback>
           <Animated.View
+            useNativeDriver={false}
             style={{
               opacity: opacityAnimation,
               transform: [{ scale: scaleAnimation }],
diff --git a/src/Components/Modal/Modal.ios.js b/src/Components/Modal/Modal.ios.js
index caded1c..b3ad52c 100644
--- a/src/Components/Modal/Modal.ios.js
+++ b/src/Components/Modal/Modal.ios.js
@@ -116,6 +116,7 @@ class Modal extends Component {
         <View style={[styles.container, containerStyle]}>
           <TouchableWithoutFeedback onPress={onTouchOutside}>
             <Animated.View
+              useNativeDriver={false}
               style={{
                 width: deviceWidth,
                 height: deviceHeight,
@@ -127,6 +128,7 @@ class Modal extends Component {
             />
           </TouchableWithoutFeedback>
           <Animated.View
+            useNativeDriver={false}
             style={{
               opacity: opacityAnimation,
               transform: [{ scale: scaleAnimation }],
diff --git a/src/Components/Modal/Modal.web.js b/src/Components/Modal/Modal.web.js
index a4ca2f5..7270ebc 100644
--- a/src/Components/Modal/Modal.web.js
+++ b/src/Components/Modal/Modal.web.js
@@ -119,6 +119,7 @@ class Modal extends Component {
         <View style={[styles.container, containerStyle]}>
           <TouchableWithoutFeedback onPress={onTouchOutside}>
             <Animated.View
+              useNativeDriver={false}
               style={{
                 width: deviceWidth,
                 height: deviceHeight,
@@ -130,6 +131,7 @@ class Modal extends Component {
             />
           </TouchableWithoutFeedback>
           <Animated.View
+            useNativeDriver={false}
             style={{
               opacity: opacityAnimation,
               transform: [{ scale: scaleAnimation }],
diff --git a/src/Components/Paper/Paper.js b/src/Components/Paper/Paper.js
index 2ecd207..4ef70fb 100644
--- a/src/Components/Paper/Paper.js
+++ b/src/Components/Paper/Paper.js
@@ -33,6 +33,7 @@ class Paper extends Component {
 
     return (
       <Animated.View
+        useNativeDriver={false}
         style={[theme.paper, shadows, { borderRadius }, style]}
         testID={testID}
         {...props}>
diff --git a/src/Components/Progress/ProgressBar/ProgressBar.js b/src/Components/Progress/ProgressBar/ProgressBar.js
index dfebb4f..db385f9 100644
--- a/src/Components/Progress/ProgressBar/ProgressBar.js
+++ b/src/Components/Progress/ProgressBar/ProgressBar.js
@@ -160,6 +160,7 @@ class ProgressBar extends PureComponent {
 
     return (
       <Animated.View
+        useNativeDriver={false}
         onLayout={this.onTrackLayout}
         style={[
           styles.track,
@@ -173,6 +174,7 @@ class ProgressBar extends PureComponent {
         ]}
         testID={testID}>
         <Animated.View
+          useNativeDriver={false}
           style={[
             styles.indicator,
             {
diff --git a/src/Components/Progress/ProgressCircle/ProgressCircle.js b/src/Components/Progress/ProgressCircle/ProgressCircle.js
index b927bec..621b8ee 100644
--- a/src/Components/Progress/ProgressCircle/ProgressCircle.js
+++ b/src/Components/Progress/ProgressCircle/ProgressCircle.js
@@ -178,11 +178,17 @@ class ProgressCircle extends PureComponent {
 
     return (
       <View style={style} testID={testID}>
-        <Animated.View style={layerStyle}>
-          <Animated.View style={containerStyle} collapsable={false}>
-            <Animated.View style={viewportStyle}>
-              <Animated.View style={containerStyle} collapsable={false}>
-                <Animated.View style={lineStyle} />
+        <Animated.View style={layerStyle} useNativeDriver={false}>
+          <Animated.View
+            style={containerStyle}
+            collapsable={false}
+            useNativeDriver={false}>
+            <Animated.View style={viewportStyle} useNativeDriver={false}>
+              <Animated.View
+                style={containerStyle}
+                collapsable={false}
+                useNativeDriver={false}>
+                <Animated.View style={lineStyle} useNativeDriver={false} />
               </Animated.View>
             </Animated.View>
           </Animated.View>
diff --git a/src/Components/Progress/ProgressCircle/ProgressCircleDeterminate.js b/src/Components/Progress/ProgressCircle/ProgressCircleDeterminate.js
index 2a9250d..b14452d 100644
--- a/src/Components/Progress/ProgressCircle/ProgressCircleDeterminate.js
+++ b/src/Components/Progress/ProgressCircle/ProgressCircleDeterminate.js
@@ -118,6 +118,7 @@ class ProgressCircleDeterminate extends Component {
           { transform: [{ scaleX: isFlipped ? -1 : 1 }] },
         ]}>
         <Animated.View
+          useNativeDriver={false}
           style={{
             width: size,
             height: size,
diff --git a/src/Components/RadioButton/RadioButton.js b/src/Components/RadioButton/RadioButton.js
index 110e1ae..b488b6e 100644
--- a/src/Components/RadioButton/RadioButton.js
+++ b/src/Components/RadioButton/RadioButton.js
@@ -82,6 +82,7 @@ class RadioButton extends Component {
           rippleCentered={true}
           disabled={disabled}>
           <Animated.View
+            useNativeDriver={false}
             style={[
               styles.radio,
               {
@@ -92,6 +93,7 @@ class RadioButton extends Component {
             ]}>
             {checked ? (
               <Animated.View
+                useNativeDriver={false}
                 style={[
                   styles.radioDot,
                   { backgroundColor: radioButtonColorApplied },
diff --git a/src/Components/Ripple/Ripple.js b/src/Components/Ripple/Ripple.js
index 46a3854..44fd3f5 100644
--- a/src/Components/Ripple/Ripple.js
+++ b/src/Components/Ripple/Ripple.js
@@ -247,7 +247,13 @@ export default class Ripple extends PureComponent {
         : rippleOpacity,
     };
 
-    return <Animated.View style={[styles.ripple, rippleStyle]} key={unique} />;
+    return (
+      <Animated.View
+        style={[styles.ripple, rippleStyle]}
+        key={unique}
+        useNativeDriver={false}
+      />
+    );
   }
 
   render() {
@@ -297,7 +303,7 @@ export default class Ripple extends PureComponent {
         {...touchableProps}
         {...panResponder}
         testID={testID}>
-        <Animated.View {...props}>
+        <Animated.View useNativeDriver={false} {...props}>
           {children}
           <View style={[styles.container, containerStyle]} pointerEvents="none">
             {ripples.map(this.renderRipple)}
diff --git a/src/Components/SheetBottom/SheetBottom.native.js b/src/Components/SheetBottom/SheetBottom.native.js
index 3e5c05a..3f3af62 100644
--- a/src/Components/SheetBottom/SheetBottom.native.js
+++ b/src/Components/SheetBottom/SheetBottom.native.js
@@ -200,6 +200,7 @@ class SheetBottom extends Component {
         />
 
         <Animated.View
+          useNativeDriver={false}
           {...this.panResponder.panHandlers}
           style={[
             styles.container,
diff --git a/src/Components/SheetBottom/SheetBottom.web.js b/src/Components/SheetBottom/SheetBottom.web.js
index cb27488..26852aa 100644
--- a/src/Components/SheetBottom/SheetBottom.web.js
+++ b/src/Components/SheetBottom/SheetBottom.web.js
@@ -209,6 +209,7 @@ class SheetBottom extends Component {
         />
 
         <Animated.View
+          useNativeDriver={false}
           {...this.panResponder.panHandlers}
           style={[
             styles.container,
diff --git a/src/Components/SheetSide/SheetSide.android.js b/src/Components/SheetSide/SheetSide.android.js
index d85295f..45c8583 100644
--- a/src/Components/SheetSide/SheetSide.android.js
+++ b/src/Components/SheetSide/SheetSide.android.js
@@ -229,6 +229,7 @@ class SheetSide extends Component {
         />
 
         <Animated.View
+          useNativeDriver={false}
           {...this.panResponder.panHandlers}
           style={[
             styles.container,
diff --git a/src/Components/SheetSide/SheetSide.ios.js b/src/Components/SheetSide/SheetSide.ios.js
index d85295f..45c8583 100644
--- a/src/Components/SheetSide/SheetSide.ios.js
+++ b/src/Components/SheetSide/SheetSide.ios.js
@@ -229,6 +229,7 @@ class SheetSide extends Component {
         />
 
         <Animated.View
+          useNativeDriver={false}
           {...this.panResponder.panHandlers}
           style={[
             styles.container,
diff --git a/src/Components/SheetSide/SheetSide.web.js b/src/Components/SheetSide/SheetSide.web.js
index a2be477..5becd5b 100644
--- a/src/Components/SheetSide/SheetSide.web.js
+++ b/src/Components/SheetSide/SheetSide.web.js
@@ -240,6 +240,7 @@ class SheetSide extends Component {
         />
 
         <Animated.View
+          useNativeDriver={false}
           {...this.panResponder.panHandlers}
           style={[
             styles.container,
diff --git a/src/Components/SwipeNav/SwipeNav.js b/src/Components/SwipeNav/SwipeNav.js
index bc023fe..fcaac42 100644
--- a/src/Components/SwipeNav/SwipeNav.js
+++ b/src/Components/SwipeNav/SwipeNav.js
@@ -107,6 +107,7 @@ class SwipeNav extends Component {
     } = this.props;
     return (
       <Animated.ScrollView
+        useNativeDriver={false}
         scrollEventThrottle={16}
         {...scrollViewProps}
         onScroll={this.onScroll}
@@ -147,6 +148,7 @@ class SwipeNav extends Component {
 
     return (
       <Animated.View
+        useNativeDriver={false}
         style={[
           styles.headerContainer,
           headerContainerStyle,
@@ -165,6 +167,7 @@ class SwipeNav extends Component {
 
     return (
       <Animated.View
+        useNativeDriver={false}
         style={[
           styles.footerContainer,
           footerContainerStyle,
diff --git a/src/Components/Switch/Switch.js b/src/Components/Switch/Switch.js
index a075c5d..65a13c1 100644
--- a/src/Components/Switch/Switch.js
+++ b/src/Components/Switch/Switch.js
@@ -141,6 +141,7 @@ class Switch extends Component {
       <View style={[styles.container, style]} testID={testID} {...rest}>
         {labelPos == 'left' && label ? this._renderLabel() : null}
         <Animated.View
+          useNativeDriver={false}
           style={[
             styles.track,
             {
@@ -163,6 +164,7 @@ class Switch extends Component {
             ]}
             onPress={onPress}>
             <Animated.View
+              useNativeDriver={false}
               style={[
                 styles.thumb,
                 {
diff --git a/src/Components/Tabs/Underline/Underline.js b/src/Components/Tabs/Underline/Underline.js
index 14e5a38..e26ebff 100644
--- a/src/Components/Tabs/Underline/Underline.js
+++ b/src/Components/Tabs/Underline/Underline.js
@@ -20,6 +20,7 @@ class Underline extends Component {
 
     return (
       <Animated.View
+        useNativeDriver={false}
         style={[
           styles.underline,
           {
diff --git a/src/Components/TextField/TextFieldLabel/TextFieldLabel.js b/src/Components/TextField/TextFieldLabel/TextFieldLabel.js
index 22eb530..0151047 100644
--- a/src/Components/TextField/TextFieldLabel/TextFieldLabel.js
+++ b/src/Components/TextField/TextFieldLabel/TextFieldLabel.js
@@ -210,6 +210,7 @@ class TextFieldLabel extends Component {
 
     return (
       <Animated.View
+        useNativeDriver={false}
         style={[
           styles.container,
           {
@@ -219,6 +220,7 @@ class TextFieldLabel extends Component {
         onLayout={e => onLayout && onLayout(e)}
         pointerEvents="none">
         <Animated.Text
+          useNativeDriver={false}
           style={[
             styles.label,
             {
diff --git a/src/Components/TextField/TextFieldUnderline/TextFieldUnderline.js b/src/Components/TextField/TextFieldUnderline/TextFieldUnderline.js
index f3a818e..8d25bb5 100644
--- a/src/Components/TextField/TextFieldUnderline/TextFieldUnderline.js
+++ b/src/Components/TextField/TextFieldUnderline/TextFieldUnderline.js
@@ -63,6 +63,7 @@ class TextFieldUnderline extends Component {
 
     return (
       <Animated.View
+        useNativeDriver={false}
         style={[
           styles.underline,
           {
@@ -71,6 +72,7 @@ class TextFieldUnderline extends Component {
           },
         ]}>
         <Animated.View
+          useNativeDriver={false}
           style={[
             styles.underline,
             {
diff --git a/src/Utils/Hoverable/Hoverable.stories.js b/src/Utils/Hoverable/Hoverable.stories.js
index a636b3f..1c41f42 100644
--- a/src/Utils/Hoverable/Hoverable.stories.js
+++ b/src/Utils/Hoverable/Hoverable.stories.js
@@ -56,6 +56,7 @@ export default storiesOf('Utils|Hoverable', module)
                 }).start();
               }}>
               <Animated.View
+                useNativeDriver={false}
                 style={{
                   width: 200,
                   height: 125,


Test patch:
diff --git a/src/Components/Appbar/__snapshots__/Appbar.test.js.snap b/src/Components/Appbar/__snapshots__/Appbar.test.js.snap
index 8e5027e..2fdbcae 100644
--- a/src/Components/Appbar/__snapshots__/Appbar.test.js.snap
+++ b/src/Components/Appbar/__snapshots__/Appbar.test.js.snap
@@ -24,6 +24,7 @@ exports[`Appbar Renders 1`] = `
       "zIndex": 2,
     }
   }
+  useNativeDriver={false}
 >
   <View
     style={
diff --git a/src/Components/Badge/__snapshots__/Badge.test.js.snap b/src/Components/Badge/__snapshots__/Badge.test.js.snap
index 82594e6..2533092 100644
--- a/src/Components/Badge/__snapshots__/Badge.test.js.snap
+++ b/src/Components/Badge/__snapshots__/Badge.test.js.snap
@@ -43,6 +43,7 @@ exports[`Badge Renders 1`] = `
         "width": 16,
       }
     }
+    useNativeDriver={false}
     visible={true}
   >
     <Text
diff --git a/src/Components/Card/__snapshots__/Card.test.js.snap b/src/Components/Card/__snapshots__/Card.test.js.snap
index 7d065db..82828fc 100644
--- a/src/Components/Card/__snapshots__/Card.test.js.snap
+++ b/src/Components/Card/__snapshots__/Card.test.js.snap
@@ -17,5 +17,6 @@ exports[`Card Renders 1`] = `
       "shadowRadius": 1,
     }
   }
+  useNativeDriver={false}
 />
 `;
diff --git a/src/Components/Chip/__snapshots__/Chip.test.js.snap b/src/Components/Chip/__snapshots__/Chip.test.js.snap
index 4e9f680..56b1345 100644
--- a/src/Components/Chip/__snapshots__/Chip.test.js.snap
+++ b/src/Components/Chip/__snapshots__/Chip.test.js.snap
@@ -21,6 +21,7 @@ exports[`Chip Renders 1`] = `
       "shadowRadius": 1,
     }
   }
+  useNativeDriver={false}
 >
   <View
     accessible={true}
@@ -48,6 +49,7 @@ exports[`Chip Renders 1`] = `
       }
     }
     testID="mb-ripple"
+    useNativeDriver={false}
   >
     <View
       style={
diff --git a/src/Components/Drawer/DrawerItem/__snapshots__/DrawerItem.test.js.snap b/src/Components/Drawer/DrawerItem/__snapshots__/DrawerItem.test.js.snap
index 5093aae..79f509a 100644
--- a/src/Components/Drawer/DrawerItem/__snapshots__/DrawerItem.test.js.snap
+++ b/src/Components/Drawer/DrawerItem/__snapshots__/DrawerItem.test.js.snap
@@ -31,6 +31,7 @@ exports[`DrawerItem Renders 1`] = `
     }
   }
   testID="mb-ripple"
+  useNativeDriver={false}
 >
   <Text
     style={
diff --git a/src/Components/Drawer/__snapshots__/Drawer.test.js.snap b/src/Components/Drawer/__snapshots__/Drawer.test.js.snap
index 575f489..365b07a 100644
--- a/src/Components/Drawer/__snapshots__/Drawer.test.js.snap
+++ b/src/Components/Drawer/__snapshots__/Drawer.test.js.snap
@@ -44,6 +44,7 @@ exports[`Drawer Renders 1`] = `
         "zIndex": 100,
       }
     }
+    useNativeDriver={false}
   />
   <View
     style={
@@ -58,6 +59,7 @@ exports[`Drawer Renders 1`] = `
         "zIndex": 0,
       }
     }
+    useNativeDriver={false}
   >
     <View
       accessible={true}
diff --git a/src/Components/DrawerBottom/__snapshots__/DrawerBottom.test.js.snap b/src/Components/DrawerBottom/__snapshots__/DrawerBottom.test.js.snap
index 0cfa8d3..03da7db 100644
--- a/src/Components/DrawerBottom/__snapshots__/DrawerBottom.test.js.snap
+++ b/src/Components/DrawerBottom/__snapshots__/DrawerBottom.test.js.snap
@@ -75,6 +75,7 @@ exports[`DrawerBottom Renders 1`] = `
           "zIndex": 1000,
         }
       }
+      useNativeDriver={false}
     >
       <RCTSafeAreaView
         emulateUnlessSupported={true}
diff --git a/src/Components/List/__snapshots__/List.test.js.snap b/src/Components/List/__snapshots__/List.test.js.snap
index 8d9cfd6..35bd2ec 100644
--- a/src/Components/List/__snapshots__/List.test.js.snap
+++ b/src/Components/List/__snapshots__/List.test.js.snap
@@ -15,5 +15,6 @@ exports[`List Renders 1`] = `
       "shadowRadius": 1,
     }
   }
+  useNativeDriver={false}
 />
 `;
diff --git a/src/Components/Menu/MenuItem/__snapshots__/MenuItem.test.js.snap b/src/Components/Menu/MenuItem/__snapshots__/MenuItem.test.js.snap
index 0d489a6..dd37844 100644
--- a/src/Components/Menu/MenuItem/__snapshots__/MenuItem.test.js.snap
+++ b/src/Components/Menu/MenuItem/__snapshots__/MenuItem.test.js.snap
@@ -44,6 +44,7 @@ exports[`MenuItem Renders 1`] = `
       }
     }
     testID="mb-ripple"
+    useNativeDriver={false}
   >
     <Text
       ellipsizeMode="clip"
diff --git a/src/Components/Paper/__snapshots__/Paper.test.js.snap b/src/Components/Paper/__snapshots__/Paper.test.js.snap
index 41642fd..f4067d2 100644
--- a/src/Components/Paper/__snapshots__/Paper.test.js.snap
+++ b/src/Components/Paper/__snapshots__/Paper.test.js.snap
@@ -15,5 +15,6 @@ exports[`Paper Renders 1`] = `
       "shadowRadius": 2.62,
     }
   }
+  useNativeDriver={false}
 />
 `;
diff --git a/src/Components/Progress/ProgressCircle/__snapshots__/ProgressCircle.test.js.snap b/src/Components/Progress/ProgressCircle/__snapshots__/ProgressCircle.test.js.snap
index 8ff21f3..02075ba 100644
--- a/src/Components/Progress/ProgressCircle/__snapshots__/ProgressCircle.test.js.snap
+++ b/src/Components/Progress/ProgressCircle/__snapshots__/ProgressCircle.test.js.snap
@@ -14,6 +14,7 @@ exports[`ProgressCircle Renders 1`] = `
         "width": 48,
       }
     }
+    useNativeDriver={false}
   >
     <View
       collapsable={false}
@@ -24,6 +25,7 @@ exports[`ProgressCircle Renders 1`] = `
           "width": 48,
         }
       }
+      useNativeDriver={false}
     >
       <View
         style={
@@ -37,6 +39,7 @@ exports[`ProgressCircle Renders 1`] = `
             "width": 48,
           }
         }
+        useNativeDriver={false}
       >
         <View
           collapsable={false}
@@ -47,6 +50,7 @@ exports[`ProgressCircle Renders 1`] = `
               "width": 48,
             }
           }
+          useNativeDriver={false}
         >
           <View
             style={
@@ -58,6 +62,7 @@ exports[`ProgressCircle Renders 1`] = `
                 "width": 48,
               }
             }
+            useNativeDriver={false}
           />
         </View>
       </View>
diff --git a/src/Components/RadioButton/__snapshots__/RadioButton.test.js.snap b/src/Components/RadioButton/__snapshots__/RadioButton.test.js.snap
index dc96553..9d1b865 100644
--- a/src/Components/RadioButton/__snapshots__/RadioButton.test.js.snap
+++ b/src/Components/RadioButton/__snapshots__/RadioButton.test.js.snap
@@ -40,6 +40,7 @@ exports[`RadioButton Renders 1`] = `
       }
     }
     testID="mb-ripple"
+    useNativeDriver={false}
   >
     <View
       style={
@@ -54,6 +55,7 @@ exports[`RadioButton Renders 1`] = `
           "width": 20,
         }
       }
+      useNativeDriver={false}
     />
     <View
       pointerEvents="none"
diff --git a/src/Components/Ripple/__snapshots__/Ripple.test.js.snap b/src/Components/Ripple/__snapshots__/Ripple.test.js.snap
index 1ff87a2..3cedd2a 100644
--- a/src/Components/Ripple/__snapshots__/Ripple.test.js.snap
+++ b/src/Components/Ripple/__snapshots__/Ripple.test.js.snap
@@ -20,6 +20,7 @@ exports[`Ripple Renders 1`] = `
   rippleSequential={false}
   rippleSize={0}
   testID="mb-ripple"
+  useNativeDriver={false}
 >
   <View
     pointerEvents="none"
diff --git a/src/Components/SheetBottom/__snapshots__/SheetBottom.test.js.snap b/src/Components/SheetBottom/__snapshots__/SheetBottom.test.js.snap
index 9c690cc..6937c3b 100644
--- a/src/Components/SheetBottom/__snapshots__/SheetBottom.test.js.snap
+++ b/src/Components/SheetBottom/__snapshots__/SheetBottom.test.js.snap
@@ -74,6 +74,7 @@ exports[`SheetBottom Renders 1`] = `
           },
         ]
       }
+      useNativeDriver={false}
     >
       <SafeAreaView
         onLayout={[Function]}
diff --git a/src/Components/SheetSide/__snapshots__/SheetSide.test.js.snap b/src/Components/SheetSide/__snapshots__/SheetSide.test.js.snap
index d4003c3..2b9ee81 100644
--- a/src/Components/SheetSide/__snapshots__/SheetSide.test.js.snap
+++ b/src/Components/SheetSide/__snapshots__/SheetSide.test.js.snap
@@ -67,6 +67,7 @@ exports[`SheetSide Renders 1`] = `
           },
         ]
       }
+      useNativeDriver={false}
     >
       <View
         onLayout={[Function]}
diff --git a/src/Components/TextField/TextFieldFilled/__snapshots__/TextFieldFilled.test.js.snap b/src/Components/TextField/TextFieldFilled/__snapshots__/TextFieldFilled.test.js.snap
index f68efa9..e168147 100644
--- a/src/Components/TextField/TextFieldFilled/__snapshots__/TextFieldFilled.test.js.snap
+++ b/src/Components/TextField/TextFieldFilled/__snapshots__/TextFieldFilled.test.js.snap
@@ -265,6 +265,7 @@ exports[`TextFieldFilled Renders 1`] = `
         ],
       }
     }
+    useNativeDriver={false}
   >
     <View
       style={
@@ -286,6 +287,7 @@ exports[`TextFieldFilled Renders 1`] = `
           ],
         }
       }
+      useNativeDriver={false}
     />
   </View>
   <Text
diff --git a/src/Components/TextField/TextFieldFlat/__snapshots__/TextFieldFlat.test.js.snap b/src/Components/TextField/TextFieldFlat/__snapshots__/TextFieldFlat.test.js.snap
index 261c67f..1f2726a 100644
--- a/src/Components/TextField/TextFieldFlat/__snapshots__/TextFieldFlat.test.js.snap
+++ b/src/Components/TextField/TextFieldFlat/__snapshots__/TextFieldFlat.test.js.snap
@@ -264,6 +264,7 @@ exports[`TextFieldFlat Renders 1`] = `
         ],
       }
     }
+    useNativeDriver={false}
   >
     <View
       style={
@@ -285,6 +286,7 @@ exports[`TextFieldFlat Renders 1`] = `
           ],
         }
       }
+      useNativeDriver={false}
     />
   </View>
   <Text
diff --git a/src/Components/TextField/TextFieldLabel/__snapshots__/TextFieldLabel.test.js.snap b/src/Components/TextField/TextFieldLabel/__snapshots__/TextFieldLabel.test.js.snap
index 8f49992..b56b76b 100644
--- a/src/Components/TextField/TextFieldLabel/__snapshots__/TextFieldLabel.test.js.snap
+++ b/src/Components/TextField/TextFieldLabel/__snapshots__/TextFieldLabel.test.js.snap
@@ -11,6 +11,7 @@ exports[`TextFieldLabel Renders 1`] = `
       "zIndex": 10,
     }
   }
+  useNativeDriver={false}
 >
   <Text
     style={
@@ -29,6 +30,7 @@ exports[`TextFieldLabel Renders 1`] = `
         ],
       }
     }
+    useNativeDriver={false}
   />
 </View>
 `;
diff --git a/src/Components/TextField/TextFieldUnderline/__snapshots__/TextFieldUnderline.test.js.snap b/src/Components/TextField/TextFieldUnderline/__snapshots__/TextFieldUnderline.test.js.snap
index 3e9daf3..4484975 100644
--- a/src/Components/TextField/TextFieldUnderline/__snapshots__/TextFieldUnderline.test.js.snap
+++ b/src/Components/TextField/TextFieldUnderline/__snapshots__/TextFieldUnderline.test.js.snap
@@ -17,6 +17,7 @@ exports[`TextFieldUnderline Renders 1`] = `
       ],
     }
   }
+  useNativeDriver={false}
 >
   <View
     style={
@@ -38,6 +39,7 @@ exports[`TextFieldUnderline Renders 1`] = `
         ],
       }
     }
+    useNativeDriver={false}
   />
 </View>
 `;