# react-native-rolling-text

> marquee in react-native

Latest version **0.0.2** (published 2022-06-15) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-rolling-text
pnpm add react-native-rolling-text
yarn add react-native-rolling-text
bun add react-native-rolling-text
```

## Health

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

Positive: has types; no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2022-06-15 |
| First published | 2021-05-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | bang9 |
| Maintainers | bang9 |
| Keywords | react, react-native, marquee, move-text, rolling-text, banner |

## Links

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

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.2 (latest) — 2022-06-15
- 0.0.1 — 2021-05-21

## README

<span class="module"><a href="https://github.com/bang9/react-native-rolling-text" title="View this project"><img src="https://img.shields.io/badge/React Native-react--native--rolling--text-black?style=flat-square&logo=react" alt="RNRollingText" /></a></span>

<span class="npmversion"><a href="https://npmjs.org/package/react-native-rolling-text" title="View this project on NPM"><img src="https://img.shields.io/npm/v/react-native-rolling-text.svg" alt="NPM version" /></a></span>
<span class="npmdownloads"><a href="https://npmjs.org/package/react-native-rolling-text" title="View this project on NPM"><img src="https://img.shields.io/npm/dm/react-native-rolling-text.svg" alt="NPM downloads" /></a></span>

# react-native-rolling-text
<span class="module"><a href="https://snack.expo.io/@bang9/marquee" title="Example"><img src="https://img.shields.io/badge/Expo-test it on expo snack-black?style=flat-square&logo=expo" alt="RNRollingText" /></a></span><br/>
marquee in react-native! <br/><br/>

![img](screenshot/result.gif)

## Installation

```sh
npm install react-native-rolling-text
```

```sh
yarn add react-native-rolling-text
```

## Usage

- It is affected by the size of the container.
- Don't for get add overflow style to container.

```jsx
import RollingText from "react-native-rolling-text";

<View style={{width:150, overflow:'hidden'}}>
    <RollingText>
        {"Enter your Loooooooooooooooooooong text"}
    </RollingText>
</View>
```

## Change Logs


## Support Props

| Prop                | Type      | Default | Description                           |
| :------------------ | :-------- | :------ | ------------------------------------- |
| debug?              | boolean   | false   | debugging mode                        |
| force?              | boolean   | false   | Makes the animation work even if the text is not longer than the container |
| containerStyle?     | ViewStyle | -       | component container style             |
| style?              | TextStyle | -       | text style                            | 
| startDelay?         | number    | 2000    | animation delay at trigger time       |
| delay?              | number    | 0       | animation delay at end                |
| durationMsPerWidth? | number    | 25      | speed of animation, lower is faster   |

## Example

```jsx
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import RollingText from 'react-native-rolling-text';

function App() {
    return (
        <View style={styles.container}>
            <View style={styles.banner}>
                <Text style={styles.title}>{'MARQUEE BANNER'}</Text>
                <RollingText durationMsPerWidth={15} style={{ fontSize: 12 }}>
                    {
                        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum elementum ante.'
                    }
                </RollingText>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: { 
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    banner: {
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'orange',
        height: 60,
        width: '80%',
        borderRadius: 8,
        overflow: 'hidden',
    },
    title: {
        fontWeight: 'bold',
        fontSize: 16,
    },
});

export default App;
```

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