react-native-infoslider
react native info slider npm package
Example Video
Usage
npm i react-native-infoslider --save
{ superprops; thisstate = 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: title:"Lorem Ipsum" text:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard" image: title:"Lorem Ipsum" text:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard" image: title:"Lorem Ipsum" text:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard" image: ; } { return <Infoslider data=thisstatedata 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
title:"Hello World" text:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard" image: title:"Lorem Ipsum" text:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard" image: title:"Lorem Ipsum" text:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard" image: title:"Lorem Ipsum" text:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard" image:
Dependencies
react-native-swiper
https://github.com/leecade/react-native-swiper
Run example
- clone
- cd react-native-infoslider/example
- npm install
- react-native run-ios
Contact
Twitter: @holaconstancio