SlideShare a Scribd company logo
The Tools to get you started with React Na4ve
Robert Tochman-Szewc
© Robert Tochman-Szewc, 2017 1
My Background
• Started with React Na/ve in May 2016 on side projects
• Turned this into a full-/me job beginning of 2017
• Released three apps with RN, most recently Blue Boat Log
© Robert Tochman-Szewc, 2017 2
© Robert Tochman-Szewc, 2017 3
Recap: React Na*ve
• Same thing as React
• But with na2ve components (<View> instead of <div>)
• Benefits: Smooth Android and iOS apps using familiar JS
ecosystem
• Downsides: ...
© Robert Tochman-Szewc, 2017 4
Step 1: The Sandbox
• Expo allows you to get familiar with RN easily
• Write code, test on the device
• No work with iOS/Android ecosystem required
• No access to NaCve Modules
© Robert Tochman-Szewc, 2017 5
© Robert Tochman-Szewc, 2017 6
Step 2: Connect the Dots
• How to switch between views? No react-router
• Instead: react-naviga9on
• Want to manage state be<er? Here's how:
• State Management: redux
• Router: react-na9ve-router-flux
© Robert Tochman-Szewc, 2017 7
Step 3: Visuals
• Special CSS syntax based on Flexbox
• Out of the box: No styled components
• Build your own or ...
• Use one of the alterna@ves: react-na@ve-ui-kiDen
© Robert Tochman-Szewc, 2017 8
Step 4: NATIVE
• There is a sea of libraries out there
• Background GPS, Crashly<cs/Fabric, Google/FB Signin,
FontAwesome/Material Icons, LoEe, SQLite, File System
• Everything you can do na<vely can be done with RN
• OLen as easy as
yarn install <native library>
react-native link <native library>
© Robert Tochman-Szewc, 2017 9
Step 4: NATIVE (2)
• Possibly more difficult, but allows insight into iOS/Android
tooling
• Problem: Many projects are/become abandoned
• Learn to place bets and switch every now and again
© Robert Tochman-Szewc, 2017 10
Step 5: Test Automa/on
• Jest
• Mock Na-ve Modules by hand
• Mock states and use snapshots
• Will save you countless hours debugging
© Robert Tochman-Szewc, 2017 11
© Robert Tochman-Szewc, 2017 12
Bonus Rant
Present since at least May 2016, s3ll not reliably solved:
Text Input
© Robert Tochman-Szewc, 2017 13
Thanks!
rob@rtsworks.com
© Robert Tochman-Szewc, 2017 14
Links
• Expo
• React Naviga0on
• Redux
• React Na0ve Router Flux
• React Na0ve UI Ki:en
• Jest
© Robert Tochman-Szewc, 2017 15

More Related Content

What's hot

Embracing the Future
Embracing the FutureEmbracing the Future
Embracing the Future
Jemuel Young
 
Describing a process
Describing a processDescribing a process
Describing a process
Itzel Mosso
 
ESNext, service workers, and the future of the web
ESNext, service workers, and the future of the webESNext, service workers, and the future of the web
ESNext, service workers, and the future of the web
Jemuel Young
 
Continuous database deployment
Continuous database deploymentContinuous database deployment
Continuous database deployment
Mike (Michael) Acord
 
Coolblue Behind the Scenes | Pat Hermens - On the shoulders of giants.
Coolblue Behind the Scenes | Pat Hermens - On the shoulders of giants.Coolblue Behind the Scenes | Pat Hermens - On the shoulders of giants.
Coolblue Behind the Scenes | Pat Hermens - On the shoulders of giants.
Coolblue
 
Modern Messaging for Distributed Systems
Modern Messaging for Distributed SystemsModern Messaging for Distributed Systems
Modern Messaging for Distributed Systems
Andrea Rabbaglietti
 
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
danwrong
 
Performance Testing w/ WebPage Test Private Instance (DrupalCamp Ohio)
Performance Testing w/ WebPage Test Private Instance (DrupalCamp Ohio)Performance Testing w/ WebPage Test Private Instance (DrupalCamp Ohio)
Performance Testing w/ WebPage Test Private Instance (DrupalCamp Ohio)
Bill Condo
 
