react-native-marquee-any

A pure JavaScript marquee component for react native. This package is inspired by react-native-marquee. Instead of limiting the children to text, it can animate any component you like.

To see a live demo of the package in action, click here: Expo Snack

Installation

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

Usage

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { Marquee } from "@stockfit/react-native-marquee-any";

export default class MarqueeTextSample extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Marquee
          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.
        </Marquee>
      </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