Building a Facebook Paper-like UI with React Native

I built a working copy of the open-close cards carousel from the original Facebook Paper app as a technical demo. It uses the Animated library and React Native.

One of the myths people form about React Native when you tell them about it is that it would be slow. This is because typically one would go about explaining “it allows you to build yours apps in Javascript”, from which people conclude that its Javascript as in a web-browser’s javascript.

But the truth is that it’s all native interface elements. Elements of the native UI SDK of Android and iOS are instantiated each time you build a UI with React Native. Hence the view heirarchy remains light weight compared to a heavy DOM heirarchy.

What follows is a look into how I went about building a basic copy of one of the key interactions from the Facebook Paper app. The ability to zoom in and out of a carousel of cards and be able to stop the animation while it is in progress.

Here is what it looks like:

Actual screenshots from the working demo.

The screenshots above are from what I have built. On the left is the list of cards currently zoomed out. You can swipe through them. You can also pull them up and have them go full screen. In which case, now you can paginate through them full screen, one by one. Compare this with a similar interaction model on Facebook Paper below.

The zoomed out carousel of cards at the bottom.

It starts with instantiating two state variables. One to store the pan values and another to store progress of the docking animation from 0 to 1. This progress variable is interpolated based on the pan values.

let pan = new Animated.ValueXY();
this.state = {
  pan: pan,
  dockAnimation: pan.y.interpolate({
    inputRange: [-300, 0],
    outputRange: [0, 1],
  })
}