React Native Swipe Image code with a demo.

React Native | Swipe Image code with a demo and code step by step using React Native App.

Step 1 : Installation

npm install react-native-swipe-image

yarn add react-native-swipe-image

Step 2 : Understand the complete React Native code script as below:

import React from 'react';
import { View } from 'react-native';
import Swiper from 'react-native-swipe-image';

export default class App extends React.Component {
     state = {
      images : [
        { name:"Image Title 1", url: "image_url1" },
        { name:"Image Title 2", url: 'image_url2' },
        { name:"Image Title 3", url: 'image_url3' }
      ]
   }

  bottom(e) {
    alert('Swipe Footer Bottom')
  }

  top(e) {
    alert('Swipe Header Top')
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <Swiper
          images={this.state.images}
          swipeBottom={(e) => this.bottom(e)}
          swipeTop={(e) => this.top(e)}
          imageHeight={number}
          textSize={number}
          textBold={boolean}
          textColor={String}
          textUnderline={boolean}
        />
      </View>
    );
  }
}

Any query? Please share your thoughts in the comments below. Glad to help you!
Thanks!

Was this page helpful? Do not forget to share this post!