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

Installation

``sh
npm install @animatereactnative/marquee
`

> Also, you need to install react-native-reanimated, and follow their installation instructions.

Usage

`js
import { Marquee } from '@animatereactnative/marquee';

// ...

export function Example() {
return (

Powered by AnimateReactNative.com

);
}
`

Props

| 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 | |
| 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 | |
| withGesture | Indicates if the Marquee can be controlled by the gestures | NO | boolean` | |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---