How To Migrate a Rails App From a Dedicated Server Into Cloud Environment? - ...
How To Migrate a Rails App From a Dedicated Server Into Cloud Environment? - ...How To Migrate a Rails App From a Dedicated Server Into Cloud Environment? - ...
How To Migrate a Rails App From a Dedicated Server Into Cloud Environment? - ...
Visuality
 
What is octohost?
What is octohost?What is octohost?
What is octohost?
Darron Froese
 
Website Speed :: Fox Valley Computing Professionals, September 2014
Website Speed :: Fox Valley Computing Professionals, September 2014Website Speed :: Fox Valley Computing Professionals, September 2014
Website Speed :: Fox Valley Computing Professionals, September 2014
Straight North
 
Node.js Ignite Talk
Node.js Ignite TalkNode.js Ignite Talk
Node.js Ignite Talk
Phillip Johnsen
 
Speed up your Serverless development flow
Speed up your Serverless development flowSpeed up your Serverless development flow
Speed up your Serverless development flow
Efi Merdler-Kravitz
 
devworkshop-04_13_2016-ucsdnow-presentation
devworkshop-04_13_2016-ucsdnow-presentationdevworkshop-04_13_2016-ucsdnow-presentation
devworkshop-04_13_2016-ucsdnow-presentation
Alex Wu
 
How to practice TDD without shooting yourself in the foot
How to practice TDD without shooting yourself in the footHow to practice TDD without shooting yourself in the foot
How to practice TDD without shooting yourself in the foot
Dennis Doomen
 
Strong Consistency in Databases. What does it actually guarantee? - Andy Goo...
 Strong Consistency in Databases. What does it actually guarantee? - Andy Goo... Strong Consistency in Databases. What does it actually guarantee? - Andy Goo...
Strong Consistency in Databases. What does it actually guarantee? - Andy Goo...
DevOpsDays Tel Aviv
 
Continuous Integration
Continuous IntegrationContinuous Integration
Continuous Integration
Kelli Mohr
 
Node Summit - Release the Kraken
Node Summit - Release the KrakenNode Summit - Release the Kraken
Node Summit - Release the Kraken
Jeff Harrell
 
Tavernalc: How to transform your OpenOffice Calc into a grid.
Tavernalc: How to transform your OpenOffice Calc into a grid.Tavernalc: How to transform your OpenOffice Calc into a grid.
Tavernalc: How to transform your OpenOffice Calc into a grid.
Alexandro Colorado
 

What's hot (19)

Embracing the Future
Embracing the FutureEmbracing the Future
Embracing the Future
 
Describing a process
Describing a processDescribing a process
Describing a process
 
ESNext, service workers, and the future of the web
ESNext, service workers, and the future of the webESNext, service workers, and the future of the web
ESNext, service workers, and the future of the web
 
Continuous database deployment
Continuous database deploymentContinuous database deployment
Continuous database deployment
 
Coolblue Behind the Scenes | Pat Hermens - On the shoulders of giants.
Coolblue Behind the Scenes | Pat Hermens - On the shoulders of giants.Coolblue Behind the Scenes | Pat Hermens - On the shoulders of giants.
Coolblue Behind the Scenes | Pat Hermens - On the shoulders of giants.
 
Modern Messaging for Distributed Systems
Modern Messaging for Distributed SystemsModern Messaging for Distributed Systems
Modern Messaging for Distributed Systems
 
The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)The Mysteries Of JavaScript-Fu (@media Europe Edition)
The Mysteries Of JavaScript-Fu (@media Europe Edition)
 
Performance Testing w/ WebPage Test Private Instance (DrupalCamp Ohio)
Performance Testing w/ WebPage Test Private Instance (DrupalCamp Ohio)Performance Testing w/ WebPage Test Private Instance (DrupalCamp Ohio)
Performance Testing w/ WebPage Test Private Instance (DrupalCamp Ohio)
 
How To Migrate a Rails App From a Dedicated Server Into Cloud Environment? - ...
How To Migrate a Rails App From a Dedicated Server Into Cloud Environment? - ...How To Migrate a Rails App From a Dedicated Server Into Cloud Environment? - ...
How To Migrate a Rails App From a Dedicated Server Into Cloud Environment? - ...
 
What is octohost?
What is octohost?What is octohost?
What is octohost?
 
Website Speed :: Fox Valley Computing Professionals, September 2014
Website Speed :: Fox Valley Computing Professionals, September 2014Website Speed :: Fox Valley Computing Professionals, September 2014
Website Speed :: Fox Valley Computing Professionals, September 2014
 
