React Native Reanimated and React Native Gesture Handler

Simon Buerger, Head of Development at Bluegrass Digital, talks about a particular piece of React Native app development work he did for a leading fintech platform. As part of the work, the client wanted to build a loan repayment calculator that enables clients to see interest and loan repayment terms based on their outstanding balances. We introduced animation through adjustment sliders that allow clients to change any field and automatically calculate the other fields as you move. Simon shares his technical knowledge on building the app, as well as working with React Native Reanimated and React Native Gesture Handler.

Q: What was your approach?

A: There were two libraries that I stumbled upon namely React Native Reanimated and React Native Gesture Handler. I contributed to React Native Reanimated and I added a format primitive node which allowed me to take the animated value and pass in a string format. iOS and Java both support this concept of string formatting and it is standardised across the platforms. I then added a format node to the underlying Reanimated library. This worked out really well and it meant we could format and display those numbers without crossing the react-native bridge.

Q: What is React Native Reanimated & React Native Gesture Handler?

A: You want to run most of the graphical and animation-type content on a different thread to where you’re crunching numbers or doing heavy data manipulation. This will prevent them from blocking each other and causing jitters. In React Native there is a built-in animated component that you can do all sorts of great animations in and it can run on the UI thread. What makes React Native amazing and is also its primary limitation is that it has a bridge between what’s on the native side, i.e. the underlying Swift and Java code, and the React UI side. The UI side can pass messages across the bridge to the native side and vice versa.

The great thing about Reanimated and Gesture Handler is that it’s designed to solve that problem. What they did is create a bunch of primitive node types that are effectively functions that are mirrored between the JavaScript side and the native code. What that means is that I can take these primitive nodes and declare relationships between values and interactions without ever crossing the bridge. The native code effectively receives a blueprint for how to handle the complex relationships between these interactions and values and then takes over the rest.

So, the idea with Reanimated and Gesture Handler is that you can make everything run on the native UI thread and the bottleneck of crossing the bridge for every interaction and value relationship disappears.

Q: What were some of the challenges you faced?

A: I experienced a few challenges. The first was the little water droplet when you tap on the slider (refer to video). It has a curve associated with it that makes it look and animate quite naturally. It pops out above your finger so you can still see the number. I had to get quite deeply into custom SVG and learn about cubic and quadratic Bezier curves to approximate that semi-circle (it’s harder than you might think) and then also animate it “fluidly” based on that tap gesture.

Another issue was with the present value calculations. On their own, these calculations are relatively straightforward. However, to do those calculations on the native thread and have the relationships I discussed above, I needed to use the Reanimated primitive nodes. I needed to convert all those present value calculations into Reanimated node calculations which took a lot more time than I anticipated. But in the end, I think the result speaks for itself, it was a really great build and was a lot of fun to do.