Custom React Native Picker - Reanimated

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

Preview

Dependencies

PackageVersion
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"

Source code