Node.js Ignite Talk
Node.js Ignite TalkNode.js Ignite Talk
Node.js Ignite Talk
 
Speed up your Serverless development flow
Speed up your Serverless development flowSpeed up your Serverless development flow
Speed up your Serverless development flow
 
devworkshop-04_13_2016-ucsdnow-presentation
devworkshop-04_13_2016-ucsdnow-presentationdevworkshop-04_13_2016-ucsdnow-presentation
devworkshop-04_13_2016-ucsdnow-presentation
 
How to practice TDD without shooting yourself in the foot
How to practice TDD without shooting yourself in the footHow to practice TDD without shooting yourself in the foot
How to practice TDD without shooting yourself in the foot
 
Strong Consistency in Databases. What does it actually guarantee? - Andy Goo...
 Strong Consistency in Databases. What does it actually guarantee? - Andy Goo... Strong Consistency in Databases. What does it actually guarantee? - Andy Goo...
Strong Consistency in Databases. What does it actually guarantee? - Andy Goo...
 
Continuous Integration
Continuous IntegrationContinuous Integration
Continuous Integration
 
Node Summit - Release the Kraken
Node Summit - Release the KrakenNode Summit - Release the Kraken
Node Summit - Release the Kraken
 
Tavernalc: How to transform your OpenOffice Calc into a grid.
Tavernalc: How to transform your OpenOffice Calc into a grid.Tavernalc: How to transform your OpenOffice Calc into a grid.
Tavernalc: How to transform your OpenOffice Calc into a grid.
 

Similar to The Tools to get you started with React Native

An Introduction to ReactNative
An Introduction to ReactNativeAn Introduction to ReactNative
An Introduction to ReactNative
Michał Taberski
 
Integrating React Native into existing Applications
Integrating React Native into existing ApplicationsIntegrating React Native into existing Applications
Integrating React Native into existing Applications
Robert Tochman-Szewc
 
Hyperledger Fabric: A Custom Blockchain Solution for Corporate Use
Hyperledger Fabric: A Custom Blockchain Solution for Corporate UseHyperledger Fabric: A Custom Blockchain Solution for Corporate Use
Hyperledger Fabric: A Custom Blockchain Solution for Corporate Use
Robert Tochman-Szewc
 
Docker for everything
Docker for everythingDocker for everything
Docker for everything
Tim Haak
 
OpenShift with Eclipse Tooling - EclipseCon 2012
OpenShift with Eclipse Tooling - EclipseCon 2012OpenShift with Eclipse Tooling - EclipseCon 2012
OpenShift with Eclipse Tooling - EclipseCon 2012
Steven Pousty
 
The New York Times: Moving to GraphQL
The New York Times: Moving to GraphQLThe New York Times: Moving to GraphQL
The New York Times: Moving to GraphQL
Scott Taylor
 
10 clues showing that you are doing OSGi in the wrong manner - Jerome Moliere
10 clues showing that you are doing OSGi in the wrong manner - Jerome Moliere10 clues showing that you are doing OSGi in the wrong manner - Jerome Moliere
10 clues showing that you are doing OSGi in the wrong manner - Jerome Moliere
mfrancis
 
Getting Started with React Native (and should I use it at all?)
Getting Started with React Native (and should I use it at all?)Getting Started with React Native (and should I use it at all?)
Getting Started with React Native (and should I use it at all?)
Devin Abbott
 
React native - React(ive) Way To Build Native Mobile Apps
React native - React(ive) Way To Build Native Mobile AppsReact native - React(ive) Way To Build Native Mobile Apps
React native - React(ive) Way To Build Native Mobile Apps
Jimit Shah
 
Untangling spring week11
Untangling spring week11Untangling spring week11
Untangling spring week11
Derek Jacoby
 
See the time on your wrist - Apple Watch presentation
See the time on your wrist - Apple Watch presentationSee the time on your wrist - Apple Watch presentation
See the time on your wrist - Apple Watch presentation
Lammert Westerhoff
 
What is cool with Domino V10, Proton and Node.JS, and why would I use it in ...
What is cool with Domino V10, Proton and Node.JS, and why would I use it in ...What is cool with Domino V10, Proton and Node.JS, and why would I use it in ...
What is cool with Domino V10, Proton and Node.JS, and why would I use it in ...
Heiko Voigt
 
