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 Creating Image Gallery using JSON iOS Android Tutorial
React Native Auto Scale Image Width Height Dimension Example Tutorial
React Native Upload Image to Server using PHP MySQL iOS Android Tutorial
React Native Pick Image From Camera and Gallery Android iOS Tutorial
Add Show Image Icon Inside Button in React Native Application
