React Native Animated Ruler - Reanimated
Description
A custom React Native Animated Ruler built using React Native Reanimated, using `useAnimatedScrollHandler` - `onScroll` and `onMomentumEnd`. Once the value has settled, we call `onChange` callback with the current value of the ruler so you can do something with it, we use `runOnJS` to call this callback, since `onMomentulEnd` is running on UI Thread.
We're using `expo-linear-gradient` to create a smooth fade at the edges of the ruler and this can be customizable.
Installation
bunx @animatereactnative/cli@latest add react-native-animated-ruler-reanimated
npx @animatereactnative/cli@latest add react-native-animated-ruler-reanimated
yarn @animatereactnative/cli@latest add react-native-animated-ruler-reanimated
pnpm dlx @animatereactnative/cli@latest add react-native-animated-ruler-reanimated
Dependencies
| Package | Version |
|---|---|
expo-linear-gradient | ~15.0.7 |
To install these dependencies, you can use the following command:
bun add expo-linear-gradient@"~15.0.7"
npm install expo-linear-gradient@"~15.0.7"
yarn install expo-linear-gradient@"~15.0.7"
pnpm install expo-linear-gradient@"~15.0.7"