react-native-marquee
react-native-marquee copied to clipboard
Published
20 hours ago •
kyo504
kyo504
React Native Marquee Text Component
react-native-marquee
A pure JavaScript marquee text component for react native.
Installation
npm install --save react-native-marquee
or
yarn add react-native-marquee
Usage
import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import MarqueeText from 'react-native-marquee';
export default class MarqueeTextSample extends Component {
render() {
return (
<View style={styles.container}>
<MarqueeText
style={{ fontSize: 24 }}
speed={1}
marqueeOnStart={true}
loop={true}
delay={1000}
>
Lorem Ipsum is simply dummy text of the printing and typesetting industry and typesetting industry.
</MarqueeText>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
});
Properties
MarqueeText component basically inherits TextProps and the followings are additional ones:
| Prop | Type | Optional | Default | Description |
|---|---|---|---|---|
| marqueeOnStart | boolean | true | true | A flag whether to start marquee animation right after render |
| speed | number | true | 1 | Speed calculated as pixels/second |
| loop | boolean | true | true | A flag whether to loop marquee animation or not |
| delay | number | true | 0 | Duration to delay the animation after render, in milliseconds |
| onMarqueeComplete | function | true | void | A callback for when the marquee finishes animation and stops |
Methods
These methods are optional, you can use the isOpen property instead
| Prop | Params | Description |
|---|---|---|
| start | - | Start animation |
| stop | - | Stop animation |
Contribution
Do you have any idea or want to change something? Just open an issue. Contributions are always welcome.
kyo504