React Native Development (Part 2): Improving Performance
We continue our investigation of the React Native framework's architecture with an to improving the framework's performance.
Join the DZone community and get the full member experience.Join For Free
Keep Passes Over the Bridge to the Minimum for Maximum Performance
This brings us to the conclusion that the key to writing performant React Native apps is to design them to keep passes over the bridge to a minimum.
Let’s consider a simple app. The app screen has a list of cards. The user can scroll that list of cards. An image welcomes the user to the app.
We're gonna have two cool effects here on this image: the first effect is as the user is scrolling the list of cards, the image dissolves to the background and the second effect is an over scroll effect if the user is scrolling downwards when it is already at the top, the image zooms.
Set State From JS on Every Scroll Event
First of all, we have the ListView and if you actually hold a ScrollView, you can actually supply the scroll view by yourself to ListView with a prop called RenderScrollComponent.
On the ScrollView that I'm supplying, I'm hooking up the own ScrollEvent. And the implementation for this event would just implement our effect. Our own ScrollEventHandler will run every time the scroll position changes. It simply takes the scroll position and checks if the scroll position is positive. If so, the user is scrolling downwards and then we want to dissolve. So we will change the opacity from one to zero. If the scroll position is negative, the user is scrolling upwards in an over scroll. So we'll change the scale from 1 to 1.4.
Performance Analysis: Passes Over the Bridge
When we set the onScroll event, we actually have to go over the bridge and set down scrolling native because the view underneath is a native view. We set the scroll, the user starts scrolling, and we have a scroll event. The scroll event is a native event because all views are native.
We have to go once again and update the view itself. On the next frame, the user scrolls a little bit more.
Conclusion: Data Cross the Bridge on Every Frame
Published at DZone with permission of Aditya Modi. See the original article here.
Opinions expressed by DZone contributors are their own.