Repository: codypearce/material-bread
Pull request #385 (2020-05-19 13:20:05)

Add new prop underlineHeight. useNativeDriver 2nd round
This PR adds a new prop to let the user customize the height of the underline in Tabs.
I'm also adding more `useNativeDriver` to remove warnings.


Patch:
diff --git a/docs/src/content/components/tabs/propData.js b/docs/src/content/components/tabs/propData.js
index f0fc07e..2e5050b 100644
--- a/docs/src/content/components/tabs/propData.js
+++ b/docs/src/content/components/tabs/propData.js
@@ -23,6 +23,7 @@ const propData = [
   ['selectedIndex', 'Index of currently active Item', 'number', ''],
   ['style', 'Styles root element', 'object', ''],
   ['underlineColor', 'Color for underline', 'string', 'theme.primary.main'],
+  ['underlineHeight', 'Height for underline', 'number', '2'],
 ];
 
 export default createTableData(propData);
diff --git a/src/Components/Backdrop/BackLayer/BackLayer.js b/src/Components/Backdrop/BackLayer/BackLayer.js
index d010a9f..d858203 100644
--- a/src/Components/Backdrop/BackLayer/BackLayer.js
+++ b/src/Components/Backdrop/BackLayer/BackLayer.js
@@ -31,7 +31,7 @@ class BackLayer extends Component {
     return (
       <Animated.View
         style={[styles.backLayer, { opacity }]}
-        useNativeDriver={false}>
+        useNativeDriver={true}>
         {backLayerConcealed}
       </Animated.View>
     );
@@ -51,7 +51,7 @@ class BackLayer extends Component {
     return (
       <Animated.View
         style={[styles.backLayer, { opacity }]}
-        useNativeDriver={false}>
+        useNativeDriver={true}>
         {this.renderBackElements()}
       </Animated.View>
     );
@@ -66,7 +66,7 @@ class BackLayer extends Component {
     });
 
     return (
-      <Animated.View style={{ flex: 1, opacity }} useNativeDriver={false}>
+      <Animated.View style={{ flex: 1, opacity }} useNativeDriver={true}>
         {backLayerRevealed}
       </Animated.View>
     );
diff --git a/src/Components/Backdrop/Backdrop.js b/src/Components/Backdrop/Backdrop.js
index 351fb4b..ceac424 100644
--- a/src/Components/Backdrop/Backdrop.js
+++ b/src/Components/Backdrop/Backdrop.js
@@ -59,6 +59,7 @@ class Backdrop extends PureComponent {
       toValue: backConcealed ? 1 : 0,
       duration: 196,
       easing: Easing.ease,
+      useNativeDriver: true,
     }).start(() => {
       if (backConcealed) {
         this.setState({ backConcealed: false });
diff --git a/src/Components/Backdrop/FrontLayer/FrontLayer.js b/src/Components/Backdrop/FrontLayer/FrontLayer.js
index 40951b5..28bf00c 100644
--- a/src/Components/Backdrop/FrontLayer/FrontLayer.js
+++ b/src/Components/Backdrop/FrontLayer/FrontLayer.js
@@ -72,7 +72,7 @@ class FrontLayer extends PureComponent {
 
     return (
       <Animated.View
-        useNativeDriver={false}
+        useNativeDriver={true}
         style={[
           styles.frontLayerContainer,
           frontLayerStyle,
diff --git a/src/Components/Backdrop/FrontLayerScrim/FrontLayerScrim.js b/src/Components/Backdrop/FrontLayerScrim/FrontLayerScrim.js
index 0051972..d787574 100644
--- a/src/Components/Backdrop/FrontLayerScrim/FrontLayerScrim.js
+++ b/src/Components/Backdrop/FrontLayerScrim/FrontLayerScrim.js
@@ -24,7 +24,7 @@ class FrontLayerScrim extends Component {
       <TouchableWithoutFeedback onPress={() => toggleLayout()}>
         <Animated.View
           style={[styles.scrimLayer, { opacity: animate }]}
-          useNativeDriver={false}>
+          useNativeDriver={true}>
           <Icon
             name="expand-less"
             size={24}
diff --git a/src/Components/Backdrop/HeaderButton/HeaderButton.js b/src/Components/Backdrop/HeaderButton/HeaderButton.js
index a95a8af..9d2f291 100644
--- a/src/Components/Backdrop/HeaderButton/HeaderButton.js
+++ b/src/Components/Backdrop/HeaderButton/HeaderButton.js
@@ -25,11 +25,13 @@ class HeaderButton extends Component {
       toValue: 0.5,
       duration: 94,
       easing: Easing.linear,
+      useNativeDriver: true,
     }).start(() => {
       Animated.timing(this.spinValue, {
         toValue: backConcealed ? 1 : 0,
         duration: 94,
         easing: Easing.linear,
+        useNativeDriver: true,
       }).start();
     });
   }
@@ -48,7 +50,7 @@ class HeaderButton extends Component {
     ];
 
     return (
-      <Animated.View style={style} useNativeDriver={false}>
+      <Animated.View style={style} useNativeDriver={true}>
         <Ripple
           rippleContainerBorderRadius={100}
           onPress={() => this._handleSpin()}
diff --git a/src/Components/Badge/Badge.js b/src/Components/Badge/Badge.js
index 15bfdad..d33332b 100644
--- a/src/Components/Badge/Badge.js
+++ b/src/Components/Badge/Badge.js
@@ -95,6 +95,7 @@ class Badge extends Component {
     Animated.spring(scale, {
       toValue: scaleValue,
       speed: 7,
+      useNativeDriver: true,
     }).start();
   }
 
@@ -134,7 +135,7 @@ class Badge extends Component {
 
     return (
       <Animated.View
-        useNativeDriver={false}
+        useNativeDriver={true}
         style={[
           {
             height: size,
diff --git a/src/Components/Banner/Banner.js b/src/Components/Banner/Banner.js
index f47cf17..2cabf5a 100644
--- a/src/Components/Banner/Banner.js
+++ b/src/Components/Banner/Banner.js
@@ -73,6 +73,7 @@ class Banner extends Component {
     Animated.parallel([
       Animated.spring(this.state.height, {
         toValue: newHeight,
+        useNativeDriver: true,
       }),
     ]).start();
   }
@@ -209,7 +210,7 @@ class Banner extends Component {
 
     return (
       <Animated.View
-        useNativeDriver={false}
+        useNativeDriver={true}
         style={[
           styles.container,
           {
diff --git a/src/Components/BottomNavigation/BottomNavigationItem/BottomNavigationItem.js b/src/Components/BottomNavigation/BottomNavigationItem/BottomNavigationItem.js
index 1205485..86588cf 100644
--- a/src/Components/BottomNavigation/BottomNavigationItem/BottomNavigationItem.js
+++ b/src/Components/BottomNavigation/BottomNavigationItem/BottomNavigationItem.js
@@ -60,6 +60,7 @@ class BottomNavigationItem extends Component {
       Animated.timing(scaleText, {
         toValue: scale,
         duration: 150,
+        useNativeDriver: true,
       }),
     ]).start();
   }
@@ -84,7 +85,7 @@ class BottomNavigationItem extends Component {
     const { label } = this.props;
     return (
       <Animated.Text
-        useNativeDriver={false}
+        useNativeDriver={true}
         style={{
           color: color,
           fontSize: this.state.scaleText,
diff --git a/src/Components/Button/ContainedButton/ContainedButton.js b/src/Components/Button/ContainedButton/ContainedButton.js
index 57c9ef8..8ba9520 100644
--- a/src/Components/Button/ContainedButton/ContainedButton.js
+++ b/src/Components/Button/ContainedButton/ContainedButton.js
@@ -35,6 +35,7 @@ class ContainedButton extends Component {
     if (Platform.OS === 'android') {
       const elevation = active ? 10 : 6;
       Animated.timing(this.state.elevation, {
+        useNativeDriver: true,
         toValue: elevation,
         duration: animationDuration,
       });
@@ -55,18 +56,22 @@ class ContainedButton extends Component {
         Animated.timing(animatedShadowRadius, {
           toValue: shadowRadius,
           duration: animationDuration,
+          useNativeDriver: true,
         }),
         Animated.timing(animatedShadowOpacity, {
           toValue: shadowShadowOpacity,
           duration: animationDuration,
+          useNativeDriver: true,
         }),
         Animated.timing(animatedShadowHeight, {
           toValue: shadowHeight,
           duration: animationDuration,
+          useNativeDriver: true,
         }),
         Animated.timing(animatedShadowWidth, {
           toValue: shadowWidth,
           duration: animationDuration,
+          useNativeDriver: true,
         }),
       ]).start();
     }
@@ -190,7 +195,7 @@ class ContainedButton extends Component {
         style={[containerStyle]}>
         {() => (
           <Animated.View
-            useNativeDriver={false}
+            useNativeDriver={true}
             style={[
               disabled ? {} : this.getShadowStyle(),
               {
diff --git a/src/Components/DataTable/DataTableCell/DataTableCell.js b/src/Components/DataTable/DataTableCell/DataTableCell.js
index d4a600d..5b881f4 100644
--- a/src/Components/DataTable/DataTableCell/DataTableCell.js
+++ b/src/Components/DataTable/DataTableCell/DataTableCell.js
@@ -52,13 +52,14 @@ class TableCell extends Component {
     Animated.timing(this.state.roateIcon, {
       toValue: value,
       duration: 200,
+      useNativeDriver: true,
     }).start();
   }
 
   _renderSortingIcon() {
     return (
       <Animated.View
-        useNativeDriver={false}
+        useNativeDriver={true}
         style={{
           transform: [
             {
diff --git a/src/Components/Drawer/Drawer.js b/src/Components/Drawer/Drawer.js
index 29c1a4c..534ad63 100644
--- a/src/Components/Drawer/Drawer.js
+++ b/src/Components/Drawer/Drawer.js
@@ -119,10 +119,12 @@ class Drawer extends PureComponent {
       Animated.timing(leftOffset, {
         toValue: drawerWidth,
         duration: animationTime,
+        useNativeDriver: true,
       }),
       Animated.timing(backdropFade, {
         toValue: scrimOpacity,
         duration: animationTime,
+        useNativeDriver: true,
       }),
     ]).start();
   };
@@ -135,10 +137,12 @@ class Drawer extends PureComponent {
       Animated.timing(leftOffset, {
         toValue: 0,
         duration: animationTime,
+        useNativeDriver: true,
       }),
       Animated.timing(backdropFade, {
         toValue: 0,
         duration: animationTime,
+        useNativeDriver: true,
       }),
     ]).start();
   };
@@ -174,7 +178,7 @@ class Drawer extends PureComponent {
     if (scrimColor) scrimColorImplemented = scrimColor;
     return (
       <Animated.View
-        useNativeDriver={false}
+        useNativeDriver={true}
         style={[
           styles.container,
           {
@@ -216,7 +220,7 @@ class Drawer extends PureComponent {
         <View style={contentContainerStyle}>
           {appbar ? this._renderAppBar() : null}
           <Animated.View
-            useNativeDriver={false}
+            useNativeDriver={true}
             style={{
               transform: [{ translateX: leftOffset }],
               flex: 1,
@@ -259,7 +263,7 @@ class Drawer extends PureComponent {
     return (
       <Fragment>
         <Animated.View
-          useNativeDriver={false}
+          useNativeDriver={true}
           style={[
             theme.drawer,
             {
diff --git a/src/Components/Fab/Fab.js b/src/Components/Fab/Fab.js
index 4fde266..3cc534a 100644
--- a/src/Components/Fab/Fab.js
+++ b/src/Components/Fab/Fab.js
@@ -69,6 +69,7 @@ export class Fab extends Component {
     Animated.spring(scale, {
       toValue: scaleValue,
       speed: 7,
+      useNativeDriver: true,
     }).start();
   }
 
@@ -146,7 +147,7 @@ export class Fab extends Component {
 
     return (
       <Animated.View
-        useNativeDriver={false}
+        useNativeDriver={true}
         style={[
           {
             transform: [{ scale: scale }],
diff --git a/src/Components/Fab/FabSpeedDial/FabSpeedDial.js b/src/Components/Fab/FabSpeedDial/FabSpeedDial.js
index c35b153..25b1378 100644
--- a/src/Components/Fab/FabSpeedDial/FabSpeedDial.js
+++ b/src/Components/Fab/FabSpeedDial/FabSpeedDial.js
@@ -132,7 +132,7 @@ class FabSpeedDial extends Component {
         {actions.map((item, index) => {
           return (
             <Animated.View
-              useNativeDriver={false}
+              useNativeDriver={true}
               key={index}
               style={{
                 marginTop: 16,
diff --git a/src/Components/List/ListExpand/ListExpand.js b/src/Components/List/ListExpand/ListExpand.js
index e337a30..d753163 100644
--- a/src/Components/List/ListExpand/ListExpand.js
+++ b/src/Components/List/ListExpand/ListExpand.js
@@ -63,6 +63,7 @@ class ListExpand extends Component {
     Animated.timing(menuHeight, {
       toValue: height,
       duration: animationDuration,
+      useNativeDriver: true,
     }).start();
 
     this.setState({
@@ -85,7 +86,7 @@ class ListExpand extends Component {
 
     return (
       <Animated.View
-        useNativeDriver={false}
+        useNativeDriver={true}
         style={{
           height: menuHeight,
           overflow: 'hidden',
diff --git a/src/Components/Menu/Menu.js b/src/Components/Menu/Menu.js
index 8461605..73defdf 100644
--- a/src/Components/Menu/Menu.js
+++ b/src/Components/Menu/Menu.js
@@ -130,16 +130,19 @@ class Menu extends Component {
         toValue: height,
         duration: animationDuration,
         easing,
+        useNativeDriver: true,
       }),
       Animated.timing(this.state.menuWidth, {
         toValue: width,
         duration: animationDuration,
         easing,
+        useNativeDriver: true,
       }),
       Animated.timing(this.state.opacity, {
         toValue: opacity,
         duration: animationDuration,
         easing,
+        useNativeDriver: true,
       }),
     ]).start();
   }
@@ -236,7 +239,7 @@ class Menu extends Component {
           noBackDrop={noBackDrop}
           transparent>
           <Animated.View
-            useNativeDriver={false}
+            useNativeDriver={true}
             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 79dd00e..efa2e0a 100644
--- a/src/Components/Menu/ModalMenu/index.native.js
+++ b/src/Components/Menu/ModalMenu/index.native.js
@@ -52,7 +52,7 @@ class Modal extends Component {
         <View style={[styles.container, containerStyle]}>
           <TouchableWithoutFeedback onPress={onBackdropPress}>
             <Animated.View
-              useNativeDriver={false}
+              useNativeDriver={true}
               style={{
                 width: deviceWidth,
                 height: deviceHeight,
diff --git a/src/Components/Menu/ModalMenu/index.web.js b/src/Components/Menu/ModalMenu/index.web.js
index 707370e..911fa88 100644
--- a/src/Components/Menu/ModalMenu/index.web.js
+++ b/src/Components/Menu/ModalMenu/index.web.js
@@ -118,6 +118,7 @@ export default class Modal extends Component {
     const animationFade = Animated.timing(this.state.opacityFade, {
       toValue: 1,
       duration: 300,
+      useNativeDriver: true,
     });
 
     this.setState(
@@ -142,6 +143,7 @@ export default class Modal extends Component {
     const animationFade = Animated.timing(this.state.opacityFade, {
       toValue: 0,
       duration: 300,
+      useNativeDriver: true,
     });
 
     this.setState(
@@ -174,6 +176,7 @@ export default class Modal extends Component {
       toValue: 1,
       easing: Easing.out(Easing.poly(4)),
       duration: 300,
+      useNativeDriver: true,
     });
 
     this.setState(
@@ -199,6 +202,7 @@ export default class Modal extends Component {
       toValue: 0,
       easing: Easing.in(Easing.poly(4)),
       duration: 300,
+      useNativeDriver: true,
     });
 
     this.setState(
@@ -260,7 +264,7 @@ export default class Modal extends Component {
     return (
       <ModalPortal visible={visible}>
         <Animated.View
-          useNativeDriver={false}
+          useNativeDriver={true}
           onLayout={onLayout}
           aria-modal="true"
           style={[
diff --git a/src/Components/Modal/Modal.android.js b/src/Components/Modal/Modal.android.js
index b3ad52c..b1bbf24 100644
--- a/src/Components/Modal/Modal.android.js
+++ b/src/Components/Modal/Modal.android.js
@@ -64,10 +64,12 @@ class Modal extends Component {
             Animated.timing(opacityAnimation, {
               toValue: opacity,
               duration: animationDuration + 50,
+              useNativeDriver: true,
             }),
             Animated.timing(scaleAnimation, {
               toValue: scale,
               duration: animationDuration,
+              useNativeDriver: true,
             }),
           ]).start();
         },
@@ -77,10 +79,12 @@ class Modal extends Component {
         Animated.timing(opacityAnimation, {
           toValue: opacity,
           duration: animationDuration,
+          useNativeDriver: true,
         }),
         Animated.timing(scaleAnimation, {
           toValue: scale,
           duration: 400,
+          useNativeDriver: true,
         }),
       ]).start(() => {
         this.setState({
@@ -116,7 +120,7 @@ class Modal extends Component {
         <View style={[styles.container, containerStyle]}>
           <TouchableWithoutFeedback onPress={onTouchOutside}>
             <Animated.View
-              useNativeDriver={false}
+              useNativeDriver={true}
               style={{
                 width: deviceWidth,
                 height: deviceHeight,
@@ -128,7 +132,7 @@ class Modal extends Component {
             />
           </TouchableWithoutFeedback>
           <Animated.View
-            useNativeDriver={false}
+            useNativeDriver={true}
             style={{
               opacity: opacityAnimation,
               transform: [{ scale: scaleAnimation }],
diff --git a/src/Components/Modal/Modal.ios.js b/src/Components/Modal/Modal.ios.js
index b3ad52c..b1bbf24 100644
--- a/src/Components/Modal/Modal.ios.js
+++ b/src/Components/Modal/Modal.ios.js
@@ -64,10 +64,12 @@ class Modal extends Component {
             Animated.timing(opacityAnimation, {
               toValue: opacity,
               duration: animationDuration + 50,
+              useNativeDriver: true,
             }),
             Animated.timing(scaleAnimation, {
               toValue: scale,
               duration: animationDuration,
+              useNativeDriver: true,
             }),
           ]).start();
         },
@@ -77,10 +79,12 @@ class Modal extends Component {
         Animated.timing(opacityAnimation, {
           toValue: opacity,
           duration: animationDuration,
+          useNativeDriver: true,
         }),
         Animated.timing(scaleAnimation, {
           toValue: scale,
           duration: 400,
+          useNativeDriver: true,
         }),
       ]).start(() => {
         this.setState({
@@ -116,7 +120,7 @@ class Modal extends Component {
         <View style={[styles.container, containerStyle]}>
           <TouchableWithoutFeedback onPress={onTouchOutside}>
             <Animated.View
-              useNativeDriver={false}
+              useNativeDriver={true}
               style={{
                 width: deviceWidth,
                 height: deviceHeight,
@@ -128,7 +132,7 @@ class Modal extends Component {
             />
           </TouchableWithoutFeedback>
           <Animated.View
-            useNativeDriver={false}
+            useNativeDriver={true}
             style={{
               opacity: opacityAnimation,
               transform: [{ scale: scaleAnimation }],
diff --git a/src/Components/Modal/Modal.web.js b/src/Components/Modal/Modal.web.js
index 7270ebc..95090d2 100644
--- a/src/Components/Modal/Modal.web.js
+++ b/src/Components/Modal/Modal.web.js
@@ -67,10 +67,12 @@ class Modal extends Component {
             Animated.timing(opacityAnimation, {
               toValue: opacity,
               duration: animationDuration + 50,
+              useNativeDriver: true,
             }),
             Animated.timing(scaleAnimation, {
               toValue: scale,
               duration: animationDuration,
+              useNativeDriver: true,
             }),
           ]).start();
         },
@@ -80,10 +82,12 @@ class Modal extends Component {
         Animated.timing(opacityAnimation, {
           toValue: opacity,
           duration: animationDuration,
+          useNativeDriver: true,
         }),
         Animated.timing(scaleAnimation, {
           toValue: scale,
           duration: 400,
+          useNativeDriver: true,
         }),
       ]).start(() => {
         this.setState({
@@ -119,7 +123,7 @@ class Modal extends Component {
         <View style={[styles.container, containerStyle]}>
           <TouchableWithoutFeedback onPress={onTouchOutside}>
             <Animated.View
-              useNativeDriver={false}
+              useNativeDriver={true}
               style={{
                 width: deviceWidth,
                 height: deviceHeight,
@@ -131,7 +135,7 @@ class Modal extends Component {
             />
           </TouchableWithoutFeedback>
           <Animated.View
-            useNativeDriver={false}
+            useNativeDriver={true}
             style={{
               opacity: opacityAnimation,
               transform: [{ scale: scaleAnimation }],
diff --git a/src/Components/Paper/Paper.js b/src/Components/Paper/Paper.js
index 4ef70fb..019b957 100644
--- a/src/Components/Paper/Paper.js
+++ b/src/Components/Paper/Paper.js
@@ -33,7 +33,7 @@ class Paper extends Component {
 
     return (
       <Animated.View
-        useNativeDriver={false}
+        useNativeDriver={true}
         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 db385f9..4641dc1 100644
--- a/src/Components/Progress/ProgressBar/ProgressBar.js
+++ b/src/Components/Progress/ProgressBar/ProgressBar.js
@@ -69,10 +69,12 @@ class ProgressBar extends PureComponent {
       Animated.timing(trackScaleY, {
         toValue: scale,
         duration: 300,
+        useNativeDriver: true,
       }),
       Animated.timing(trackOpacity, {
         toValue: opacity,
         duration: 300,
+        useNativeDriver: true,
       }),
     ]).start(() => {
       if (determinate) {
@@ -93,6 +95,7 @@ class ProgressBar extends PureComponent {
       Animated.timing(indicatorWidth, {
         toValue: trackWidth * (value / 100),
         duration: animationDuration,
+        useNativeDriver: true,
       }),
     ]).start();
   }
@@ -109,11 +112,13 @@ class ProgressBar extends PureComponent {
           toValue: trackWidth,
           duration: animationDuration,
           animationEasing,
+          useNativeDriver: true,
         }),
         Animated.timing(indicatorScaleX, {
           toValue: 2,
           duration: animationDuration / 4,
           animationEasing,
+          useNativeDriver: true,
         }),
       ]),
 
@@ -160,7 +165,7 @@ class ProgressBar extends PureComponent {
 
     return (
       <Animated.View
-        useNativeDriver={false}
+        useNativeDriver={true}
         onLayout={this.onTrackLayout}
         style={[
           styles.track,
@@ -174,7 +179,7 @@ class ProgressBar extends PureComponent {
         ]}
         testID={testID}>
         <Animated.View
-          useNativeDriver={false}
+          useNativeDriver={true}
           style={[
             styles.indicator,
             {
diff --git a/src/Components/Progress/ProgressCircle/ProgressCircle.js b/src/Components/Progress/ProgressCircle/ProgressCircle.js
index 621b8ee..2c3128f 100644
--- a/src/Components/Progress/ProgressCircle/ProgressCircle.js
+++ b/src/Components/Progress/ProgressCircle/ProgressCircle.js
@@ -178,17 +178,17 @@ class ProgressCircle extends PureComponent {
 
     return (
       <View style={style} testID={testID}>
-        <Animated.View style={layerStyle} useNativeDriver={false}>
+        <Animated.View style={layerStyle} useNativeDriver={true}>
           <Animated.View
             style={containerStyle}
             collapsable={false}
-            useNativeDriver={false}>
-            <Animated.View style={viewportStyle} useNativeDriver={false}>
+            useNativeDriver={true}>
+            <Animated.View style={viewportStyle} useNativeDriver={true}>
               <Animated.View
                 style={containerStyle}
                 collapsable={false}
-                useNativeDriver={false}>
-                <Animated.View style={lineStyle} useNativeDriver={false} />
+                useNativeDriver={true}>
+                <Animated.View style={lineStyle} useNativeDriver={true} />
               </Animated.View>
             </Animated.View>
           </Animated.View>
diff --git a/src/Components/Progress/ProgressCircle/ProgressCircleDeterminate.js b/src/Components/Progress/ProgressCircle/ProgressCircleDeterminate.js
index b14452d..551f07a 100644
--- a/src/Components/Progress/ProgressCircle/ProgressCircleDeterminate.js
+++ b/src/Components/Progress/ProgressCircle/ProgressCircleDeterminate.js
@@ -118,7 +118,7 @@ class ProgressCircleDeterminate extends Component {
           { transform: [{ scaleX: isFlipped ? -1 : 1 }] },
         ]}>
         <Animated.View
-          useNativeDriver={false}
+          useNativeDriver={true}
           style={{
             width: size,
             height: size,
diff --git a/src/Components/RadioButton/RadioButton.js b/src/Components/RadioButton/RadioButton.js
index b488b6e..017476d 100644
--- a/src/Components/RadioButton/RadioButton.js
+++ b/src/Components/RadioButton/RadioButton.js
@@ -82,7 +82,7 @@ class RadioButton extends Component {
           rippleCentered={true}
           disabled={disabled}>
           <Animated.View
-            useNativeDriver={false}
+            useNativeDriver={true}
             style={[
               styles.radio,
               {
@@ -93,7 +93,7 @@ class RadioButton extends Component {
             ]}>
             {checked ? (
               <Animated.View
-                useNativeDriver={false}
+                useNativeDriver={true}
                 style={[
                   styles.radioDot,
                   { backgroundColor: radioButtonColorApplied },
diff --git a/src/Components/Ripple/Ripple.js b/src/Components/Ripple/Ripple.js
index 44fd3f5..63bf87a 100644
--- a/src/Components/Ripple/Ripple.js
+++ b/src/Components/Ripple/Ripple.js
@@ -251,7 +251,7 @@ export default class Ripple extends PureComponent {
       <Animated.View
         style={[styles.ripple, rippleStyle]}
         key={unique}
-        useNativeDriver={false}
+        useNativeDriver={true}
       />
     );
   }
@@ -303,7 +303,7 @@ export default class Ripple extends PureComponent {
         {...touchableProps}
         {...panResponder}
         testID={testID}>
-        <Animated.View useNativeDriver={false} {...props}>
+        <Animated.View useNativeDriver={true} {...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 3f3af62..f3a2078 100644
--- a/src/Components/SheetBottom/SheetBottom.native.js
+++ b/src/Components/SheetBottom/SheetBottom.native.js
@@ -104,6 +104,7 @@ class SheetBottom extends Component {
           return;
         }
         Animated.spring(pan, {
+          useNativeDriver: true,
           toValue: {
             x: 0,
             y: fullHeight - initialHeight - cardVerticalPadding,
@@ -112,6 +113,7 @@ class SheetBottom extends Component {
       });
     } else {
       Animated.timing(pan, {
+        useNativeDriver: true,
         toValue: { x: 0, y: fullHeight },
         duration: duration,
       }).start(() => {
@@ -129,6 +131,7 @@ class SheetBottom extends Component {
       onPanResponderMove: (e, gestureState) => {
         if (gestureState.dy < 80 && gestureState.dy > -40) {
           Animated.timing(pan, {
+            useNativeDriver: true,
             toValue: {
               x: 0,
               y:
@@ -200,7 +203,7 @@ class SheetBottom extends Component {
         />
 
         <Animated.View
-          useNativeDriver={false}
+          useNativeDriver={true}
           {...this.panResponder.panHandlers}
           style={[
             styles.container,
diff --git a/src/Components/SheetBottom/SheetBottom.web.js b/src/Components/SheetBottom/SheetBottom.web.js
index 26852aa..3266b34 100644
--- a/src/Components/SheetBottom/SheetBottom.web.js
+++ b/src/Components/SheetBottom/SheetBottom.web.js
@@ -103,6 +103,7 @@ class SheetBottom extends Component {
           return;
         }
         Animated.spring(pan, {
+          useNativeDriver: true,
           toValue: {
             x: 0,
             y: fullHeight - initialHeight - cardVerticalPadding,
@@ -111,6 +112,7 @@ class SheetBottom extends Component {
       });
     } else {
       Animated.timing(pan, {
+        useNativeDriver: true,
         toValue: { x: 0, y: fullHeight },
         duration: duration,
       }).start(() => {
@@ -128,6 +130,7 @@ class SheetBottom extends Component {
       onPanResponderMove: (e, gestureState) => {
         if (gestureState.dy < 80 && gestureState.dy > -40) {
           Animated.timing(pan, {
+            useNativeDriver: true,
             toValue: {
               x: 0,
               y:
@@ -209,7 +212,7 @@ class SheetBottom extends Component {
         />
 
         <Animated.View
-          useNativeDriver={false}
+          useNativeDriver={true}
           {...this.panResponder.panHandlers}
           style={[
             styles.container,
diff --git a/src/Components/SheetSide/SheetSide.android.js b/src/Components/SheetSide/SheetSide.android.js
index 45c8583..2a85b70 100644
--- a/src/Components/SheetSide/SheetSide.android.js
+++ b/src/Components/SheetSide/SheetSide.android.js
@@ -118,6 +118,7 @@ class SheetSide extends Component {
     if (visible) {
       this.setState({ internalVisible: true }, () => {
         Animated.timing(pan, {
+          useNativeDriver: true,
           toValue: {
             x: openValue,
             y: 0,
@@ -127,6 +128,7 @@ class SheetSide extends Component {
       });
     } else {
       Animated.timing(pan, {
+        useNativeDriver: true,
         toValue: { x: closeValue, y: 0 },
         duration: duration,
       }).start(() => {
@@ -229,7 +231,7 @@ class SheetSide extends Component {
         />
 
         <Animated.View
-          useNativeDriver={false}
+          useNativeDriver={true}
           {...this.panResponder.panHandlers}
           style={[
             styles.container,
diff --git a/src/Components/SheetSide/SheetSide.ios.js b/src/Components/SheetSide/SheetSide.ios.js
index 45c8583..2a85b70 100644
--- a/src/Components/SheetSide/SheetSide.ios.js
+++ b/src/Components/SheetSide/SheetSide.ios.js
@@ -118,6 +118,7 @@ class SheetSide extends Component {
     if (visible) {
       this.setState({ internalVisible: true }, () => {
         Animated.timing(pan, {
+          useNativeDriver: true,
           toValue: {
             x: openValue,
             y: 0,
@@ -127,6 +128,7 @@ class SheetSide extends Component {
       });
     } else {
       Animated.timing(pan, {
+        useNativeDriver: true,
         toValue: { x: closeValue, y: 0 },
         duration: duration,
       }).start(() => {
@@ -229,7 +231,7 @@ class SheetSide extends Component {
         />
 
         <Animated.View
-          useNativeDriver={false}
+          useNativeDriver={true}
           {...this.panResponder.panHandlers}
           style={[
             styles.container,
diff --git a/src/Components/SheetSide/SheetSide.web.js b/src/Components/SheetSide/SheetSide.web.js
index 5becd5b..78b2edc 100644
--- a/src/Components/SheetSide/SheetSide.web.js
+++ b/src/Components/SheetSide/SheetSide.web.js
@@ -116,6 +116,7 @@ class SheetSide extends Component {
     if (visible) {
       this.setState({ internalVisible: true }, () => {
         Animated.timing(pan, {
+          useNativeDriver: true,
           toValue: {
             x: openValue,
             y: 0,
@@ -125,6 +126,7 @@ class SheetSide extends Component {
       });
     } else {
       Animated.timing(pan, {
+        useNativeDriver: true,
         toValue: { x: closeValue, y: 0 },
         duration: duration,
       }).start(() => {
@@ -240,7 +242,7 @@ class SheetSide extends Component {
         />
 
         <Animated.View
-          useNativeDriver={false}
+          useNativeDriver={true}
           {...this.panResponder.panHandlers}
           style={[
             styles.container,
diff --git a/src/Components/Snackbar/Snackbar.js b/src/Components/Snackbar/Snackbar.js
index 16d0e59..c212206 100644
--- a/src/Components/Snackbar/Snackbar.js
+++ b/src/Components/Snackbar/Snackbar.js
@@ -55,11 +55,13 @@ class Snackbar extends Component {
       Animated.timing(scaleAnimation, {
         toValue: 1,
         duration: animationDuration,
+        useNativeDriver: true,
       }),
 
       Animated.timing(opacity, {
         toValue: 1,
         duration: animationDuration,
+        useNativeDriver: true,
       }),
     ]).start();
   }
@@ -72,11 +74,13 @@ class Snackbar extends Component {
       Animated.timing(scaleAnimation, {
         toValue: 0.8,
         duration: animationDuration,
+        useNativeDriver: true,
       }),
 
       Animated.timing(opacity, {
         toValue: 0,
         duration: animationDuration,
+        useNativeDriver: true,
       }),
     ]).start();
   }
diff --git a/src/Components/SwipeNav/SwipeNav.js b/src/Components/SwipeNav/SwipeNav.js
index fcaac42..f71c61c 100644
--- a/src/Components/SwipeNav/SwipeNav.js
+++ b/src/Components/SwipeNav/SwipeNav.js
@@ -73,10 +73,12 @@ class SwipeNav extends Component {
       Animated.timing(headerOffsetY, {
         toValue: newHeaderOffset,
         duration: 100,
+        useNativeDriver: true,
       }),
       Animated.timing(scrollPaddingTop, {
         toValue: newScrollPadding,
         duration: 100,
+        useNativeDriver: true,
       }),
     ]).start();
   }
@@ -89,10 +91,12 @@ class SwipeNav extends Component {
       Animated.timing(footerOffsetY, {
         toValue: newFooterOffset,
         duration: 100,
+        useNativeDriver: true,
       }),
       Animated.timing(scrollPaddingBottom, {
         toValue: newScrollPadding,
         duration: 100,
+        useNativeDriver: true,
       }),
     ]).start();
   }
@@ -107,7 +111,7 @@ class SwipeNav extends Component {
     } = this.props;
     return (
       <Animated.ScrollView
-        useNativeDriver={false}
+        useNativeDriver={true}
         scrollEventThrottle={16}
         {...scrollViewProps}
         onScroll={this.onScroll}
@@ -148,7 +152,7 @@ class SwipeNav extends Component {
 
     return (
       <Animated.View
-        useNativeDriver={false}
+        useNativeDriver={true}
         style={[
           styles.headerContainer,
           headerContainerStyle,
@@ -167,7 +171,7 @@ class SwipeNav extends Component {
 
     return (
       <Animated.View
-        useNativeDriver={false}
+        useNativeDriver={true}
         style={[
           styles.footerContainer,
           footerContainerStyle,
diff --git a/src/Components/Switch/Switch.js b/src/Components/Switch/Switch.js
index 65a13c1..9d90f66 100644
--- a/src/Components/Switch/Switch.js
+++ b/src/Components/Switch/Switch.js
@@ -81,6 +81,7 @@ class Switch extends Component {
       Animated.timing(thumbTranslateX, {
         toValue: I18nManager.isRTL ? -xValue : xValue,
         duration: 300,
+        useNativeDriver: true,
       }),
     ]).start();
   }
@@ -141,7 +142,7 @@ class Switch extends Component {
       <View style={[styles.container, style]} testID={testID} {...rest}>
         {labelPos == 'left' && label ? this._renderLabel() : null}
         <Animated.View
-          useNativeDriver={false}
+          useNativeDriver={true}
           style={[
             styles.track,
             {
@@ -164,7 +165,7 @@ class Switch extends Component {
             ]}
             onPress={onPress}>
             <Animated.View
-              useNativeDriver={false}
+              useNativeDriver={true}
               style={[
                 styles.thumb,
                 {
diff --git a/src/Components/Tabs/Tabs.js b/src/Components/Tabs/Tabs.js
index 4024dc8..f5e5ed4 100644
--- a/src/Components/Tabs/Tabs.js
+++ b/src/Components/Tabs/Tabs.js
@@ -16,6 +16,7 @@ class Tabs extends Component {
     selectedIndex: PropTypes.number,
     backgroundColor: PropTypes.string,
     underlineColor: PropTypes.string,
+    underlineHeight: PropTypes.number,
     scrollEnabled: PropTypes.bool,
     handleChange: PropTypes.func,
     style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
@@ -180,7 +181,7 @@ class Tabs extends Component {
   }
 
   _renderContent() {
-    const { scrollEnabled, underlineColor } = this.props;
+    const { scrollEnabled, underlineColor, underlineHeight } = this.props;
     const { tabWidth, indicatorPosition, barWidth } = this.state;
 
     let tabWidthImplemented = !scrollEnabled ? tabWidth : barWidth * 0.4;
@@ -191,6 +192,7 @@ class Tabs extends Component {
         <View style={styles.tabsWrapper}>{this._renderTabs()}</View>
 
         <Underline
+          underlineHeight={underlineHeight}
           color={underlineColor}
           value={indicatorPosition}
           tabWidth={tabWidthImplemented}
diff --git a/src/Components/Tabs/Underline/Underline.js b/src/Components/Tabs/Underline/Underline.js
index e26ebff..7943dc0 100644
--- a/src/Components/Tabs/Underline/Underline.js
+++ b/src/Components/Tabs/Underline/Underline.js
@@ -13,20 +13,26 @@ class Underline extends Component {
       PropTypes.instanceOf(Animated.Value),
     ]),
     tabWidth: PropTypes.number,
+    underlineHeight: PropTypes.number,
+  };
+
+  static defaultProps = {
+    underlineHeight: 2,
   };
 
   render() {
-    const { tabWidth, color, value } = this.props;
+    const { tabWidth, color, value, underlineHeight } = this.props;
 
     return (
       <Animated.View
-        useNativeDriver={false}
+        useNativeDriver={true}
         style={[
           styles.underline,
           {
             width: tabWidth,
             backgroundColor: color,
             transform: [{ translateX: value }],
+            height: underlineHeight,
           },
         ]}
       />
diff --git a/src/Components/TextField/TextFieldLabel/TextFieldLabel.js b/src/Components/TextField/TextFieldLabel/TextFieldLabel.js
index 0151047..1612232 100644
--- a/src/Components/TextField/TextFieldLabel/TextFieldLabel.js
+++ b/src/Components/TextField/TextFieldLabel/TextFieldLabel.js
@@ -112,11 +112,13 @@ class TextFieldLabel extends Component {
         toValue: position,
         duration: animationDuration,
         easing: animationEasing,
+        useNativeDriver: true,
       }),
       Animated.timing(fontSizeAnimation, {
         toValue: fontVal,
         duration: animationDuration,
         easing: animationEasing,
+        useNativeDriver: true,
       }),
     ]).start();
   }
@@ -147,11 +149,13 @@ class TextFieldLabel extends Component {
         toValue: position,
         duration: animationDuration,
         easing: animationEasing,
+        useNativeDriver: true,
       }),
       Animated.timing(fontSizeAnimation, {
         toValue: fontVal,
         duration: animationDuration,
         easing: animationEasing,
+        useNativeDriver: true,
       }),
     ]).start();
   }
@@ -210,7 +214,7 @@ class TextFieldLabel extends Component {
 
     return (
       <Animated.View
-        useNativeDriver={false}
+        useNativeDriver={true}
         style={[
           styles.container,
           {
@@ -220,7 +224,7 @@ class TextFieldLabel extends Component {
         onLayout={e => onLayout && onLayout(e)}
         pointerEvents="none">
         <Animated.Text
-          useNativeDriver={false}
+          useNativeDriver={true}
           style={[
             styles.label,
             {
diff --git a/src/Components/TextField/TextFieldUnderline/TextFieldUnderline.js b/src/Components/TextField/TextFieldUnderline/TextFieldUnderline.js
index 8d25bb5..111ef2a 100644
--- a/src/Components/TextField/TextFieldUnderline/TextFieldUnderline.js
+++ b/src/Components/TextField/TextFieldUnderline/TextFieldUnderline.js
@@ -44,6 +44,7 @@ class TextFieldUnderline extends Component {
       toValue: value,
       duration: animationDuration,
       easing: animationEasing,
+      useNativeDriver: true,
     }).start();
   }
 
@@ -63,7 +64,7 @@ class TextFieldUnderline extends Component {
 
     return (
       <Animated.View
-        useNativeDriver={false}
+        useNativeDriver={true}
         style={[
           styles.underline,
           {
@@ -72,7 +73,7 @@ class TextFieldUnderline extends Component {
           },
         ]}>
         <Animated.View
-          useNativeDriver={false}
+          useNativeDriver={true}
           style={[
             styles.underline,
             {
diff --git a/src/Utils/Hoverable/Hoverable.stories.js b/src/Utils/Hoverable/Hoverable.stories.js
index 1c41f42..91cbd57 100644
--- a/src/Utils/Hoverable/Hoverable.stories.js
+++ b/src/Utils/Hoverable/Hoverable.stories.js
@@ -47,16 +47,18 @@ export default storiesOf('Utils|Hoverable', module)
                 Animated.timing(state.left, {
                   toValue: 1,
                   duration: 500,
+                  useNativeDriver: true,
                 }).start();
               }}
               onHoverOut={() => {
                 Animated.timing(state.left, {
                   toValue: 0,
                   duration: 500,
+                  useNativeDriver: true,
                 }).start();
               }}>
               <Animated.View
-                useNativeDriver={false}
+                useNativeDriver={true}
                 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 2fdbcae..905ca0b 100644
--- a/src/Components/Appbar/__snapshots__/Appbar.test.js.snap
+++ b/src/Components/Appbar/__snapshots__/Appbar.test.js.snap
@@ -24,7 +24,7 @@ exports[`Appbar Renders 1`] = `
       "zIndex": 2,
     }
   }
-  useNativeDriver={false}
+  useNativeDriver={true}
 >
   <View
     style={
diff --git a/src/Components/Badge/__snapshots__/Badge.test.js.snap b/src/Components/Badge/__snapshots__/Badge.test.js.snap
index 2533092..94dea57 100644
--- a/src/Components/Badge/__snapshots__/Badge.test.js.snap
+++ b/src/Components/Badge/__snapshots__/Badge.test.js.snap
@@ -43,7 +43,7 @@ exports[`Badge Renders 1`] = `
         "width": 16,
       }
     }
-    useNativeDriver={false}
+    useNativeDriver={true}
     visible={true}
   >
     <Text
diff --git a/src/Components/Card/__snapshots__/Card.test.js.snap b/src/Components/Card/__snapshots__/Card.test.js.snap
index 82828fc..48ddd94 100644
--- a/src/Components/Card/__snapshots__/Card.test.js.snap
+++ b/src/Components/Card/__snapshots__/Card.test.js.snap
@@ -17,6 +17,6 @@ exports[`Card Renders 1`] = `
       "shadowRadius": 1,
     }
   }
-  useNativeDriver={false}
+  useNativeDriver={true}
 />
 `;
diff --git a/src/Components/Chip/__snapshots__/Chip.test.js.snap b/src/Components/Chip/__snapshots__/Chip.test.js.snap
index 56b1345..b8d3aa4 100644
--- a/src/Components/Chip/__snapshots__/Chip.test.js.snap
+++ b/src/Components/Chip/__snapshots__/Chip.test.js.snap
@@ -21,7 +21,7 @@ exports[`Chip Renders 1`] = `
       "shadowRadius": 1,
     }
   }
-  useNativeDriver={false}
+  useNativeDriver={true}
 >
   <View
     accessible={true}
@@ -49,7 +49,7 @@ exports[`Chip Renders 1`] = `
       }
     }
     testID="mb-ripple"
-    useNativeDriver={false}
+    useNativeDriver={true}
   >
     <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 79f509a..888b843 100644
--- a/src/Components/Drawer/DrawerItem/__snapshots__/DrawerItem.test.js.snap
+++ b/src/Components/Drawer/DrawerItem/__snapshots__/DrawerItem.test.js.snap
@@ -31,7 +31,7 @@ exports[`DrawerItem Renders 1`] = `
     }
   }
   testID="mb-ripple"
-  useNativeDriver={false}
+  useNativeDriver={true}
 >
   <Text
     style={
diff --git a/src/Components/Drawer/__snapshots__/Drawer.test.js.snap b/src/Components/Drawer/__snapshots__/Drawer.test.js.snap
index 365b07a..6cd6fae 100644
--- a/src/Components/Drawer/__snapshots__/Drawer.test.js.snap
+++ b/src/Components/Drawer/__snapshots__/Drawer.test.js.snap
@@ -44,7 +44,7 @@ exports[`Drawer Renders 1`] = `
         "zIndex": 100,
       }
     }
-    useNativeDriver={false}
+    useNativeDriver={true}
   />
   <View
     style={
@@ -59,7 +59,7 @@ exports[`Drawer Renders 1`] = `
         "zIndex": 0,
       }
     }
-    useNativeDriver={false}
+    useNativeDriver={true}
   >
     <View
       accessible={true}
diff --git a/src/Components/DrawerBottom/__snapshots__/DrawerBottom.test.js.snap b/src/Components/DrawerBottom/__snapshots__/DrawerBottom.test.js.snap
index 03da7db..2ba90bd 100644
--- a/src/Components/DrawerBottom/__snapshots__/DrawerBottom.test.js.snap
+++ b/src/Components/DrawerBottom/__snapshots__/DrawerBottom.test.js.snap
@@ -75,7 +75,7 @@ exports[`DrawerBottom Renders 1`] = `
           "zIndex": 1000,
         }
       }
-      useNativeDriver={false}
+      useNativeDriver={true}
     >
       <RCTSafeAreaView
         emulateUnlessSupported={true}
diff --git a/src/Components/List/__snapshots__/List.test.js.snap b/src/Components/List/__snapshots__/List.test.js.snap
index 35bd2ec..c5517b6 100644
--- a/src/Components/List/__snapshots__/List.test.js.snap
+++ b/src/Components/List/__snapshots__/List.test.js.snap
@@ -15,6 +15,6 @@ exports[`List Renders 1`] = `
       "shadowRadius": 1,
     }
   }
-  useNativeDriver={false}
+  useNativeDriver={true}
 />
 `;
diff --git a/src/Components/Menu/MenuItem/__snapshots__/MenuItem.test.js.snap b/src/Components/Menu/MenuItem/__snapshots__/MenuItem.test.js.snap
index dd37844..3efc939 100644
--- a/src/Components/Menu/MenuItem/__snapshots__/MenuItem.test.js.snap
+++ b/src/Components/Menu/MenuItem/__snapshots__/MenuItem.test.js.snap
@@ -44,7 +44,7 @@ exports[`MenuItem Renders 1`] = `
       }
     }
     testID="mb-ripple"
-    useNativeDriver={false}
+    useNativeDriver={true}
   >
     <Text
       ellipsizeMode="clip"
diff --git a/src/Components/Paper/__snapshots__/Paper.test.js.snap b/src/Components/Paper/__snapshots__/Paper.test.js.snap
index f4067d2..3f168ae 100644
--- a/src/Components/Paper/__snapshots__/Paper.test.js.snap
+++ b/src/Components/Paper/__snapshots__/Paper.test.js.snap
@@ -15,6 +15,6 @@ exports[`Paper Renders 1`] = `
       "shadowRadius": 2.62,
     }
   }
-  useNativeDriver={false}
+  useNativeDriver={true}
 />
 `;
diff --git a/src/Components/Progress/ProgressCircle/__snapshots__/ProgressCircle.test.js.snap b/src/Components/Progress/ProgressCircle/__snapshots__/ProgressCircle.test.js.snap
index 02075ba..d797b7e 100644
--- a/src/Components/Progress/ProgressCircle/__snapshots__/ProgressCircle.test.js.snap
+++ b/src/Components/Progress/ProgressCircle/__snapshots__/ProgressCircle.test.js.snap
@@ -14,7 +14,7 @@ exports[`ProgressCircle Renders 1`] = `
         "width": 48,
       }
     }
-    useNativeDriver={false}
+    useNativeDriver={true}
   >
     <View
       collapsable={false}
@@ -25,7 +25,7 @@ exports[`ProgressCircle Renders 1`] = `
           "width": 48,
         }
       }
-      useNativeDriver={false}
+      useNativeDriver={true}
     >
       <View
         style={
@@ -39,7 +39,7 @@ exports[`ProgressCircle Renders 1`] = `
             "width": 48,
           }
         }
-        useNativeDriver={false}
+        useNativeDriver={true}
       >
         <View
           collapsable={false}
@@ -50,7 +50,7 @@ exports[`ProgressCircle Renders 1`] = `
               "width": 48,
             }
           }
-          useNativeDriver={false}
+          useNativeDriver={true}
         >
           <View
             style={
@@ -62,7 +62,7 @@ exports[`ProgressCircle Renders 1`] = `
                 "width": 48,
               }
             }
-            useNativeDriver={false}
+            useNativeDriver={true}
           />
         </View>
       </View>
diff --git a/src/Components/RadioButton/__snapshots__/RadioButton.test.js.snap b/src/Components/RadioButton/__snapshots__/RadioButton.test.js.snap
index 9d1b865..2df6389 100644
--- a/src/Components/RadioButton/__snapshots__/RadioButton.test.js.snap
+++ b/src/Components/RadioButton/__snapshots__/RadioButton.test.js.snap
@@ -40,7 +40,7 @@ exports[`RadioButton Renders 1`] = `
       }
     }
     testID="mb-ripple"
-    useNativeDriver={false}
+    useNativeDriver={true}
   >
     <View
       style={
@@ -55,7 +55,7 @@ exports[`RadioButton Renders 1`] = `
           "width": 20,
         }
       }
-      useNativeDriver={false}
+      useNativeDriver={true}
     />
     <View
       pointerEvents="none"
diff --git a/src/Components/Ripple/__snapshots__/Ripple.test.js.snap b/src/Components/Ripple/__snapshots__/Ripple.test.js.snap
index 3cedd2a..d76847a 100644
--- a/src/Components/Ripple/__snapshots__/Ripple.test.js.snap
+++ b/src/Components/Ripple/__snapshots__/Ripple.test.js.snap
@@ -20,7 +20,7 @@ exports[`Ripple Renders 1`] = `
   rippleSequential={false}
   rippleSize={0}
   testID="mb-ripple"
-  useNativeDriver={false}
+  useNativeDriver={true}
 >
   <View
     pointerEvents="none"
diff --git a/src/Components/SheetBottom/__snapshots__/SheetBottom.test.js.snap b/src/Components/SheetBottom/__snapshots__/SheetBottom.test.js.snap
index 6937c3b..f938236 100644
--- a/src/Components/SheetBottom/__snapshots__/SheetBottom.test.js.snap
+++ b/src/Components/SheetBottom/__snapshots__/SheetBottom.test.js.snap
@@ -74,7 +74,7 @@ exports[`SheetBottom Renders 1`] = `
           },
         ]
       }
-      useNativeDriver={false}
+      useNativeDriver={true}
     >
       <SafeAreaView
         onLayout={[Function]}
diff --git a/src/Components/SheetSide/__snapshots__/SheetSide.test.js.snap b/src/Components/SheetSide/__snapshots__/SheetSide.test.js.snap
index 2b9ee81..3a1461e 100644
--- a/src/Components/SheetSide/__snapshots__/SheetSide.test.js.snap
+++ b/src/Components/SheetSide/__snapshots__/SheetSide.test.js.snap
@@ -67,7 +67,7 @@ exports[`SheetSide Renders 1`] = `
           },
         ]
       }
-      useNativeDriver={false}
+      useNativeDriver={true}
     >
       <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 e168147..4f9f86d 100644
--- a/src/Components/TextField/TextFieldFilled/__snapshots__/TextFieldFilled.test.js.snap
+++ b/src/Components/TextField/TextFieldFilled/__snapshots__/TextFieldFilled.test.js.snap
@@ -265,7 +265,7 @@ exports[`TextFieldFilled Renders 1`] = `
         ],
       }
     }
-    useNativeDriver={false}
+    useNativeDriver={true}
   >
     <View
       style={
@@ -287,7 +287,7 @@ exports[`TextFieldFilled Renders 1`] = `
           ],
         }
       }
-      useNativeDriver={false}
+      useNativeDriver={true}
     />
   </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 1f2726a..634ef03 100644
--- a/src/Components/TextField/TextFieldFlat/__snapshots__/TextFieldFlat.test.js.snap
+++ b/src/Components/TextField/TextFieldFlat/__snapshots__/TextFieldFlat.test.js.snap
@@ -264,7 +264,7 @@ exports[`TextFieldFlat Renders 1`] = `
         ],
       }
     }
-    useNativeDriver={false}
+    useNativeDriver={true}
   >
     <View
       style={
@@ -286,7 +286,7 @@ exports[`TextFieldFlat Renders 1`] = `
           ],
         }
       }
-      useNativeDriver={false}
+      useNativeDriver={true}
     />
   </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 b56b76b..284e708 100644
--- a/src/Components/TextField/TextFieldLabel/__snapshots__/TextFieldLabel.test.js.snap
+++ b/src/Components/TextField/TextFieldLabel/__snapshots__/TextFieldLabel.test.js.snap
@@ -11,7 +11,7 @@ exports[`TextFieldLabel Renders 1`] = `
       "zIndex": 10,
     }
   }
-  useNativeDriver={false}
+  useNativeDriver={true}
 >
   <Text
     style={
@@ -30,7 +30,7 @@ exports[`TextFieldLabel Renders 1`] = `
         ],
       }
     }
-    useNativeDriver={false}
+    useNativeDriver={true}
   />
 </View>
 `;
diff --git a/src/Components/TextField/TextFieldUnderline/__snapshots__/TextFieldUnderline.test.js.snap b/src/Components/TextField/TextFieldUnderline/__snapshots__/TextFieldUnderline.test.js.snap
index 4484975..9bc0bb6 100644
--- a/src/Components/TextField/TextFieldUnderline/__snapshots__/TextFieldUnderline.test.js.snap
+++ b/src/Components/TextField/TextFieldUnderline/__snapshots__/TextFieldUnderline.test.js.snap
@@ -17,7 +17,7 @@ exports[`TextFieldUnderline Renders 1`] = `
       ],
     }
   }
-  useNativeDriver={false}
+  useNativeDriver={true}
 >
   <View
     style={
@@ -39,7 +39,7 @@ exports[`TextFieldUnderline Renders 1`] = `
         ],
       }
     }
-    useNativeDriver={false}
+    useNativeDriver={true}
   />
 </View>
 `;