Availability animation - Reanimated & Moti
Description
In this example, we'll explore how to create sleek availability animations using React Native Reanimated's `entering` and `exiting` animations, along with React Native Moti to animate a skeleton loader.
The `example.tsx` will simulate an API call that dynamically generates new data while incorporating a smooth loading state. This setup will not only give your app a polished feel but also enhance user experience by providing visual feedback during data fetching.
Installation
bunx @animatereactnative/cli@latest add availability-animation-reanimated-and-moti
npx @animatereactnative/cli@latest add availability-animation-reanimated-and-moti
yarn @animatereactnative/cli@latest add availability-animation-reanimated-and-moti
pnpm dlx @animatereactnative/cli@latest add availability-animation-reanimated-and-moti
Dependencies
| Package | Version |
|---|---|
@faker-js/faker | ^9.2.0 |
expo-image | ~3.0.8 |
To install these dependencies, you can use the following command:
bun add @faker-js/faker@"^9.2.0" expo-image@"~3.0.8"
npm install @faker-js/faker@"^9.2.0" expo-image@"~3.0.8"
yarn install @faker-js/faker@"^9.2.0" expo-image@"~3.0.8"
pnpm install @faker-js/faker@"^9.2.0" expo-image@"~3.0.8"