SlideShare a Scribd company logo
moduscreate.com @ModusCreate
Optimizing React
Native Views
Jay Garcia
@ModusJesus
@ModusCreate
http://moduscreate.com
1
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
moduscreate.com @ModusCreate
JavaScript Native
<View /> RCTView
<ScrollView /> RCTScrollView
<Slider /> RCTSlider
<TabBar /> RCTTabBar
JSX Classes Native Classes
Reactnativebridge
Quick app demo
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
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)
https://www.youtube.com/watch?v=b3FdkETqHzU
Optimizing React Native views for pre-animation
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)
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)
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)
Only render what
you need on first
pass!
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)
moduscreate.com @ModusCreate
Caused lots of blocking!!!!
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)
Code
moduscreate.com @ModusCreate
• Optimize Images
Other Tips
moduscreate.com @ModusCreate
• Avoid over-nesting components
Other Tips
moduscreate.com @ModusCreate
• Write Tight-performing JavaScript where
possible
Other Tips
moduscreate.com @ModusCreate
moduscreate.com @ModusCreate
Thank you!
Jay Garcia
@ModusJesus
@ModusCreate
jay@moduscreate.com

More Related Content

PPTX
Creating books app with react native
PDF
Intro to react native
PPTX
React Native for ReactJS Devs
PDF
Putting the Native in React Native - React Native Boston
PDF
From zero to hero with React Native!
PDF
An iOS Developer's Perspective on React Native
PPTX
React native - React(ive) Way To Build Native Mobile Apps
PDF
Experiences building apps with React Native @DomCode 2016
Creating books app with react native
Intro to react native
React Native for ReactJS Devs
Putting the Native in React Native - React Native Boston
From zero to hero with React Native!
An iOS Developer's Perspective on React Native
React native - React(ive) Way To Build Native Mobile Apps
Experiences building apps with React Native @DomCode 2016

What's hot (20)

PDF
Introduction to react native
PDF
Getting Started with React Native (and should I use it at all?)
PPTX
React Native
PPTX
React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...
PDF
React Native in a nutshell
PPTX
Hands on react native
PDF
Introduction to React Native
PDF
A tour of React Native
PDF
Lo mejor y peor de React Native @ValenciaJS
PDF
React native-meetup-talk
PDF
Алексей Волков "Введение в React Native"
PDF
When to (use / not use) React Native.
PDF
What's This React Native Thing I Keep Hearing About?
PDF
React-Native for multi-platform mobile applications @ Codemotion Rome 2017
PPTX
React Native
PDF
Experiences building apps with React Native @UtrechtJS May 2016
PDF
Introduction to React Native & Rendering Charts / Graphs
PDF
Intro To React Native
PPTX
React Native
Introduction to react native
Getting Started with React Native (and should I use it at all?)
React Native
React Native - Unleash the power of React in your device - Eduard Tomàs - Cod...
React Native in a nutshell
Hands on react native
Introduction to React Native
A tour of React Native
Lo mejor y peor de React Native @ValenciaJS
React native-meetup-talk
Алексей Волков "Введение в React Native"
When to (use / not use) React Native.
What's This React Native Thing I Keep Hearing About?
React-Native for multi-platform mobile applications @ Codemotion Rome 2017
React Native
Experiences building apps with React Native @UtrechtJS May 2016
Introduction to React Native & Rendering Charts / Graphs
Intro To React Native
React Native
Ad

Viewers also liked (13)

PDF
Introduction to React Native
PDF
React native - What, Why, How?
PDF
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
PPTX
Adaptive vs Responsive Layouts
PPTX
Angular js
PDF
React Native GUIDE
PDF
The age of Augmented Humanity
PDF
React + Redux for Web Developers
PDF
React Native를 사용한
 초간단 커뮤니티 앱 제작
PPT
Different types of mobile apps
PDF
Responsive Webdesign
PDF
React Native 入門
PDF
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
Introduction to React Native
React native - What, Why, How?
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
Adaptive vs Responsive Layouts
Angular js
React Native GUIDE
The age of Augmented Humanity
React + Redux for Web Developers
React Native를 사용한
 초간단 커뮤니티 앱 제작
Different types of mobile apps
Responsive Webdesign
React Native 入門
React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi
Ad

