1.2.9 • Published 12 months ago
react_native_pandey_marquee v1.2.9
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.