Native driver option for animated elevation hook and other components

src/Backdrop.tsx

@@ -27,6 +27,8 @@ export interface BackdropProps {
   frontLayerContainerStyle?: Animated.AnimatedProps<ViewProps>['style'];
 
   subheaderContainerStyle?: StyleProp<ViewStyle>;
+
+  useNativeDriver?: boolean;
 }
 
 const Backdrop: React.FC<BackdropProps> = ({
@@ -42,6 +44,7 @@ const Backdrop: React.FC<BackdropProps> = ({
   backLayerContainerStyle,
   frontLayerContainerStyle,
   subheaderContainerStyle,
+  useNativeDriver,
   children,
 }) => {
   const [currentHeaderHeight, setCurrentHeaderHeight] = useState(headerHeight ?? 0);
@@ -74,7 +77,7 @@ const Backdrop: React.FC<BackdropProps> = ({
     Animated.timing(animated, {
       toValue: revealed ? 1 : 0,
       duration: 300,
-      useNativeDriver: false,
+      useNativeDriver,
     }).start();
   }, [revealed]);
 

src/Badge.tsx

@@ -20,6 +20,8 @@ export interface BadgeProps {
   style?: Animated.AnimatedProps<ViewProps>['style'];
 
   labelStyle?: StyleProp<TextStyle>;
+
+  useNativeDriver?: boolean;
 }
 
 const Badge: React.FC<BadgeProps> = ({
@@ -31,6 +33,7 @@ const Badge: React.FC<BadgeProps> = ({
   tintColor,
   style,
   labelStyle,
+  useNativeDriver,
   children,
 }) => {
   const palette = usePaletteColor(color, tintColor);
@@ -58,7 +61,7 @@ const Badge: React.FC<BadgeProps> = ({
     Animated.timing(animated, {
       toValue: isVisible ? 1 : 0,
       duration: 200,
-      useNativeDriver: false,
+      useNativeDriver,
     }).start();
   }, [isVisible]);
 

src/Button.tsx

@@ -130,6 +130,11 @@ export interface ButtonProps extends Omit<SurfaceProps, 'hitSlop'>, Omit<Pressab
    * The style of the button's loading indicator overlay view. No effect if `loadingIndicatorPosition` is not `overlay`.
    */
   loadingOverlayContainerStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Specify whether to use the react native driver for animations.
+   */
+  useNativeDriver?: boolean;
 }
 
 const Button: React.FC<ButtonProps> = ({
@@ -145,6 +150,7 @@ const Button: React.FC<ButtonProps> = ({
   loading = false,
   loadingIndicatorPosition = 'leading',
   loadingIndicator,
+  useNativeDriver,
 
   style,
   pressableContainerStyle,
@@ -318,7 +324,8 @@ const Button: React.FC<ButtonProps> = ({
   );
 
   const animatedElevation = useAnimatedElevation(
-    variant === 'contained' && !disableElevation && !disabled ? (pressed ? 8 : hovered ? 4 : 2) : 0
+    variant === 'contained' && !disableElevation && !disabled ? (pressed ? 8 : hovered ? 4 : 2) : 0,
+    useNativeDriver,
   );
 
   return (

src/Dialog.tsx

@@ -10,10 +10,12 @@ export interface DialogProps {
 
   surfaceStyles?: SurfaceProps;
 
+  useNativeDriver?: boolean;
+
   children: ReactNode;
 }
 
-const Dialog: React.FC<DialogProps> = ({ visible = false, onDismiss, surfaceStyles, children }) => {
+const Dialog: React.FC<DialogProps> = ({ visible = false, onDismiss, surfaceStyles, useNativeDriver, children }) => {
   const [portalVisible, setPortalVisible] = useState(visible);
 
   const animatedValue = useMemo(() => new Animated.Value(visible ? 1 : 0), []);
@@ -25,7 +27,7 @@ const Dialog: React.FC<DialogProps> = ({ visible = false, onDismiss, surfaceStyl
       toValue: visible ? 1 : 0,
       duration: 225,
       easing: Easing.out(Easing.cubic),
-      useNativeDriver: false,
+      useNativeDriver,
     }).start(() => {
       if (!visible) setPortalVisible(false);
     });

src/FAB.tsx

@@ -40,6 +40,8 @@ export interface FABProps extends Omit<SurfaceProps, 'hitSlop'>, Omit<PressableP
   labelStyle?: StyleProp<TextStyle>;
 
   loadingOverlayContainerStyle?: StyleProp<ViewStyle>;
+
+  useNativeDriver?: boolean;
 }
 
 const FAB: React.FC<FABProps> = ({
@@ -60,6 +62,7 @@ const FAB: React.FC<FABProps> = ({
   labelContainerStyle,
   labelStyle,
   loadingOverlayContainerStyle,
+  useNativeDriver,
 
   pressEffect,
   pressEffectColor,
@@ -140,7 +143,7 @@ const FAB: React.FC<FABProps> = ({
     Animated.timing(animated, {
       toValue: visible ? 1 : 0,
       duration: 200,
-      useNativeDriver: false,
+      useNativeDriver,
     }).start();
   }, [visible]);
 
@@ -198,7 +201,7 @@ const FAB: React.FC<FABProps> = ({
     [onPressOut]
   );
 
-  const animatedElevation = useAnimatedElevation(pressed ? 12 : 6);
+  const animatedElevation = useAnimatedElevation(pressed ? 12 : 6, useNativeDriver);
 
   return (
     <Surface style={[animatedElevation, styles.container, { transform: [{ scale: animated }] }, style]} {...rest}>

src/Pressable.tsx

@@ -25,6 +25,8 @@ export interface PressableProps extends RNPressableProps {
   onMouseLeave?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
 
   style?: any;
+
+  useNativeDriver?: boolean;
 }
 
 const Pressable: React.FC<PressableProps> = ({
@@ -38,6 +40,7 @@ const Pressable: React.FC<PressableProps> = ({
   android_ripple,
   onMouseEnter,
   onMouseLeave,
+  useNativeDriver,
   children,
   ...rest
 }) => {
@@ -86,7 +89,7 @@ const Pressable: React.FC<PressableProps> = ({
           ),
           easing: Easing.out(Easing.ease),
           duration: 400,
-          useNativeDriver: false,
+          useNativeDriver,
         }).start();
       }
     },
@@ -103,7 +106,7 @@ const Pressable: React.FC<PressableProps> = ({
           toValue: 0,
           easing: Easing.out(Easing.ease),
           duration: 400,
-          useNativeDriver: false,
+          useNativeDriver,
         }).start(() => {
           setRipples((prevState) => prevState.slice(1));
         });

src/TextInput.tsx

@@ -87,6 +87,11 @@ export interface TextInputProps extends RNTextInputProps {
    * The style of the text input's trailing element container.
    */
   trailingContainerStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Specify whether to use the react native driver for animations.
+   */
+  useNativeDriver?: boolean;
 }
 
 const TextInput: React.FC<TextInputProps> = React.forwardRef(
@@ -105,6 +110,7 @@ const TextInput: React.FC<TextInputProps> = React.forwardRef(
       inputStyle,
       leadingContainerStyle,
       trailingContainerStyle,
+      useNativeDriver,
 
       placeholder,
       onFocus,
@@ -173,7 +179,7 @@ const TextInput: React.FC<TextInputProps> = React.forwardRef(
         toValue: focused ? 1 : 0,
         duration: 200,
         easing: Easing.out(Easing.ease),
-        useNativeDriver: false,
+        useNativeDriver,
       }).start();
     }, [focused]);
 
@@ -186,7 +192,7 @@ const TextInput: React.FC<TextInputProps> = React.forwardRef(
         toValue: active ? 1 : 0,
         duration: 200,
         easing: Easing.out(Easing.ease),
-        useNativeDriver: false,
+        useNativeDriver,
       }).start();
     }, [active]);
 

src/hooks/use-animated-elevation.ts

@@ -4,15 +4,15 @@ import { Elevation, useTheme } from '../base/ThemeContext';
 
 const inputRange = Array.from(Array(25).keys());
 
-export const useAnimatedElevation = (elevation: Elevation): StyleProp<ViewStyle> => {
+export const useAnimatedElevation = (elevation: Elevation, useNativeDriver: boolean = true): StyleProp<ViewStyle> => {
   const animated = useMemo(() => new Animated.Value(elevation), []);
 
   useEffect(() => {
     if (Platform.OS === 'web') return;
     Animated.timing(animated, {
       toValue: elevation,
       duration: 200,
-      useNativeDriver: false,
+      useNativeDriver,
     }).start();
   }, [elevation]);