@leeseungun/react-native-marquee

0strich Fork Version

react-native-marquee

A pure JavaScript marquee text component for react native.

Installation

npm install --save @leeseungun/react-native-marquee
or
yarn add @leeseungun/react-native-marquee

Usage

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import MarqueeText from '@leeseungun/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.

Lisence

MIT Lisence