react-native-marquee

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
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

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.

Lisence

MIT Lisence