Skip to content

ReactNative-Animation.md

Latest commit

 

History

History
52 lines (34 loc) · 1.72 KB

ReactNative-Animation.md

File metadata and controls

52 lines (34 loc) · 1.72 KB

interpolate's range must be always ascend in value.

https://animationbook.codedaily.io/interpolate#interpolate

[0.2, 1][(1, 0.2)]; // ✅ // ❎

useNativeDriver: true require <Animated.X> series components. https://reactnative.dev/blog/2017/02/14/using-native-driver-for-animated#how-do-i-use-this-in-my-app

Caveats of useNativeDriver: true:

  1. support non-layout properties, such as transform and opacity, but not Flex box and position properties.
  2. work with direct events, but not bubbling event(e.g. PanResponder).

PanResponder's onPanResponderMove listener receives a gestureState object as second params, in which dx and dy can be used in Animated.event https://reactnative.dev/docs/animated#event.

onPanResponderMove: (event, gestureState) => {};

onPanResponderMove: Animated.event(
  [
    null, // raw event arg ignored
    { dx: this._panX }, // gestureState arg
  ],
  {
    listener: (event, gestureState) => console.log(event, gestureState),
  }, // Optional async listener
);

use CSS animation in ReactNative

"Reduce Motion" setting with react-native-animated

By default all animations are configured with ReduceMotion.System, and those animations will not run:

withSpring, withTiming, withDecay, withDelay, withRepeat, and withSequence.

If the "Reduce Motion" is ON, Expo terminal reports:

WARN  [Reanimated] Reduced motion setting is enabled on this device.

Reduce Motion

Using ReduceMotion.Never can override the System setting. https://docs.swmansion.com/react-native-reanimated/docs/guides/accessibility/