Helpers that let you observe Animated and Reanimated values and convert between them.
This library is useful when you have a component that uses Animated and accepts animated values or styles, but you use Reanimated for your app's animations, or vice versa. You can use this library to convert your values to work with the component.
npm install react-native-animated-observerThe library exports the following components:
A component that converts between an Animated.Node and a SharedValue<number> natively.
Usage:
import { AnimatedConverter } from 'react-native-animated-observer';
// ...
const animatedValue = useRef(new Animated.Value(0)).current;
const reanimatedSharedValue = useSharedValue(0);
// ...
<AnimatedConverter from={animatedValue} to={reanimatedSharedValue} />;It accepts the following props:
Value to read and observe changes from. It can be one of the following:
Animated.Node-Animated.Valueor result of modifications such as interpolation (Animated.AnimatedInterpolation), addition (Animated.AnimatedAddition), etc.SharedValue<number>orDerivedValue<number>
Value to update when the from value changes. It can be one of the following:
A component that observes changes in a given value and emits an event when the value changes. This is the building block for AnimatedConverter.
Usage:
import { AnimatedObserver } from 'react-native-animated-observer';
// ...
const animatedValue = useRef(new Animated.Value(0)).current;
// ...
<AnimatedObserver
value={animatedValue}
onValueChange={(e) => console.log(e.nativeEvent.value)}
/>;It accepts the following props:
The value to observe.
It can be a number, Animated.Node for Animated, SharedValue<number> or DerivedValue<number> for Reanimated.
A callback function that is called when the observed value changes.
The library renders a native component that receives an Animated.Node or SharedValue<number> value. When the value changes, the library dispatches an event with this value.
This event is then used with Animated.event (with native driver) or useEvent to update Animated.Value or SharedValue<number> respectively, depending on the usage.
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with create-react-native-library