# react-native-marquee

> React Native Marquee Text Component

Latest version **0.5.0** (published 2023-03-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-marquee
pnpm add react-native-marquee
yarn add react-native-marquee
bun add react-native-marquee
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.0 |
| Published | 2023-03-06 |
| First published | 2017-09-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 12.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 205 |
| Author | Hunkyo Jung |
| Maintainers | kyo504 |
| Keywords | react-native, marquee, ios, android |

## Links

- npm: https://www.npmjs.com/package/react-native-marquee
- Repository: https://github.com/kyo504/react-native-marquee
- Homepage: https://github.com/kyo504/react-native-marquee#readme
- Issues: https://github.com/kyo504/react-native-marquee/issues
- npm.io page: https://npm.io/package/react-native-marquee

## Dependencies (1)

- [@react-navigation/native-stack](https://npm.io/package/@react-navigation/native-stack.md) ^6.9.11

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.5.0 (latest) — 2023-03-06
- 0.4.0 — 2022-03-22
- 0.3.4 — 2022-03-18
- 0.3.2 — 2018-06-18
- 0.3.1 — 2017-09-19
- 0.2.0 — 2017-09-19
- 0.1.1 — 2017-09-18
- 0.1.0 — 2017-09-17

## 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 (
      <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](https://opensource.org/licenses/MIT)

---
_Source: https://npm.io/package/react-native-marquee · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._