React Native Marquee Text Component
npm install react-native-marqueeA pure JavaScript marquee text component for react native.
``
npm install --save react-native-marquee
or
yarn add react-native-marquee
`Javascript
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 (
speed={1}
marqueeOnStart={true}
loop={true}
delay={1000}
>
Lorem Ipsum is simply dummy text of the printing and typesetting industry and typesetting industry.
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
});
``
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
| consecutive | boolean | true | false | A flag to enable consecutive mode that imitates the default behavior of HTML marquee element. Does not take effect if loop is false
These methods are optional, you can use the isOpen property instead
| Prop | Params | Description |
|:--------|:------:|:----------------:|
| start | - | Start animation |
| stop | - | Stop animation |
Do you have any idea or want to change something? Just open an issue. Contributions are always welcome.