Optimizing React Native views for pre-animation

moduscreate.com @ModusCreate

Optimizing React Native ViewsJay Garcia

@ModusJesus@ModusCreatehttp://moduscreate.com

1

http://moduscreate.com



• 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



JavaScript Native

<View /> RCTView

<ScrollView /> RCTScrollView

<Slider /> RCTSlider

<TabBar /> RCTTabBar

JSX Classes Native Classes

React native bridge


Quick app demo


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 perceptionhttps://www.youtube.com/watch?v=CaMTIgxCSqU


https://www.youtube.com/watch?v=CaMTIgxCSqU


Under the hood of this appMain

(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)


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

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


• 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)



• 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)



Under the hood of this appMain

(Navigator)

Home Menu (View)

EventsMap (View)


GearList (ScrollView)

GORUCKCadre (ScrollView)

GORUCK YouTube List (ScrollView)

Community YouTube List (ScrollView)

EventDetails (ScrollView)

GearDetails (ScrollView)

CadreDetails (ScrollView)

YouTubeViewer (ScrollView)


Only render what you need on first pass!


Unoptimized Approach1. Home Menu demands in EventsList2. DataSource filled with all possible records3. 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)




Caused lots of blocking!!!!



• 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)




• Optimize Images

Other Tips



• Avoid over-nesting components

Other Tips



• Write Tight-performing JavaScript where possible

Other Tips



Thank you!Jay Garcia

@ModusJesus@[email protected]


Optimizing React Native views for pre-animation

Software

Transcript of Optimizing React Native views for pre-animation