Shipping NodeJS with Docker and CoreOS
Shipping NodeJS with Docker and CoreOSShipping NodeJS with Docker and CoreOS
Shipping NodeJS with Docker and CoreOS
Ross Kukulinski
 
Developing Single Page Apps with Ember.js
Developing Single Page Apps with Ember.jsDeveloping Single Page Apps with Ember.js
Developing Single Page Apps with Ember.js
Leo Hernandez
 
Selenium WebDriver - Test automation for web applications
Selenium WebDriver - Test automation for web applicationsSelenium WebDriver - Test automation for web applications
Selenium WebDriver - Test automation for web applications
TSundberg
 
eZ Publish 5, Re architecture, pitfalls and opportunities
eZ Publish 5, Re architecture, pitfalls and opportunitieseZ Publish 5, Re architecture, pitfalls and opportunities
eZ Publish 5, Re architecture, pitfalls and opportunities
André Rømcke
 
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
GreeceJS
 
Untangling spring week10
Untangling spring week10Untangling spring week10
Untangling spring week10
Derek Jacoby
 
Appcelerator Titanium Intro
Appcelerator Titanium IntroAppcelerator Titanium Intro
Appcelerator Titanium Intro
Nicholas Jansma
 
Untangling - fall2017 - week 9
Untangling - fall2017 - week 9Untangling - fall2017 - week 9
Untangling - fall2017 - week 9
Derek Jacoby
 

Similar to The Tools to get you started with React Native (20)

An Introduction to ReactNative
An Introduction to ReactNativeAn Introduction to ReactNative
An Introduction to ReactNative
 
Integrating React Native into existing Applications
Integrating React Native into existing ApplicationsIntegrating React Native into existing Applications
Integrating React Native into existing Applications
 
Hyperledger Fabric: A Custom Blockchain Solution for Corporate Use
Hyperledger Fabric: A Custom Blockchain Solution for Corporate UseHyperledger Fabric: A Custom Blockchain Solution for Corporate Use
Hyperledger Fabric: A Custom Blockchain Solution for Corporate Use
 
Docker for everything
Docker for everythingDocker for everything
Docker for everything
 
OpenShift with Eclipse Tooling - EclipseCon 2012
OpenShift with Eclipse Tooling - EclipseCon 2012OpenShift with Eclipse Tooling - EclipseCon 2012
OpenShift with Eclipse Tooling - EclipseCon 2012
 
The New York Times: Moving to GraphQL
The New York Times: Moving to GraphQLThe New York Times: Moving to GraphQL
The New York Times: Moving to GraphQL
 
10 clues showing that you are doing OSGi in the wrong manner - Jerome Moliere
10 clues showing that you are doing OSGi in the wrong manner - Jerome Moliere10 clues showing that you are doing OSGi in the wrong manner - Jerome Moliere
10 clues showing that you are doing OSGi in the wrong manner - Jerome Moliere
 
Getting Started with React Native (and should I use it at all?)
Getting Started with React Native (and should I use it at all?)Getting Started with React Native (and should I use it at all?)
Getting Started with React Native (and should I use it at all?)
 
React native - React(ive) Way To Build Native Mobile Apps
React native - React(ive) Way To Build Native Mobile AppsReact native - React(ive) Way To Build Native Mobile Apps
React native - React(ive) Way To Build Native Mobile Apps
 
Untangling spring week11
Untangling spring week11Untangling spring week11
Untangling spring week11
 
See the time on your wrist - Apple Watch presentation
See the time on your wrist - Apple Watch presentationSee the time on your wrist - Apple Watch presentation
See the time on your wrist - Apple Watch presentation
 
What is cool with Domino V10, Proton and Node.JS, and why would I use it in ...
What is cool with Domino V10, Proton and Node.JS, and why would I use it in ...What is cool with Domino V10, Proton and Node.JS, and why would I use it in ...
What is cool with Domino V10, Proton and Node.JS, and why would I use it in ...
 
Shipping NodeJS with Docker and CoreOS
Shipping NodeJS with Docker and CoreOSShipping NodeJS with Docker and CoreOS
Shipping NodeJS with Docker and CoreOS
 
Developing Single Page Apps with Ember.js
Developing Single Page Apps with Ember.jsDeveloping Single Page Apps with Ember.js
Developing Single Page Apps with Ember.js
 
