https://github.com/kyo504/react-native-marquee
React Native Marquee Text Component
https://github.com/kyo504/react-native-marquee
android ios marquee react-native
Last synced: 3 months ago
JSON representation
React Native Marquee Text Component
- Host: GitHub
- URL: https://github.com/kyo504/react-native-marquee
- Owner: kyo504
- License: mit
- Created: 2017-06-19T08:32:11.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2024-02-29T15:45:38.000Z (over 2 years ago)
- Last Synced: 2025-09-28T01:06:05.851Z (9 months ago)
- Topics: android, ios, marquee, react-native
- Language: TypeScript
- Homepage:
- Size: 877 KB
- Stars: 205
- Watchers: 3
- Forks: 31
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```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 (
Lorem Ipsum is simply dummy text of the printing and typesetting industry and typesetting industry.
);
}
}
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](https://opensource.org/licenses/MIT)