React Native Pandey 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 react_native_pandey_marquee

For using linear gradient, you also need to install react-native-linear-gradient:

npm install react-native-linear-gradient

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

This addition provides clear instructions for users to install both react-native-reanimated and react-native-linear-gradient libraries.

Usage

import  Marquee  from 'react_native_pandey_marquee';
import {Text} from 'react-native'

// ...

export function Example() {
  return (
    <Marquee spacing={0} speed={0.7} direction='left'autofill={false} linearGradientColors={['#FF5733', '#FFC300']}>
      <Text style={{fontSize:16, color:'#000',}}>Hello World</Text>
    </Marquee>
  );
}

 //...
export function Example() {
  return (
    <Marquee spacing={0} speed={0.7} direction='left'autofill={false} backgroundColor={'#000'}>
      <Text style={{fontSize:16, color:'#fff',}}>Hello World</Text>
    </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 | | style | View style to be applied to Marquee container. | NO | StyleProp<ViewStyle> | | | direction| Move text from both direction. | NO | string | left | | autofill | Text Width Control | NO | boolean | | | linearGradientColors | Add Gradient Color in the background | NO | string | | | backgroundColor | Add Gradient Color in the background | NO | string | |

Contributing

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

License

ISC