React Native Marquee component, a cross-platform marquee component, powered by Reanimated:
- 🔋 Powered by Reanimated 3
- 📱 Works with Expo
- ✅ Cross-platform (iOS, Android, Web)
- ⚡️ 60-120fps
- 🪝 Works with any React Native element/component
- ⌨️ Written in TypeScript
npm install @animatereactnative/marqueeAlso, you need to install react-native-reanimated, and follow their installation instructions.
import { Marquee } from '@animatereactnative/marquee'; // ... export function Example() { return ( <Marquee spacing={20} speed={1}> <Heading>Powered by AnimateReactNative.com</Heading> </Marquee> ); }| name | description | required | type | default |
|---|---|---|---|---|
children | Any component that you'd like to apply infinite scrolling / marquee effect | YES | React.ReactNode | 1 |
speed | Animation speed | NO | number | 1 |
spacing | Spacing between repeting elements | NO | number | 0 |
reverse | Determine if the animation should be reversed or not. Based on direction, reverse means left-to-right, right-to-left, top-to-bottom, bottom-to-top | NO | boolean | false |
direction | Direction of the animation | NO | "horizontal" | "vertical" or "horizontal" |
style | View style to be applied to Marquee container. | NO | StyleProp<ViewStyle> | |
position | A shared value that you can pass and it will be modified when the marquee runs. Useful if you want to interpolate or run any additional animations | NO | SharedValue<number> | |
withGesture | Indicates if the Marquee can be controlled by the gestures | NO | boolean |
See the contributing guide to learn how to contribute to the repository and the development workflow.
