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.


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


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.

Now we have completed the code.

Leave a Reply