text-slider
v1.0.1
Published
A react native text slider module
Downloads
129
Maintainers
Readme
Read Me
React Native Text Slider
Installation
npm install text-slider --save
or
yarn add text-slider
Simple Usage
import React from 'react'
import TextSlider from 'text-slider'
const slideText = ["Welcome to React Native Text Slider",
"It is very easy to use",
"You can simply install and use it now",
"If you have any issues open up an issue in issues tab"
]
export default MyComponent extends React.Component{
render(){
return(
<TextSlider
frequency=5000
slideText={slideText}
/>
)
}
}
Advanced Usage
import React from 'react'
import TextSlider from 'text-slider'
const slideText = ["Welcome to React Native Text Slider",
"It is very easy to use",
"You can simply install and use it now",
"If you have any issues open up an issue in issues tab"
]
const wrapperStyle = {
flex:1,
width:'100%',
padding: 6,
backgroundColor: '#085078',
alignSelf: 'center',
marginTop:0,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'column',
elevation: 2
}
const currentText = {
textAlign: 'center',
alignSelf: 'center',
color: '#ffffff'
}
const activeDot = {
width: 10,
height: 10,
borderRadius: 5,
backgroundColor:'#ffffff',
marginRight: 10,
}
const inactiveDot = {
width: 10,
height: 10,
borderRadius: 5,
backgroundColor:'grey',
marginRight: 10
}
export default MyComponent extends React.Component{
render(){
return(
<TextSlider
frequency=5000
slideText={slideText}
wrapperStyle={wrapperStyle}
currentTextStyle={currentText}
activeDotStyle={activeDot}
inactiveDotStyle={inactiveDot}
currentIndex=0
/>
)
}
}