Simon Buerger, Head of Development at Bluegrass Digital, talks about a particular piece of work he did for a leading fintech platform that had an existing React Native app. The client wanted to build a loan repayment calculator that enables clients to see interest and loan repayment term based on the amount. The app has sliders that allow clients to change any field and it automatically calculates the other fields. 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.
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.
LEGAL DISCLAIMER: This Message Board accepts no liability of legal consequences that arise from the Message Boards (e.g. defamation, slander, or other such crimes). All posted messages are the sole property of their respective authors. The maintainer does retain the right to remove any message posts for whatever reasons. People that post messages to this forum are not to libel/slander nor in any other way depict a company, entity, individual(s), or service in a false light; should they do so, the legal consequences are theirs alone. Bizcommunity.com will disclose authors' IP addresses to authorities if compelled to do so by a court of law.