Can it be done in React Native? Revolut chart using D3

William Candillon
Level Up Coding
Published in
3 min readOct 3, 2018

In this week video, we try to clone the beautiful chart that greets you when opening the Revolut app.

If you have examples of app animations and effects where you are wondering: “can it be done in React Native? 🤔”, please send me submissions.

The full snack of this example is available here. We are using D3.js and React Native SVG. Below is the data that we will be using.

First we will be using D3 to build the graph. We need to scale the x and y values to the width and height of the graph. Finally, we use the curve() function to have a nice smoothing between points.

We use D3 to build the graph line

We use this line twice in the SVG. Once to display the blue stroke. Then we can add to straight lines (the right side and bottom side of the graph container) to the path and fill it with a linear gradient.

The SVG we use to display the graph

Next, we had a ScrollView component on top of the graph so we can slide a cursor on the line. For that, we need to get the length of the path. We can use svg-path-properties for that. In order to slide exactly from one end to other on the graph line, so the ScrollView needs to be twice the size of the path length. And of course, we need to listen to the onScroll event.

Now we can listen the scroll values, get the x and y coordinates (again using svg-path-properties), and move the cursor along the graph. We use setNativeProps in order to move it without triggering a new rendering on the React side.

We move the cursor across the line of the graph

Last step, we need to slide the label above the cursor as seen below. We use a TextInput component instead of Text in order to be able to update the label value using setNativeProps.

When scroll is a 0, the label is on the right of the screen. When the value is a lineLength, the translation is 0.

To display the proper label value, we need to use scale.invert from D3 to go back from the y value to the original value (300 for instance). Invert will give us a continuous value and we can transform them into discrete value by using a new scale.

We use scale.invert() as well as a new scale with discrete values in order to show the label.

That’s all Folks!

Hope that you enjoyed this story. Looking forward to read your thoughts on this. If you are looking to start a cool React Native project, Don’t forget to checkout React Native Sketch Elements, the most comprehensive React Native starter kit.

--

--

Responses (1)