Animated sentence - Reanimated & Moti
Description
This animated sentence component brings words to life with smooth staggered enter and exit animations, powered by **React Native Reanimated** Layout animation, each word enters and exits sequentially.
### Features
- **Callbacks**: You receive a callback for `onExitFinish` and `onEnterFinish` callbacks.
- **Styling**: Style the `Text` component using the `style` prop.
### Usage Example
In `example.tsx`, see how to display a series of sentences that pause for user reading. This is using **Moti** for the background color animation. The delay is set based on average reading speed (words per minute), ensuring each sentence appears at just the right time for readability.
Installation
bunx @animatereactnative/cli@latest add animated-sentence-reanimated-and-moti
npx @animatereactnative/cli@latest add animated-sentence-reanimated-and-moti
yarn @animatereactnative/cli@latest add animated-sentence-reanimated-and-moti
pnpm dlx @animatereactnative/cli@latest add animated-sentence-reanimated-and-moti
Dependencies
| Package | Version |
|---|---|
@faker-js/faker | ^9.2.0 |
moti | ^0.29.0 |
react-native-reanimated | ~4.1.0 |
To install these dependencies, you can use the following command:
bun add @faker-js/faker@"^9.2.0" moti@"^0.29.0" react-native-reanimated@"~4.1.0"
npm install @faker-js/faker@"^9.2.0" moti@"^0.29.0" react-native-reanimated@"~4.1.0"
yarn install @faker-js/faker@"^9.2.0" moti@"^0.29.0" react-native-reanimated@"~4.1.0"
pnpm install @faker-js/faker@"^9.2.0" moti@"^0.29.0" react-native-reanimated@"~4.1.0"