Auto image slider gallery is a type of image container that holds multiple images inside it with navigation options. Image Slider has Image Title and Caption text to show some useful information about current image. Image Slider also contain Left Right navigation arrows and Page Indicators connected with each image. In react native if you make your own custom Image Slider then it will take lot’s of code and time but using the react-native-slideshow library you can easily make your own custom Auto Image Slider Gallery with Indicator in Android iOS React Native application. So let’s get started 🙂 .
Contents in this project Create Auto Image Slider Gallery in Android iOS with Page Indicator Tutorial:
1. Open your current react native project in command prompt and execute below command to install react-native-slideshow NPM library.
|
1 |
npm install react-native-slideshow --save |
2. After done installing the library we need to install the latest prop-types module in our current project. To install the latest prop-types in our react native project execute below command.
|
1 |
npm install --save prop-types |
3. After successfully installed the library we need to make some changes in its Slideshow.js file of currently installed react-native-slideshow library, because this library has old Props Type and we need to remove old prop type and set to new. So GoTo YourReactNativeProject -> node_modules -> react-native-slideshow -> Slideshow.js file .Open Slideshow.js file in Editor window .
4. Remove PropTypes from the imports from React and below line and save the file.
|
1 |
import PropTypes from 'prop-types' ; |
5. Open your project’s App.js file and import StyleSheet, View and Platform component in your project.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, View, Platform } from 'react-native'; |
6. Import Slideshow component from react-native-slideshow library in your project.
|
1 |
import Slideshow from 'react-native-slideshow'; |
7. Create constructor() in your react native project and make multiple states inside it.
position : From which image the slideshow begun.
dataSource : Used to hold the images data like image title, caption and image URL.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
constructor() { super(); this.state = { position: 1, interval: null, dataSource: [ { title: 'Title 1', caption: 'Caption 1', url: 'https://reactnativecode.000webhostapp.com/images/dahlia-red-blossom-bloom-60597.jpeg', }, { title: 'Title 2', caption: 'Caption 2', url: 'https://reactnativecode.000webhostapp.com/images/flower-impala-lily-floral-plant-65653.jpeg', }, { title: 'Title 3', caption: 'Caption 3', url: 'https://reactnativecode.000webhostapp.com/images/flowers-background-butterflies-beautiful-87452.jpeg', }, ], }; } |
8. Creating componentWillMount() method in your project’s class and update the position State value dynamically after 5 Seconds. So the image will automatically changes after 5 seconds.
|
1 2 3 4 5 6 7 8 9 |
componentWillMount() { this.setState({ interval: setInterval(() => { this.setState({ position: this.state.position === this.state.dataSource.length ? 0 : this.state.position + 1 }); }, 5000) }); } |
9. Creating componentWillUnmount() method in your class and clear the State value.
|
1 2 3 |
componentWillUnmount() { clearInterval(this.state.interval); } |
10. Creating Slideshow component in render’s return block . There are 14 different types of custom props available in this library. You can visit its GitHub page to read more about them.
dataSource : Setting up the dataSource state value in component.
position : Setting up the current image position state.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
render() { return ( <View style={styles.MainContainer}> <Slideshow dataSource={this.state.dataSource} position={this.state.position} onPositionChanged={position => this.setState({ position })} /> </View> ); } |
11. Creating Style.
|
1 2 3 4 5 6 7 8 9 10 11 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, alignItems: 'center', paddingTop: (Platform.OS) === 'ios' ? 20 : 0, backgroundColor: '#FFF8E1' } }); |
12. Complete source code for App.js File :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
import React, { Component } from 'react'; import { StyleSheet, View, Platform } from 'react-native'; import Slideshow from 'react-native-slideshow'; export default class App extends Component<{}> { constructor() { super(); this.state = { position: 1, interval: null, dataSource: [ { title: 'Title 1', caption: 'Caption 1', url: 'https://reactnativecode.000webhostapp.com/images/dahlia-red-blossom-bloom-60597.jpeg', }, { title: 'Title 2', caption: 'Caption 2', url: 'https://reactnativecode.000webhostapp.com/images/flower-impala-lily-floral-plant-65653.jpeg', }, { title: 'Title 3', caption: 'Caption 3', url: 'https://reactnativecode.000webhostapp.com/images/flowers-background-butterflies-beautiful-87452.jpeg', }, ], }; } componentWillMount() { this.setState({ interval: setInterval(() => { this.setState({ position: this.state.position === this.state.dataSource.length ? 0 : this.state.position + 1 }); }, 5000) }); } componentWillUnmount() { clearInterval(this.state.interval); } render() { return ( <View style={styles.MainContainer}> <Slideshow dataSource={this.state.dataSource} position={this.state.position} onPositionChanged={position => this.setState({ position })} /> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, alignItems: 'center', paddingTop: (Platform.OS) === 'ios' ? 20 : 0, backgroundColor: '#FFF8E1' } }); |
Screenshots:
Also Read :
React Native Get Android iOS Device Unique ID Dynamically Example
Wish You All a Very Very Happy New Year 2018
React Native Get SHA1 MD5 Key Certificate using CMD Android Studio
React Native Combine Two Strings Into One Using concat() Function
Change Text Font Size on Button Click in React Native Programmatically
react-native-slideshow, How to change title and caption custom color
plz tel me how to slide images automatically in reactjs
Sorry i haven’t tried yet in react js.
can’t read property ‘arrayOf’ of undefined
Getting blank screen
Try to install the library again .
How to use local images instead of using images from web?
Divyanshu i have not tried it yet but i will run the code again and inform you ASAP.
Hi i have a image gallery in react native i want to show the image on click with slideshow but position is not setting up please help ..
When i click on image it shows a modal in that modal i want to show clicked image with slideshow but slide show opening only same first image how can i set position to that clicked image.
Naveen just pass the image URL on image click event then show the image.
can we do this without using external libraries
Yes Rakshith we can do this by using horizontal scrollview.
can u please help me by building a automatic image slider without external library
i want code for this please sir
Thanks for comment Rakshith. You can took the code directly from library itself here is the link of theirs Slideshow.js file : https://github.com/haqiqiw/react-native-slideshow/blob/master/Slideshow.js .
how to adjust height and width for this
Shiva here is the link of library https://www.npmjs.com/package/react-native-slideshow you can find here the adjustment props.