https://github.com/bang9/react-native-rolling-text

marquee in react-native
https://github.com/bang9/react-native-rolling-text

banner infinity-rolling marquee react-native react-native-marquee react-native-rolling-text rolling rolling-text

Last synced: 16 days ago
JSON representation

marquee in react-native

• Host: GitHub
• URL: https://github.com/bang9/react-native-rolling-text
• Owner: bang9
• Created: 2021-05-21T11:04:50.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-06-15T02:29:03.000Z (over 2 years ago)
• Last Synced: 2024-11-27T21:46:32.498Z (25 days ago)
• Topics: banner, infinity-rolling, marquee, react-native, react-native-marquee, react-native-rolling-text, rolling, rolling-text
• Language: TypeScript
• Homepage:
• Size: 4.72 MB
• Stars: 13
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        






# react-native-rolling-text




marquee in react-native! 



![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";

    

        {"Enter your Loooooooooooooooooooong text"}

    

```

## 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 (

        

            

                {'MARQUEE BANNER'}

                

                    {

                        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum elementum ante.'

                    }

                

            

        

    );

}

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;

```