importRollingTextfrom"react-native-rolling-text";<Viewstyle={{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
import*asReactfrom'react';import{Text,View,StyleSheet}from'react-native';importRollingTextfrom'react-native-rolling-text';functionApp(){return(<Viewstyle={styles.container}><Viewstyle={styles.banner}><Textstyle={styles.title}>{'MARQUEE BANNER'}</Text><RollingTextdurationMsPerWidth={15}style={{fontSize: 12}}>{'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum elementum ante.'}</RollingText></View></View>);}conststyles=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,},});exportdefaultApp;
The Tidelift Subscription provides access to a continuously curated stream of human-researched and maintainer-verified data on open source packages and their licenses, releases, vulnerabilities, and development practices.