The Easiest 5 Ways to Start Adding a React Native Swiper to your App
Building an application on a limited-space mobile device screen is challenging. When using a list, a React Native Swiper is always a great component that preserves space on a mobile screen using a swiping technique. Other components can be hidden below the swipeable area like a delete button or any other action.
Swipers consistently yield to a better mobile user experience since the user will be able to view more data in a limited space and, in the same time, perform actions only when required.
In this post, we will focus on adding a React Native swipe functionality to images and view components through five different ways:
- Working with the React Native Swipeable plugin with swipe to delete (a view) functionality.
- Testing the React Native Swipeout (React Native Swipe List View) plugin.
- React Native Swipe using a FlatList without any plugins.
- Using the React Native Swiper plugin.
- And finally applying the React Native Swipe Image plugin.
We will build an example for each plugin and also discuss its advantages and disadvantages in details.
It’s also worthy to note that you can find the source code of the demo we are going to go through on GitHub here.
Please be noted that the demo uses React Native version 0.61.5 and that will impact some React Native swiper plugins that we’re going to use, but we will come to that later.
If your React Native project has a lower version, you can check The easiest way to upgrade React Native to version 0.60.5 or above for a detailed walkthrough on the upgrade process and how to fix the possible issues. This post also includes how to create a brand-new React Native app without using Expo.
Preparing Dummy Data and APIs
For the purposes of this post and testing different React Native swiper plugins, we will prepare some dummy data to populate our swipeable lists with. These dummy data will be in the form of two JSON files.
One JSON file carries out some dummy images as shown below:
And the other file contains a list of persons as follows:
Then call them out using an API class as shown below:
Of course, in a real project the above method would be replaced by live REST services or other data sources.
Integrating the React Native Swipeable plugin
The next interesting plugin is react-native-swipeable. The swipeable plugin can only swipe one child component, which means you will need to render as many swipeable components as required on your screen and every one of them will swipe the component underneath.That will freely give us the ability to add a functionality like the swipe to delete but you will have to rely on your styling skills to render that appropriately as shown below.
To render a list like the one shown in the screenshot above, you should have your code close to this:
Notice that the swipeable plugin expect two properties:
rightButtons:which is an array of components as shown in the code snippet below. The reason behind the array type is, it allows placing multiple components on swipe. However, in this demo we just needed a delete button and that’s why it returns only a single-element array.
rightButtonWidth:which is a number that represents how far you need your component to swipe to the right.
Here’s the code snippet that renders that right buttons:
The React Native Swipeable plugin also allows you to place left buttons with left button width using the
leftButtonWidth properties respectively.
The plugin swipes from both sides, but we needed only the right side for the purpose of this post.
Finally, as shown in the previous code snippet, you can easily handle the “delete” operation when the delete button is clicked. For example, here’s how to delete a person from the list immutably and save it back to the local state:
Note: If your React Native version is 0.60 or higher, then using this plugin will, again, show warnings that some lifecycle hooks like
componentWillUpdatehave been deprecated.
Testing the React Native Swipeout Plugin
If you open to the react-native-swipeout documentation, it’s clearly mentioned that it’s no longer supported and the best and more efficient alternative to the previous plugin is the react-native-swipe-list-view plugin.
This plugin expects a list of objects through the
data property, then gives you the freedom to render your items through the
The great deal using this plugin is, it’s compatible with React Native version 0.60 or higher. It doesn’t show any warnings, unlike the previous plugin.
To use the React Native swipe list view plugin, your code should look like the following snippet:
It’s that simple. However, it uses a different technique revealing the hidden components on swipe. It uses the
renderHiddenItem to give you the ability to render a complete hidden row under the swipeable component.
Then you can use styling to either show the hidden component - the delete button in this case - on the left or on the right as shown in the below code snippet:
Then styling the delete button as follows:
alignSelf: ‘flex-end’style that throws the delete button far on the right.
React Native Swipe using a FlatList
In this section, we are going to build a custom React Native Swiper without any plugins. We are going to only use the FlatList component, configure it to work as a swiper, then finally apply some styling to it.
Here’s an example of what we are going to build. If you clone the demo’s Git repository on your local machine and run the application, you will get a similar result to the below screenshot.
First, you need to import the
FlatList from the
react-native library then configure your
FlatList as shown in the code snippet below:
FlatListproperties are required in order to display a swipeable horizontal image list as shown in the previous screenshot:
horizontal: This property will display the
FlatListin a horizontal direction instead of the vertical default one.
pagingEnabled: Allowing paging is required side by side with the horizontal.
keyExtractor: A unique key for every item should be passed to this property. This could be your item ID or any type of unique identifiers. Just note that it must be a string value.
showHorizontalScrollIndicator: This property must be turned off (set to false) so that the
FlatListdoes not display any kind of horizontal scroll bars while you scroll your items.
One important caveat using a
FlatList here is that the width of the
FlatList must be equal to the screen width only. That is important for the
FlatList to be able to force displaying one item only on the screen while swiping.
FlatList grows with more list items, it takes more width and it will certainly pass the screen width leading to an undesirable behavior showing the edge of two items on the screen once the scrolling stops.
You can find a similar issue reported on this StackOverflow question.
Here’s an example of what we are trying to avoid. Without limiting the
FlatList width to the mobile device screen width, the
FlatList could stop scrolling at something like this:
To limit the width of the
FlatListto the mobile device screen width, we used the Dimensions component from the
react-nativelibrary as shown in the below snippet:
As you notice, the width is set to the local state in the
componentDidMountlifecycle hook, then the local state width variable can be passed to the
FlatListwidth using the style property.
We recommend that you look at this example to put it all together building the swiping
FlatList with all the above configurations covered.
Using React Native Swiper Plugin
The next approach to swipe components is using the react-native-swiper plugin. This plugin is extremely easy to implement and understand.
Basically you will need to list the group of components that you would need them to be swipeable between the
<Swiper>plugin opening and closing tags as shown in the snippet below:
There’s nothing more needed to swipe components more than that. Notice that the swiper plugin also adds some navigational buttons below your swipeable components.
Note: By the time of this writing, if you’re using React Native version 0.60 or above, you will get a warning on the screen that is close to the below screenshot:
Obviously, the plugin uses either
componentWillReceiveProps which are deprecated starting from React Native version 0.60+.
If your objective is to swipe images, we found another interesting plugin that swipes only images and it complies with the latest React Native versions.
Applying the React Native Swipe Image Plugin
The react-native-swipe-image plugin is not so popular but, it swipes images flawlessly without any warnings or issues.
To test this plugin your code should something like the following code snippet:
A few important things to note before using this plugin:
imagesproperty expects a JSON array list of objects that is expected to have two properties:
name. They must be named like that to let the plugin work.
- You must implement both callbacks
swipeTop, otherwise the plugin will show an error. If you don’t need them, just try adding some
console.log()statements as shown above.
nameproperty values will overlay on the image as shown in the screenshot above.
If the above constraints do not comply with your requirements, you can try another more popular plugin like react-native-gallery-swiper.
We recommend that you take a look at the React Native Gallery Swiper plugin as it supports more nice features like:
- Supporting large lists flawlessly.
onEndReachedevent, which indicates the possibility that this plugin is built on top of a
- Gesture controls, like pinch to zoom, taps and double taps.
- Including a zoom mode to view a zoomed version of the image.
- And much more.
After all, Which Plugin Should you Use and Works Best for your Application?
Let’s take a look at the popularity of the plugins we used in this post first. We will measure the popularity by the weekly downloads of each plugin from npm.
It appears that react-native-swiper for swiping images is the most popular plugin, but it’s not fully compatible with React Native version 0.60 or above, while react-native-swipe-image is the least popular by 25 weekly downloads only but it’s more recommended being used over react-native-swiper since it’s compatible with the latest React Native versions.
On another note, react-native-swipeout for swiping components is more popular than react-native-swipe-list-view although it’s been declared that it’s deprecated. But, react-native-swipe-list-view is more popular than react-native-swipeable and is compatible with the latest React Native versions.
So despite the popularity of these plugins, we recommend that you use react-native-swipe-image for swiping images and use react-native-swipe-list-view for swiping components and swipe-to-delete functionality at the time of writing this post.
Swiping components in a React Native or any mobile application technology is necessary and is a very common functionality that is required by most of the use cases as it yields to a better user experience reserving more screen space for other functionalities.
We recommend using both plugins mentioned in the previous section for swiping images and swiping components with swipe-to-delete, if you have another point of view, please, feel free to share by dropping us a comment.