Similar to Optimizing React Native views for pre-animation (20)

PDF
Server rendering-talk
PPTX
Sug bangalore - headless jss
PDF
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
PDF
MidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
PDF
jQuery: The World's Most Popular JavaScript Library Comes to XPages
PDF
ReactJS vs AngularJS - Head to Head comparison
PPTX
React basic by Yoav Amit, Wix
PPTX
Introduction to react native with redux
PDF
[D2 campus seminar]웹브라우저 엔진
ODP
Cvcc performance tuning
PDF
Mobile applications in a new way with React Native
PDF
Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack...
PPTX
Meteor meetup
PDF
Creating Modular Test-Driven SPAs with Spring and AngularJS
PPTX
One code Web, iOS, Android
PPTX
React.js at Cortex
PDF
React && React Native workshop
PDF
Tackling performance in the WordPress ecosystem at scale
PPT
State of jQuery - AspDotNetStorefront Conference
PPTX
Tech io spa_angularjs_20130814_v0.9.5
Server rendering-talk
Sug bangalore - headless jss
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
MidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
jQuery: The World's Most Popular JavaScript Library Comes to XPages
ReactJS vs AngularJS - Head to Head comparison
React basic by Yoav Amit, Wix
Introduction to react native with redux
[D2 campus seminar]웹브라우저 엔진
Cvcc performance tuning
Mobile applications in a new way with React Native
Mobile applications in a new way with React Native (by Eugene Zharkov) - Hack...
Meteor meetup
Creating Modular Test-Driven SPAs with Spring and AngularJS
One code Web, iOS, Android
React.js at Cortex
React && React Native workshop
Tackling performance in the WordPress ecosystem at scale
State of jQuery - AspDotNetStorefront Conference
Tech io spa_angularjs_20130814_v0.9.5

Recently uploaded (20)

PPTX
Materi_Pemrograman_Komputer-Looping.pptx
PDF
System and Network Administraation Chapter 3
PPTX
Introduction to Artificial Intelligence
PDF
Adobe Premiere Pro 2025 (v24.5.0.057) Crack free
PDF
Flood Susceptibility Mapping Using Image-Based 2D-CNN Deep Learnin. Overview ...
PPTX
Operating system designcfffgfgggggggvggggggggg
PPTX
Essential Infomation Tech presentation.pptx
PDF
medical staffing services at VALiNTRY
PPT
Introduction Database Management System for Course Database
PDF
Design an Analysis of Algorithms II-SECS-1021-03
PDF
Design an Analysis of Algorithms I-SECS-1021-03
PDF
How Creative Agencies Leverage Project Management Software.pdf
PPTX
Online Work Permit System for Fast Permit Processing
PPTX
ManageIQ - Sprint 268 Review - Slide Deck
PPT
JAVA ppt tutorial basics to learn java programming
PPTX
Transform Your Business with a Software ERP System
PDF
Understanding Forklifts - TECH EHS Solution
PPTX
ISO 45001 Occupational Health and Safety Management System
PDF
Claude Code: Everyone is a 10x Developer - A Comprehensive AI-Powered CLI Tool
PDF
AI in Product Development-omnex systems
Materi_Pemrograman_Komputer-Looping.pptx
System and Network Administraation Chapter 3
Introduction to Artificial Intelligence
Adobe Premiere Pro 2025 (v24.5.0.057) Crack free
Flood Susceptibility Mapping Using Image-Based 2D-CNN Deep Learnin. Overview ...
Operating system designcfffgfgggggggvggggggggg
Essential Infomation Tech presentation.pptx
medical staffing services at VALiNTRY
Introduction Database Management System for Course Database
Design an Analysis of Algorithms II-SECS-1021-03
Design an Analysis of Algorithms I-SECS-1021-03
How Creative Agencies Leverage Project Management Software.pdf
Online Work Permit System for Fast Permit Processing
ManageIQ - Sprint 268 Review - Slide Deck
JAVA ppt tutorial basics to learn java programming
Transform Your Business with a Software ERP System
Understanding Forklifts - TECH EHS Solution
ISO 45001 Occupational Health and Safety Management System
Claude Code: Everyone is a 10x Developer - A Comprehensive AI-Powered CLI Tool
AI in Product Development-omnex systems

Optimizing React Native views for pre-animation