How To Use Swipe Button Using React Native?


Share:
Published By: Admin, Published On: Nov 27, 2021, Category: React Native
react_native_swipe_button.png

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 project

In the first step Run the following command for create project.

expo init MyWebtutsProject
Step 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 start
Output

It will help you..

Share: