React Native Create Auto Image Slider Gallery Android iOS with Page Indicator

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.

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.

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.

5. Open your project’s App.js file and import StyleSheet, View and Platform component in your project.

6. Import Slideshow component from react-native-slideshow library in your project.

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.

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.

9. Creating componentWillUnmount() method in your class and clear the State value.

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.

11. Creating Style.

12. Complete source code for App.js File :

Screenshots:

Auto Image Slider Gallery

17 Comments

  1. react-native-slideshow, How to change title and caption custom color

  2. plz tel me how to slide images automatically in reactjs

  3. can’t read property ‘arrayOf’ of undefined

  4. Getting blank screen

  5. How to use local images instead of using images from web?

  6. 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 ..

  7. 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.

  8. can we do this without using external libraries

  9. can u please help me by building a automatic image slider without external library
    i want code for this please sir

  10. how to adjust height and width for this

Leave a Reply

Your email address will not be published. Required fields are marked *