In this tutorial we will learn about React Native Swiper with some examples. Swiper represents to show the images and other content in the swipe way.
What Is Swiper In React Native?
react-native-swiper is a library which is used to swipe the content like image or full screen. We can swipe whole screen or some part of the screen. Its like the image slider which is shown in the below example.
Install Dependency
First of all install the swiper dependency using the below command in your project’s terminal.
> npm i react-native-swiper
#or
>npm i react-native-cli -g
You can see more, about this dependency from the npmjs website from here to use extra features.
Full Example
Import the Swiper class in your project’s class in which you want to use Swiper as below.
import Swiper from ‘react-native-swiper’;
Then use the swiper tag inside the screen. Create number of slides as you want to show. Each slide can be style differently if you want.
import React, { Component, } from 'react';
import { View, StyleSheet, Text } from "react-native";
import Swiper from 'react-native-swiper';
export default class TestClass extends Component {
render() {
return (
<Swiper style={styles.wrapper} showsButtons={true}>
<View style={styles.slide1}>
<Text style={styles.text}>Swiper Demo</Text>
</View>
<View style={styles.slide2}>
<Text style={styles.text}>Next</Text>
</View>
<View style={styles.slide3}>
<Text style={styles.text}>And simple</Text>
</View>
</Swiper>
);
}
}
const styles = StyleSheet.create({
wrapper: {},
slide1: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#9DD6EB'
},
slide2: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#97CAE5'
},
slide3: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#92BBD9'
},
text: {
color: '#fff',
fontSize: 30,
fontWeight: 'bold'
}
})
Result
See the output of the above example. You can use the above code directly in your project.
Explanation of Swiper In React Native
User the Swipe tag in you code to show the swiper. You can swipe entire screen or some part of the screen. In the above example we swiped full screen by using the <Swipe></Swipe> tag. You have to create the number of slides inside this tag. You can use images as number of slide. If you want use more features, click here.
Thank you for visiting the page on FlutterTPoint. Please visit more useful react native tutorial which will help to grow your development skills. See android flutter tutorials also.
For any query, you can comment in the comment section below. We will try to reply as soon as possible.