Apple stock animation - Reanimated, Marquee

Description

Apple stock animation in React Native. This React Bative animation and interaction is powered by React Native Reanimated 3, Marquee animation (our own React Native Marquee open-source library) and React Native BottomSheet. For the line charts / sparkline we're using React Native Victory Charts, but it can be easily changed with your own chart component.

Installation

bunx @animatereactnative/cli@latest add apple-stock-animation-reanimated-marquee-and-bottomsheet

npx @animatereactnative/cli@latest add apple-stock-animation-reanimated-marquee-and-bottomsheet

yarn @animatereactnative/cli@latest add apple-stock-animation-reanimated-marquee-and-bottomsheet

pnpm dlx @animatereactnative/cli@latest add apple-stock-animation-reanimated-marquee-and-bottomsheet

Preview

Dependencies

PackageVersion
@animatereactnative/marquee^0.5.2
@gorhom/bottom-sheet^5.2.6
@shopify/flash-list2.0.2
expo-image~3.0.8
moti^0.29.0
react-native-reanimated~4.1.0
react-native-safe-area-context~5.6.0
react-native-svg15.12.1
victory-nativelegacy

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

bun add @animatereactnative/marquee@"^0.5.2" @gorhom/bottom-sheet@"^5.2.6" @shopify/flash-list@"2.0.2" expo-image@"~3.0.8" moti@"^0.29.0" react-native-reanimated@"~4.1.0" react-native-safe-area-context@"~5.6.0" react-native-svg@"15.12.1" victory-native@"legacy"

npm install @animatereactnative/marquee@"^0.5.2" @gorhom/bottom-sheet@"^5.2.6" @shopify/flash-list@"2.0.2" expo-image@"~3.0.8" moti@"^0.29.0" react-native-reanimated@"~4.1.0" react-native-safe-area-context@"~5.6.0" react-native-svg@"15.12.1" victory-native@"legacy"

yarn install @animatereactnative/marquee@"^0.5.2" @gorhom/bottom-sheet@"^5.2.6" @shopify/flash-list@"2.0.2" expo-image@"~3.0.8" moti@"^0.29.0" react-native-reanimated@"~4.1.0" react-native-safe-area-context@"~5.6.0" react-native-svg@"15.12.1" victory-native@"legacy"

pnpm install @animatereactnative/marquee@"^0.5.2" @gorhom/bottom-sheet@"^5.2.6" @shopify/flash-list@"2.0.2" expo-image@"~3.0.8" moti@"^0.29.0" react-native-reanimated@"~4.1.0" react-native-safe-area-context@"~5.6.0" react-native-svg@"15.12.1" victory-native@"legacy"

Source code