How to Create a Swipeable Component in React Native

Having swipeable components in your app is very useful for actions such as deleting and archiving. The swiping ability inside your app brings down the rigid nature of user interface and increase the flexibility of app usage.

Here, let’s create a simple swipeable component in react native using react native gesture handler library. React native gesture handler is a very useful library to manage gesture actions. If you are using react navigation library then you may be already familiar with react native gesture handler.

First of all, install react native gesture handler using any of the following commands.

yarn add react-native-gesture-handler

npm install –save react-native-gesture-handler

For iOS, run the following command from the ios folder of your project.

cd ios
pod install

If you are using react native version less than 0.60 in your project then run the following command too.

react-native link react-native-gesture-handler

After that, navigate to yourProject/android/app/src/main/java/com/yourProject/MainActivity.java file and add some changes as given below. Add the lines which start with + symbol. Don’t forget to remove + symbol from your code.

package com.reactnavigation.example;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "Example";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

The installation part is over and now, let’s dive into the code.

Swipeable is a component provided by react native gesture handler which can be used to create swipeable rows. It is imported from the library as given below.

import Swipeable from 'react-native-gesture-handler/Swipeable';

<Swipeable
renderRightActions={this.renderRightActions}
renderLeftActions={this.renderLeftActions}>
 <Text>
 "hello"
</Text>
 </Swipeable>

This is the basic usage of Swipeable component where renderRightActions show components when swiped right whereas renderLeftActions render components when the row is swiped right. The Swipeable component has many props such as friction, leftThreshold, rightThreshold, onSwipeableLeftOpen, onSwipeableRightOpen, onSwipeableOpen, onSwipeableClose etc. For more details, go here.

I have implemented a simple swipeable row in the following react native swipeable example.

//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import SwipeableRow from './SwipeableRow';
// create a component
class App extends Component {
render() {
return (
<View style={styles.container}>
<SwipeableRow></SwipeableRow>
</View>
);
}
}
// define your styles
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
//make this component available to the app
export default App;
view raw App.js hosted with ❤ by GitHub
import React, { Component } from 'react';
import { Animated, StyleSheet} from 'react-native';
import { RectButton } from 'react-native-gesture-handler';
import Swipeable from 'react-native-gesture-handler/Swipeable';
export default class SwipeableRow extends Component {
renderLeftActions = (progress, dragX) => {
const trans = dragX.interpolate({
inputRange: [0, 50, 100, 101],
outputRange: [20, 0, 0, 1],
});
return (
<RectButton style={styles.leftAction} onPress={console.log('Pressed')}>
<Animated.Text
style={[
styles.actionText,
{
transform: [{ translateX: trans }],
},
]}>
Swiped!!
</Animated.Text>
</RectButton>
);
};
render() {
return (
<Swipeable
renderLeftActions={this.renderLeftActions}>
<RectButton style={styles.rectButton}>
</RectButton>
</Swipeable>
);
}
}
const styles = StyleSheet.create({
leftAction: {
flex: 1,
backgroundColor: 'cyan',
justifyContent: 'center',
},
actionText: {
color: 'black',
fontSize: 16,
},
rectButton: {
width:'100%',
height: 80,
backgroundColor: 'blue',
},
});
view raw SwipeableRow.js hosted with ❤ by GitHub

Following is the output of react native swipeable row example.

I hope this blog post helped you. Thank you for reading!

Leave a Reply

%d bloggers like this: