diff --git a/src/Backdrop.tsx b/src/Backdrop.tsx index 96b517b..fe18e3e 100644 --- a/src/Backdrop.tsx +++ b/src/Backdrop.tsx @@ -27,6 +27,8 @@ export interface BackdropProps { frontLayerContainerStyle?: Animated.AnimatedProps['style']; subheaderContainerStyle?: StyleProp; + + useNativeDriver?: boolean; } const Backdrop: React.FC = ({ @@ -42,6 +44,7 @@ const Backdrop: React.FC = ({ backLayerContainerStyle, frontLayerContainerStyle, subheaderContainerStyle, + useNativeDriver, children, }) => { const [currentHeaderHeight, setCurrentHeaderHeight] = useState(headerHeight ?? 0); @@ -74,7 +77,7 @@ const Backdrop: React.FC = ({ Animated.timing(animated, { toValue: revealed ? 1 : 0, duration: 300, - useNativeDriver: false, + useNativeDriver, }).start(); }, [revealed]); diff --git a/src/Badge.tsx b/src/Badge.tsx index d882aa2..38ae713 100644 --- a/src/Badge.tsx +++ b/src/Badge.tsx @@ -20,6 +20,8 @@ export interface BadgeProps { style?: Animated.AnimatedProps['style']; labelStyle?: StyleProp; + + useNativeDriver?: boolean; } const Badge: React.FC = ({ @@ -31,6 +33,7 @@ const Badge: React.FC = ({ tintColor, style, labelStyle, + useNativeDriver, children, }) => { const palette = usePaletteColor(color, tintColor); @@ -58,7 +61,7 @@ const Badge: React.FC = ({ Animated.timing(animated, { toValue: isVisible ? 1 : 0, duration: 200, - useNativeDriver: false, + useNativeDriver, }).start(); }, [isVisible]); diff --git a/src/Button.tsx b/src/Button.tsx index 2667869..dc0499c 100644 --- a/src/Button.tsx +++ b/src/Button.tsx @@ -130,6 +130,11 @@ export interface ButtonProps extends Omit, Omit; + + /** + * Specify whether to use the react native driver for animations. + */ + useNativeDriver?: boolean; } const Button: React.FC = ({ @@ -145,6 +150,7 @@ const Button: React.FC = ({ loading = false, loadingIndicatorPosition = 'leading', loadingIndicator, + useNativeDriver, style, pressableContainerStyle, @@ -318,7 +324,8 @@ const Button: React.FC = ({ ); 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 ( diff --git a/src/Dialog.tsx b/src/Dialog.tsx index 13e772f..d054edf 100644 --- a/src/Dialog.tsx +++ b/src/Dialog.tsx @@ -10,10 +10,12 @@ export interface DialogProps { surfaceStyles?: SurfaceProps; + useNativeDriver?: boolean; + children: ReactNode; } -const Dialog: React.FC = ({ visible = false, onDismiss, surfaceStyles, children }) => { +const Dialog: React.FC = ({ 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 = ({ visible = false, onDismiss, surfaceStyl toValue: visible ? 1 : 0, duration: 225, easing: Easing.out(Easing.cubic), - useNativeDriver: false, + useNativeDriver, }).start(() => { if (!visible) setPortalVisible(false); }); diff --git a/src/FAB.tsx b/src/FAB.tsx index 3d56226..bfb9568 100644 --- a/src/FAB.tsx +++ b/src/FAB.tsx @@ -40,6 +40,8 @@ export interface FABProps extends Omit, Omit; loadingOverlayContainerStyle?: StyleProp; + + useNativeDriver?: boolean; } const FAB: React.FC = ({ @@ -60,6 +62,7 @@ const FAB: React.FC = ({ labelContainerStyle, labelStyle, loadingOverlayContainerStyle, + useNativeDriver, pressEffect, pressEffectColor, @@ -140,7 +143,7 @@ const FAB: React.FC = ({ Animated.timing(animated, { toValue: visible ? 1 : 0, duration: 200, - useNativeDriver: false, + useNativeDriver, }).start(); }, [visible]); @@ -198,7 +201,7 @@ const FAB: React.FC = ({ [onPressOut] ); - const animatedElevation = useAnimatedElevation(pressed ? 12 : 6); + const animatedElevation = useAnimatedElevation(pressed ? 12 : 6, useNativeDriver); return ( diff --git a/src/Pressable.tsx b/src/Pressable.tsx index af4b4fd..dffc291 100644 --- a/src/Pressable.tsx +++ b/src/Pressable.tsx @@ -25,6 +25,8 @@ export interface PressableProps extends RNPressableProps { onMouseLeave?: (event: NativeSyntheticEvent) => void; style?: any; + + useNativeDriver?: boolean; } const Pressable: React.FC = ({ @@ -38,6 +40,7 @@ const Pressable: React.FC = ({ android_ripple, onMouseEnter, onMouseLeave, + useNativeDriver, children, ...rest }) => { @@ -86,7 +89,7 @@ const Pressable: React.FC = ({ ), easing: Easing.out(Easing.ease), duration: 400, - useNativeDriver: false, + useNativeDriver, }).start(); } }, @@ -103,7 +106,7 @@ const Pressable: React.FC = ({ toValue: 0, easing: Easing.out(Easing.ease), duration: 400, - useNativeDriver: false, + useNativeDriver, }).start(() => { setRipples((prevState) => prevState.slice(1)); }); diff --git a/src/TextInput.tsx b/src/TextInput.tsx index cba3009..817828f 100644 --- a/src/TextInput.tsx +++ b/src/TextInput.tsx @@ -87,6 +87,11 @@ export interface TextInputProps extends RNTextInputProps { * The style of the text input's trailing element container. */ trailingContainerStyle?: StyleProp; + + /** + * Specify whether to use the react native driver for animations. + */ + useNativeDriver?: boolean; } const TextInput: React.FC = React.forwardRef( @@ -105,6 +110,7 @@ const TextInput: React.FC = React.forwardRef( inputStyle, leadingContainerStyle, trailingContainerStyle, + useNativeDriver, placeholder, onFocus, @@ -173,7 +179,7 @@ const TextInput: React.FC = 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 = React.forwardRef( toValue: active ? 1 : 0, duration: 200, easing: Easing.out(Easing.ease), - useNativeDriver: false, + useNativeDriver, }).start(); }, [active]); diff --git a/src/hooks/use-animated-elevation.ts b/src/hooks/use-animated-elevation.ts index 1fd1a79..8c174cd 100644 --- a/src/hooks/use-animated-elevation.ts +++ b/src/hooks/use-animated-elevation.ts @@ -4,7 +4,7 @@ import { Elevation, useTheme } from '../base/ThemeContext'; const inputRange = Array.from(Array(25).keys()); -export const useAnimatedElevation = (elevation: Elevation): StyleProp => { +export const useAnimatedElevation = (elevation: Elevation, useNativeDriver: boolean = true): StyleProp => { const animated = useMemo(() => new Animated.Value(elevation), []); useEffect(() => { @@ -12,7 +12,7 @@ export const useAnimatedElevation = (elevation: Elevation): StyleProp Animated.timing(animated, { toValue: elevation, duration: 200, - useNativeDriver: false, + useNativeDriver, }).start(); }, [elevation]);