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.

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

expo init MyWebtutsProject

In the step,I will install rn-swipe-button.

yarn add rn-swipe-button.

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,
  },
});

In the last step run your project using bellow command.

expo start

It will help you..