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
