How To Use Swipe Button Using React Native?
Nov 27, 2021 . Admin
Hi Guys,
Today, I will learn you how to implement swipe button example. We will check how to use swipe button. This is a short guide on implement swipe button in react native. Let's get started with how to implement swipe button in react native.
Here, I will give you full example for swipe button using react native as bellow.
Step 1 - Create projectIn the first step Run the following command for create project.
expo init MyWebtutsProjectStep 2 - Install Package
In the step,I will install rn-swipe-button.
yarn add rn-swipe-button.Step 3 - App.js
In this step, You will open App.js file and put the code.
import React from 'react'; import { SafeAreaView, View, Text, StyleSheet } from 'react-native'; import SwipeButton from 'rn-swipe-button'; const MyWebtutsProject = () => { return ( <SafeAreaView style={styles.container}> <View style={styles.container}> <Text style={styles.title}> Swipe Button </Text> <SwipeButton disabled={false} swipeSuccessThreshold={70} height={45} width={330} title="Swipe to Right" titleColor="white" shouldResetAfterSuccess="true" onSwipeSuccess={() => { alert('Swiped Successfully!'); }} railFillBackgroundColor="#c1c1c1" railFillBorderColor="#c1c1c1" thumbIconBackgroundColor="#ffffff" thumbIconBorderColor="#c1c1c1" railBackgroundColor="#767888" railBorderColor="#c1c1c1" /> </View> </SafeAreaView> ); }; export default MyWebtutsProject; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'white', padding: 10, alignItems: 'center', justifyContent: 'center', }, title: { fontSize: 28, fontWeight: 'bold', textAlign: 'center', padding: 10, }, });Step 4 - Run project
In the last step run your project using bellow command.
expo startOutput
It will help you..