react-native-rolling-text

react-native-rolling-text

marquee in react-native!

Installation

npm install react-native-rolling-text

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.

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

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

Change Logs

Support Props

Example

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;