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.