Animated TextInput - Reanimated 3
Tags
Description
A custom React Native Animated TextInput, that is using Reanimated Layout Animations to perform mounting and unmounting of the TextInput value.
The component is written in TypeScript and you can pass the following props:
- initial number
- a custom number formatter (using Intl.NumberFormat)
- gradient colors
This is my attempt to re-creating a pretty popular TextInput animation using just React Native Reanimated layout animations. Enjoy!
Installation
bunx @animatereactnative/cli@latest add animated-textinput-reanimated-3
npx @animatereactnative/cli@latest add animated-textinput-reanimated-3
yarn @animatereactnative/cli@latest add animated-textinput-reanimated-3
pnpm dlx @animatereactnative/cli@latest add animated-textinput-reanimated-3
Dependencies
| Package | Version |
|---|---|
expo-linear-gradient | ~15.0.7 |
react-native-reanimated | ~4.1.0 |
To install these dependencies, you can use the following command:
bun add expo-linear-gradient@"~15.0.7" react-native-reanimated@"~4.1.0"
npm install expo-linear-gradient@"~15.0.7" react-native-reanimated@"~4.1.0"
yarn install expo-linear-gradient@"~15.0.7" react-native-reanimated@"~4.1.0"
pnpm install expo-linear-gradient@"~15.0.7" react-native-reanimated@"~4.1.0"