Custom React Native Picker - Reanimated
Tags
Description
A custom React Native Picker that is animated using React Native Reanimated, written in TypeScript.
The picker uses FlatList under the hood to perform the scrolling and rendering of the elements, as well as a small algorithm to measure items and find the snap points.
This picker supports dynamic sizes for the elements and it will snap into position based on scroll x position. When "idle" the rest of the elements are hidden using an animation except the active one, and while "active" the items becomes visible.
When the previous value has changed, there's a haptic applied so that it will inform users the value has changed.
Installation
bunx @animatereactnative/cli@latest add custom-react-native-picker-reanimated
npx @animatereactnative/cli@latest add custom-react-native-picker-reanimated
yarn @animatereactnative/cli@latest add custom-react-native-picker-reanimated
pnpm dlx @animatereactnative/cli@latest add custom-react-native-picker-reanimated
Dependencies
| Package | Version |
|---|---|
expo-haptics | ~15.0.7 |
react-native-reanimated | ~4.1.0 |
To install these dependencies, you can use the following command:
bun add expo-haptics@"~15.0.7" react-native-reanimated@"~4.1.0"
npm install expo-haptics@"~15.0.7" react-native-reanimated@"~4.1.0"
yarn install expo-haptics@"~15.0.7" react-native-reanimated@"~4.1.0"
pnpm install expo-haptics@"~15.0.7" react-native-reanimated@"~4.1.0"