Slider Image Gallery in React Native Example

Slider Image Gallery In react native

Hii Guyz! Today in this blog series i am going to show you how you can make a Slider Image Gallery React Native. We will use Gallery component provided by react-native-image-gallery to make a Slider Image Gallery in React Native.

Image Gallery is the most common thing in an application. To make an Image gallery in React Native we have a number of options available.

How to use Gallery Component?

<Gallery
  style={{ flex: 1, backgroundColor: 'black' }}   //style of Gallery
  initialPage="1"                                 //initial image to show
  images={this.state.items}                       //Image items to show in Slider
/>

It is very easy to use component. We can easily swipe Left /Right to see images.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run

npm install -g react-native-cli

Run the following commands to create a new React Native project

react-native init ProjectName

If you want to start a new project with a specific React Native version, you can use the –version argument:

react-native init ProjectName --version X.XX.X

react-native init ProjectName --version react-native@next

This will make a project structure with an index file named App.js in your project directory.

Installation of Dependency

To use Gallery we have to install react-native-image-gallery package.

To install this open the terminal and jump into your project using.

cd ProjectName

Run the following command.

npm install react-native-image-gallery --save

This command will copy all the dependencies into your node_module directory, You can find the directory in node_module the directory named react-native-image-gallery.

–save is optional, it is just to update the react-native-image-gallery dependency in your package.json file.

Code for Slider Image Gallery

Now Open App.js in any code editor and replace the code with the following code

App.js

/*This is an Example of Slider Image Gallery in React Native*/
import React from 'react';
//import React in our project
import Gallery from 'react-native-image-gallery';

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      imageuri: '',
      ModalVisibleStatus: false,
    };
    this.state = { items: [] };
  }
  componentDidMount() {
    var that = this;
    let items = Array.apply(null, Array(60)).map((v, i) => {
      //Loop to make image array to show in slider    
      return {
        source: {
          uri: 'http://placehold.it/200x200?text=' + (i + 1),
        },
      };
    });
    that.setState({ items });
  }
  render() {
    //Image Slider
    return (
      <Gallery
        style={{ flex: 1, backgroundColor: 'black' }}
        initialPage="1"
        //initial image to show
        images={this.state.items}
      />
    );
  }
}

Tags :

Website Designing Company in Delhi || Magento Development Company