@animatereactnative/marquee NPM

https://github.com/animate-react-native/marquee/assets/2805320/4fb199b2-491c-4621-bf84-85890a8d6f5e

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

npm install @animatereactnative/marquee

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

Usage

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

// ...

export function Example() {
  return (
    <Marquee spacing={20} speed={1}>
      <Heading>Powered by AnimateReactNative.com</Heading>
    </Marquee>
  );
}

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<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`