Selenium WebDriver - Test automation for web applications
Selenium WebDriver - Test automation for web applicationsSelenium WebDriver - Test automation for web applications
Selenium WebDriver - Test automation for web applications
 
eZ Publish 5, Re architecture, pitfalls and opportunities
eZ Publish 5, Re architecture, pitfalls and opportunitieseZ Publish 5, Re architecture, pitfalls and opportunities
eZ Publish 5, Re architecture, pitfalls and opportunities
 
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
 
Untangling spring week10
Untangling spring week10Untangling spring week10
Untangling spring week10
 
Appcelerator Titanium Intro
Appcelerator Titanium IntroAppcelerator Titanium Intro
Appcelerator Titanium Intro
 
Untangling - fall2017 - week 9
Untangling - fall2017 - week 9Untangling - fall2017 - week 9
Untangling - fall2017 - week 9
 

Recently uploaded

Bengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal BrandingBengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal Branding
Tarandeep Singh
 
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
fovkoyb
 
Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!
Toptal Tech
 
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalmanuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
wolfsoftcompanyco
 
Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?
Paul Walk
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
3a0sd7z3
 
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
rtunex8r
 
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
uehowe
 
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
uehowe
 
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
xjq03c34
 
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
3a0sd7z3
 
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
k4ncd0z
 
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process HollowingHijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
Donato Onofri
 
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
ysasp1
 
Discover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to IndiaDiscover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to India
davidjhones387
 
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
uehowe
 

Recently uploaded (16)

Bengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal BrandingBengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal Branding
 
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
 
Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!
 
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaalmanuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
manuaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaal
 
Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
 
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
 
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
办理毕业证(NYU毕业证)纽约大学毕业证成绩单官方原版办理
 
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
 
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
办理新西兰奥克兰大学毕业证学位证书范本原版一模一样
 
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
 
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
 
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process HollowingHijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
 
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
 
Discover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to IndiaDiscover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to India
 
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
 

The Tools to get you started with React Native

  • 1. The Tools to get you started with React Na4ve Robert Tochman-Szewc © Robert Tochman-Szewc, 2017 1
  • 2. My Background • Started with React Na/ve in May 2016 on side projects • Turned this into a full-/me job beginning of 2017 • Released three apps with RN, most recently Blue Boat Log © Robert Tochman-Szewc, 2017 2
  • 4. Recap: React Na*ve • Same thing as React • But with na2ve components (<View> instead of <div>) • Benefits: Smooth Android and iOS apps using familiar JS ecosystem • Downsides: ... © Robert Tochman-Szewc, 2017 4
  • 5. Step 1: The Sandbox • Expo allows you to get familiar with RN easily • Write code, test on the device • No work with iOS/Android ecosystem required • No access to NaCve Modules © Robert Tochman-Szewc, 2017 5
  • 7. Step 2: Connect the Dots • How to switch between views? No react-router • Instead: react-naviga9on • Want to manage state be<er? Here's how: • State Management: redux • Router: react-na9ve-router-flux © Robert Tochman-Szewc, 2017 7
  • 8. Step 3: Visuals • Special CSS syntax based on Flexbox • Out of the box: No styled components • Build your own or ... • Use one of the alterna@ves: react-na@ve-ui-kiDen © Robert Tochman-Szewc, 2017 8
  • 9. Step 4: NATIVE • There is a sea of libraries out there • Background GPS, Crashly<cs/Fabric, Google/FB Signin, FontAwesome/Material Icons, LoEe, SQLite, File System • Everything you can do na<vely can be done with RN • OLen as easy as yarn install <native library> react-native link <native library> © Robert Tochman-Szewc, 2017 9
  • 10. Step 4: NATIVE (2) • Possibly more difficult, but allows insight into iOS/Android tooling • Problem: Many projects are/become abandoned • Learn to place bets and switch every now and again © Robert Tochman-Szewc, 2017 10
  • 11. Step 5: Test Automa/on • Jest • Mock Na-ve Modules by hand • Mock states and use snapshots • Will save you countless hours debugging © Robert Tochman-Szewc, 2017 11
  • 13. Bonus Rant Present since at least May 2016, s3ll not reliably solved: Text Input © Robert Tochman-Szewc, 2017 13
  • 15. Links • Expo • React Naviga0on • Redux • React Na0ve Router Flux • React Na0ve UI Ki:en • Jest © Robert Tochman-Szewc, 2017 15