Today we are going to discuss how we implement the swipe gesture in react native with the cell of the flat list and section list component in order to do some actions like update to-do and delete some data entry. It renders with its children within a panel and this component allows the children to swipe horizontally or right and perform some actions.

How to use it?

For using the swipeable component in our component so first, we have to install the react-native-gesture-handler package in our react native project and then import this component in the following way:

import Swipeable from ‘react-native-gesture-handler/Swipeable’;

Example with code

First step: first we write a code for a flat list.

import React from 'react'

import { StyleSheet, Text, FlatList, SafeAreaView } from 'react-native'

export default function App() {

   return (

       <SafeAreaView style={styles.container}>

           <Text style={styles.title}>TODOS</Text>

           <FlatList

           data={todos}

           keyExtractor={item => item.id}

           renderItem={({item, index})=>(

               <Text style = {styles.item}>{item.title}</Text>

           )}

           />

       </SafeAreaView>

   )

}

const styles = StyleSheet.create({

   container: {

       flex: 1,

       alignItems: "stretch"

   },

   title: {

       textAlign: "center",

       fontSize: 20,

       fontWeight: "bold",

       backgroundColor: "black",

       color: '#05db6a',

   },

   item: {

       padding: 15,

       borderBottomWidth: 1,

       borderBottomColor: '#f3f3f3'

   }

})

 

Second step: import the swipeable component in our component and wrap the child of the flat list with the Swipeable component.

import React from 'react'

import { StyleSheet, Text, FlatList, SafeAreaView } from 'react-native'

import { Swipeable } from 'react-native-gesture-handler'




export default function App() {

   return (

       <SafeAreaView style={styles.container}>

           <Text style={styles.title}>TODOS</Text>

           <FlatList

           data={todos}

           keyExtractor={item => item.id}

           renderItem={({item, index})=>(

               <Swipeable>

                   <Text style =      {styles.item}>{item.title}</Text>

               </Swipeable>

           )}

           />

       </SafeAreaView>

   )

}




const styles = StyleSheet.create({

   container: {

       flex: 1,

       alignItems: "stretch"

   },

   title: {

       textAlign: "center",

       fontSize: 20,

       fontWeight: "bold",

       backgroundColor: "black",

       color: '#05db6a',

   },

   item: {

       padding: 15,

       borderBottomWidth: 1,

       borderBottomColor: '#f3f3f3'

   }

})

 

Third step: now we have completed the use of the swipeable component but nothing can be changed so we have to pass some props like renderRightAction or renderLeftAction.

const leftAction = () => {

       <View style = {styles.leftAction}>

           <Text style = {styles.textAction}>Completed</Text>

       </View>

   }



<Swipeable

                       renderLeftActions = {leftAction}

                       onSwipeableLeftOpen = {() => console.log("opening")}

                   >

                       <View style = {styles.container}>

                           <Text style = {styles.item}>{item.title}</Text>

                       </View>

                   </Swipeable>

Now we have completed the code.