Optimizing React Native views for pre-animation

1. moduscreate.com @ModusCreate
Optimizing React
Native Views
Jay Garcia
@ModusJesus
@ModusCreate
http://moduscreate.com
1

2. moduscreate.com @ModusCreate
• A Framework that binds your React JS - JSX code to
• iOS Cocoa Touch
• Android UI
• Has a custom layout system
• Comprises a large suite of technologies
• Your apps run at near full speed*
• Architecture is scalable
• Framework is highly extensible
• BSD Licensed
What is react Native?
Native App
React Native Library
JavaScript Engine
React JS
React Native JS
Library
Your App Code
*Business logic in JavaScript is fast, but still interpreted

3. moduscreate.com @ModusCreate
JavaScript Native
<View /> RCTView
<ScrollView /> RCTScrollView
<Slider /> RCTSlider
<TabBar /> RCTTabBar
JSX Classes Native Classes
Reactnativebridge

4. Quick app demo

5. moduscreate.com @ModusCreate
Aiming for consistent 60FPS
•Best or User Experience
•Has to do with the human eyes & brain
•12-15fps is meh
•24fps is smooth
•30fps is better
•60fps is best
•16.666ms / frame
•Dropped frames hurts UX perception
https://www.youtube.com/watch?v=CaMTIgxCSqU

6. moduscreate.com @ModusCreate
Under the hood of this app
Main
(Navigator)
Home Menu
(View)
EventsMap
(View)
EventsList
(ListView)
GearList
(ScrollView)
GORUCKCadre
(ScrollView)
GORUCK
YouTube List
(ScrollView)
Community
YouTube List
(ScrollView)
EventDetails
(ScrollView)
GearDetails
(ScrollView)
CadreDetails
(ScrollView)
YouTubeViewer
(ScrollView)

7. https://www.youtube.com/watch?v=b3FdkETqHzU

9. moduscreate.com @ModusCreate
• JavaScript runs:
• React JS
• React Native Library
• Your app’s Business Logic
• Bridging of rendered of components to native
• Animations
*JavaScript is single threaded!
YSlow?
(25% of render speed)

10. moduscreate.com @ModusCreate
• Navigator Animations run via JavaScript
• Competes with the rendering of components
• Too much demand on the rendering engine
• Too many components
• Too many images
• Images not optimized
• OOTB, you can’t control which images are being
retrieved via http
YSlow?
(25% of render speed)

11. moduscreate.com @ModusCreate
Under the hood of this app
Main
(Navigator)
Home Menu
(View)
EventsMap
(View)
EventsList
(ListView)
GearList
(ScrollView)
GORUCKCadre
(ScrollView)
GORUCK
YouTube List
(ScrollView)
Community
YouTube List
(ScrollView)
EventDetails
(ScrollView)
GearDetails
(ScrollView)
CadreDetails
(ScrollView)
YouTubeViewer
(ScrollView)

12. Only render what
you need on first
pass!

13. moduscreate.com @ModusCreate
Unoptimized Approach
1. Home Menu demands in EventsList
2. DataSource filled with all possible records
3. ListView renders Rows per DataSource feed
• List View renders rows based on initialListSize
• Then goes on to render more rows via pageSize
• *Possible optimizations here, but they are mostly out of your control
4. Image components demanded via network, forcing rendering
Home Menu
(View)
EventsList
(ListView)

14. moduscreate.com @ModusCreate
Caused lots of blocking!!!!

15. moduscreate.com @ModusCreate
• Use InteractionManager to:
• Reduce Number of components rendered on instantiation
• Reduces number of components being rendered
• Limits number of images
Gives you full control!
How to resolve this issue?
Home Menu
(View)
EventsList
(ListView)

16. Code

17. moduscreate.com @ModusCreate
• Optimize Images
Other Tips

18. moduscreate.com @ModusCreate
• Avoid over-nesting components
Other Tips

19. moduscreate.com @ModusCreate
• Write Tight-performing JavaScript where
possible
Other Tips

20. moduscreate.com @ModusCreate

21. moduscreate.com @ModusCreate
Thank you!
Jay Garcia
@ModusJesus
@ModusCreate
jay@moduscreate.com