react_native_pandey_marquee

React Native Pandey Marquee

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