Creating swipable content cards in reactnative



Whether you are creating your next social media app or news/media content based application there will always be some page which has a list of cards on click of which you need to display some content.This tutorial assumes that you have set up environment for react-native and have basic knowledge about it.

For example in the app that I am currently developing I had a list of questions displayed in listview like this:


Lets call it as cardstack page for the rest of the tutorial.I have generated simple json using for loop in redux initialState:

And displayed  questions in the card stack using Dynamiccard from nativebase module:


Now I have purposefully not used image in my cards since I felt that simple Icon on left might serve my purpose but more on that later.Now on click on one of the card the next screen that we need to display might be similar to something like this:


But once user has finished reading the content we are forcing the user to go back to previous screen and open the next card which can be avoided most of the times by providing on screen navigation or make the cards swipable so that principle of minimum clicks is achieved similar to something like this:

First we have added two button at the bottom for easier navigation.Now it is advisable to have navigational buttons at the bottom because we generally tend to navigate our phone using our thumb when it is one hand and buttons at the bottom of screen are easier to click.

Secondly we have made the cardcontainer swipable so that user can easily navigate between cards by flick of thumb.This not only increases user engagement but also can be used to reduce the bounce rate from the app.

Lets call it cardcontent page for the rest of the tutorial.

Now lets get back to code:

I am going to use snap-carousel module for this tutorial so install it by running the following command:

I am passing id of the question as prop from onclick handler of cards in cardstack page:

I am using react-native-navigation module for this app and you can find relevant tutorial to set it up here.

Now lets us set up render method of cardstackpage:

Here firstItem takes the id passed from previous page and displays it as first page in series of eleven cards.Setting enablesnap option will scroll to the center of the nearest/active item releasing the touch swipe.

The snapToPrev and snapToNext method in handlers of button clicks are provided by the module itself.

Now lets start creating renderItem method:

First I have used Scrollview to allow vertical scrolling of card content since most of the times we need to display long text content in case of newsfeed articles.Next I have assigned random colors to each card from material palette to have better ui appearance for the app.You can customize content within the scrollview based on your app use cases.

Here is  the stylesheet I used for the app:


Final Thoughts:

My work was greatly simplified by using react-native-snap-carousel so kudos to its developers. You might want to use either swipable cards or provide navigation buttons at the bottom/center of the screen. I decided to keep both since I could not come up with a way to let the user know that the cardcontents are swipable. Any suggestions from you in this regards are most welcome. There are other modules like react-native-swiper, react-native-spring-carousel,looped carousel one of which might suits your app use cases.

Secondly I have used icons instead of images in cardstack page since I wanted my screen to render faster without waiting for images to get loaded.If you are using images in your cards then make sure that you either add a placeholder or better yet add progressive image loaders like react-native-image-progress so that user are not left with blank thumbnails especially on slow networks.

Thirdly I was feeling a little lazy so went away with using dynamic card component instead of nativebase instead of creating my own listview.In that case if your app has long list of articles/cards then consider using sglistview module instead of simple listview to optimize the memory footprint of the app.

Bonus Tip:

It is advisable to show some relevant content info within the navigational buttons so that user gets basic information about next or previous content.

You can view my other articles about reactnative,react and redux here.

Kindly upvote the article if you like it and share any kind of feedback in the comments.Stay tuned for my upcoming articles since I like to share technical stuff with others quite often.




Share post-
About Saurabh Mhatre 70 Articles
Currently working in web and hybrid application development