Skip to content

native-ly/react-native-marquee

 
 

Repository files navigation

react-native-marquee

A pure JavaScript marquee text component for react native.

Showcase

This app is available on Android and iOS.

feedyourmusic

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 }}
          duration={3000}
          marqueeOnStart
          loop
          marqueeDelay={1000}
          marqueeResetDelay={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

Prop Type Optional Default Description
style StyleObj true - text style
duration number true 3000 Number of milliseconds until animation finishes from start.
loop boolean true false Set this true when animation repeats.
marqueeOnStart boolean true false Set this true while waiting for new data from a refresh.
marqueeResetDelay number true 0 Number of milliseconds to wait before resetting the marquee position after it finishes.
marqueeDelay number true 0 Number of milliseconds to wait before starting or restarting marquee.
onMarqueeComplete function true - Callback function for when the marquee completes its animation
useNativeDriver boolean true false Set this truen if you want to use native driver
easing function true inOut Easing function to define animation curve.

Methods

These methods are optional, you can use the isOpen property instead

Prop Params Description
startAnimation delay Start animation
stopAnimation - Stop animation

Contribution

Do you have any idea or want to change something? Just open an issue. Contributions are always welcome.

Lisence

MIT Lisence

About

React Native Marquee Text Component

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 56.9%
  • Objective-C 23.3%
  • Python 10.3%
  • Java 8.4%
  • JavaScript 1.1%