Telegram Stories scroll animation

Description

This React Native animations is trying to replicate Telegram's stories scroll effect. You can customize the number of Stories that you'd like to be displaying in the header. The animations is powered by React Native Reanimated for fluid animations and measurements, alongside React Native Bottom Sheet for seamless scrolling and snapping functionality

Installation

bunx @animatereactnative/cli@latest add telegram-stories-scroll-animation

npx @animatereactnative/cli@latest add telegram-stories-scroll-animation

yarn @animatereactnative/cli@latest add telegram-stories-scroll-animation

pnpm dlx @animatereactnative/cli@latest add telegram-stories-scroll-animation

Preview

Dependencies

PackageVersion
@expo/vector-icons^15.0.2
@faker-js/faker^9.2.0
@gorhom/bottom-sheet^5.2.6
@react-navigation/elements^2.6.3
react-native-gesture-handler~2.28.0
react-native-reanimated~4.1.0
react-native-safe-area-context~5.6.0

To install these dependencies, you can use the following command:

bun add @expo/vector-icons@"^15.0.2" @faker-js/faker@"^9.2.0" @gorhom/bottom-sheet@"^5.2.6" @react-navigation/elements@"^2.6.3" react-native-gesture-handler@"~2.28.0" react-native-reanimated@"~4.1.0" react-native-safe-area-context@"~5.6.0"

npm install @expo/vector-icons@"^15.0.2" @faker-js/faker@"^9.2.0" @gorhom/bottom-sheet@"^5.2.6" @react-navigation/elements@"^2.6.3" react-native-gesture-handler@"~2.28.0" react-native-reanimated@"~4.1.0" react-native-safe-area-context@"~5.6.0"

yarn install @expo/vector-icons@"^15.0.2" @faker-js/faker@"^9.2.0" @gorhom/bottom-sheet@"^5.2.6" @react-navigation/elements@"^2.6.3" react-native-gesture-handler@"~2.28.0" react-native-reanimated@"~4.1.0" react-native-safe-area-context@"~5.6.0"

pnpm install @expo/vector-icons@"^15.0.2" @faker-js/faker@"^9.2.0" @gorhom/bottom-sheet@"^5.2.6" @react-navigation/elements@"^2.6.3" react-native-gesture-handler@"~2.28.0" react-native-reanimated@"~4.1.0" react-native-safe-area-context@"~5.6.0"

Source code