Create Auto Image Slier Gallery Android iOS with Page Indicator

Create Auto Image Slier Gallery Android iOS with Page Indicator

02/04/2019 By Administrator

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 .

npm install react-native-slideshow --save

npm install --save prop-types

Now paste following script to app.js file.

 

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'

  }

});

Create Auto Image Slier Gallery Android iOS with Page Indicator

User's Comments :

Mayank

02/08/2019

Mayank Patel comments..........

Mayank

02/08/2019

Mayank Patel comments..........

Mayank

02/08/2019

Mayank Patel comments..........

Write a comment




HAVE ANY NEW IDEA IN MIND??

[email protected]

Connect With Us