React native info slider with react-native-swipper
npm install react-native-infoslider``javascript`
import Infoslider from 'react-native-infoslider'
export default class example extends Component {
constructor(props) {
super(props);
this.state = {
data:[
{
title:"Hello World",
text:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard",
image: require('./images/1.jpg')},
{
title:"Lorem Ipsum",
text:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard",
image: require('./images/2.jpg')},
{
title:"Lorem Ipsum",
text:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard",
image: require('./images/3.jpg')},
{
title:"Lorem Ipsum",
text:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard",
image: require('./images/4.jpg')},
]
};
}
render() {
return (
showDots={true}
activeDotColor="#04B4AE"
titleColor="#000"
textColor="#666"
loop={false}
autoplay={true}
autoplayTimeout={3}/>
);
}
}
# Props
| Prop|Defaul value|Type|Description|
| --- | --- | --- | --- |
| data(required)|-|Array of object(title, text, image)|This prop array is the data the component will show|
| showDots|true|bool|Show dots pagination|
| activeDotColor| - |string|Custom color for active dot|
| showDots|true|bool|Show dots pagination|
| titleColor| - |stirng|Custom color for title element|
| textColor| - |stirng|Custom color for text element|
| loop| true |bool|Set to false to disable loop mode|
| autoplay| false |bool|Set to true enable autoplay mode|
| autoplayTimeout| 2.5 |number|Delay between auto play transitions in second|Data Example
`js``
[
{
title:"Hello World",
text:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard",
image: require('./images/1.jpg')},
{
title:"Lorem Ipsum",
text:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard",
image: require('./images/2.jpg')},
{
title:"Lorem Ipsum",
text:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard",
image: require('./images/3.jpg')},
{
title:"Lorem Ipsum",
text:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard",
image: require('./images/4.jpg')},
]
react-native-swiper
https://github.com/leecade/react-native-swiper
1. clone
2. cd react-native-infoslider/example
3. npm install
4. react-native run-ios
Twitter: @holaconstancio