Tinder swiper animation - Reanimated + Gesture Handler
Tags
Description
This tinder swipe animation In React Native is powered by React Native Reanimated and React Native Gesture Handler.
The ViceTinder is a reusable component, written in TypeScript, with an API like FlatList or FlashList. In the example file I am showcasing how you can actually use it, adding a custom animated blurred background and how the events are received.
Installation
bunx @animatereactnative/cli@latest add tinder-swiper-animation-reanimated-+-gesture-handler
npx @animatereactnative/cli@latest add tinder-swiper-animation-reanimated-+-gesture-handler
yarn @animatereactnative/cli@latest add tinder-swiper-animation-reanimated-+-gesture-handler
pnpm dlx @animatereactnative/cli@latest add tinder-swiper-animation-reanimated-+-gesture-handler
Dependencies
| Package | Version |
|---|---|
expo-image | ~3.0.8 |
react-native-reanimated | ~4.1.0 |
To install these dependencies, you can use the following command:
bun add expo-image@"~3.0.8" react-native-reanimated@"~4.1.0"
npm install expo-image@"~3.0.8" react-native-reanimated@"~4.1.0"
yarn install expo-image@"~3.0.8" react-native-reanimated@"~4.1.0"
pnpm install expo-image@"~3.0.8" react-native-reanimated@"~4.1.0"