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 the user interface and increases 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 the instructions given here.
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={renderRightActions}
renderLeftActions={renderLeftActions}>
<Text>
"hello"
</Text>
</Swipeable>This is the basic usage of the 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.
I have implemented a simple swipeable row in the following react native swipeable example.
Following is the code for SwipeableRow.js.
import React from 'react';
import {Animated, StyleSheet} from 'react-native';
import {RectButton} from 'react-native-gesture-handler';
import Swipeable from 'react-native-gesture-handler/Swipeable';
const SwipeableRow = () => {
const 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>
);
};
return (
<Swipeable renderLeftActions={renderLeftActions}>
<RectButton style={styles.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',
},
});
export default SwipeableRow;
Now import the component into App.js.
import React from 'react';
import {View, StyleSheet} from 'react-native';
import {GestureHandlerRootView} from 'react-native-gesture-handler';
import SwipeableRow from './SwipeableRow';
const App = () => {
return (
<View style={styles.container}>
<GestureHandlerRootView style={{flex: 1}}>
<SwipeableRow />
</GestureHandlerRootView>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
export default App;
Following is the output of react native swipeable row example.
I hope this blog post helped you. Thank you for reading!
