Vertical Step indicator
May 06, 2023
1 min
A simple looped fading slides whirler for React Native with the below properties. Properties: fadeDuration= Milliseconds for slide fade stillDuration= Milliseconds for slide still height= Set the slides component height slides= Set the slides list startAnimation= Start/stops animation Slide properties: title= title of slide titleColor=Slide's title color subtitle= subtitle of the slide subtitleColor= color of slide's subtitle image= Slide's image imageWidth= Slide's image width imageHeight= Slide's image height
npm install --save react-native-fading-slides
import FadingSlides from 'react-native-fading-slides'; const slides = [ { image: require('image!squared-image'), imageWidth: 100, imageHeight: 100, title: 'Hello World', subtitle: 'This is a beautiful world', titleColor: '#fff', subtitleColor: '#fff', }, { image: require('image!wide-image'), imageWidth: 200, imageHeight: 100, title: 'Bye World', subtitle: 'This is a see you soon', titleColor: '#fff', subtitleColor: '#fff', } ]; //... render() { return ( <View> <FadingSlides slides={slides} fadeDuration={1200} stillDuration={2000} height={500} startAnimation={true} /> </View> ); };
Quick Links
Legal Stuff