React Native Custom Swiper Using Flatlist

React Native Custom Swiper Using Flatlist

React Native custom swiper using Flatlist .Use images or custom views for swiping, Please refer this blog to use this library.

react-native-custom-swiper

Use images or custom views for swiping, lets follow below steps to use this library.

Installation

npm i react-native-custom-swiper

Usage

import Swiper from "react-native-custom-swiper";

<Swiper
    style={{ flex: 1 }}
    currentSelectIndex={0}
    swipeData={this.state.imgArray}
    renderSwipeItem={this.renderImageSwipeItem}
    onScreenChange={this.screenChange}
/>

Example:

Write below code inside App.js File.

constructor(props) {
    super(props);
    this.state = {
        imgArray: [
            "https://dummyimage.com/600x400/00ffae/ffffff.png&text=Wel+Come",
            "https://dummyimage.com/600x400/00ffae/ffffff.png&text=React+Native",
            "https://dummyimage.com/600x400/00ffae/ffffff.png&text=Custom+Swiper",
        ],
        currentIndex: 0,
    };
}

// Handled swipe position change
screenChange = index => {
    console.log("index when change :=> \n", index);
    this.setState({ currentIndex: index });
};

// Render Rows
renderImageSwipeItem = item => {
    return (
        <View>
            <Image style={{ height: height, width: width }} source={{ uri: item }} resizeMode="contain" />
        </View>
    );
};

render() {
    return (
        <SafeAreaView style={styles.container}>
            <Text style={styles.txtStyle}> RN Custom Swiper </Text>
            <Text style={styles.txtStyle}> Current Index : {this.state.currentIndex} </Text>
            <Swiper
                style={{ flex: 1 }}
                currentSelectIndex={0}
                swipeData={this.state.imgArray}
                renderSwipeItem={this.renderImageSwipeItem}
                onScreenChange={this.screenChange}
            />
        </SafeAreaView>
    );
}

You can see output Below

Results:

RNCustomSwiper

Properties

Basic

Prop Default Type Description
swipeData [] array Array of data which user want to show in swiper
renderSwipeItem ()=>{} function Create element of swiper
currentSelectIndex 0 number Index of initial screen.
showSwipeBtn true bool For hide or show left/right button
style Default style object Change swiper style
onScreenChange (index) => {} func Function call when screen changed
leftButtonImage Default left Arrow source {required("leftArrowString")} string Modify left arrow image
rightButtonImage Default right Arrow source {required("rightArrowString")} string Modify right arrow image
containerWidth Screen width number Customise swiper screen width

Download Details:

Author: logisticinfotech

Live Demo: https://www.logisticinfotech.com/blog/custom-swiper-react-native-flatlist/

GitHub: https://github.com/logisticinfotech/react-native-custom-swiper

react-native programming react

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

Build a simple React Native Pokemon app with React-Navigation

As we start learning new technologies we want to start building something or work on a simple project to get a better understanding of the technology.

Google Analytics for React Native! Compatible with react-native-ab

react-native-google-analytics .Google Analytics for React Native! Compatible with react-native-ab.

Lifecycle hooks are not enough with React Navigation in React Native

Also use these events and API, provided by React Navigation library

React Native App Development Company in New York

Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.

React Native App Development Company in New York

Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.