SlideShare a Scribd company logo
React Native - Getting Started
React Native - Getting Started
TRACY LEE | @ladyleet
SPEAKER & GOOGLE DEVELOPER EXPERT
DEV - ANGULAR, EMBER, REACT, RXJS
TECH WRITER & PODCASTER
THIS DOT MEDIA / LABS
MENTOR
React + React Native + Native
React Native is not ALL JavaScript
React Native is not ALL JavaScript
React Native is powerful because we have a JavaScript
interface for code implemented natively.
A PRACTICAL APPROACH
TO REACT NATIVE
React Native - Getting Started
OUR AGENDA
1.
@ladyleet
2. Building an app
4. Navigation
5. React Native Ecosystem
React Native Components
3. Styling
@ladyleet
React Native Components
Basic Components
User Interface
List Views
iOS Components & APIs
Android Components & APIs
@ladyleet
Basic Components
CREATING A PROJECT
1. Install Xcode
2. $ yarn global add react-native-cli
3. $ react-native init <appName>
@ladyleet
$ react-native run-ios
@ladyleet
$ react-native run-ios
@ladyleet
1. kill all your processes
2. $ npm start — —reset-cache
@ladyleet
(solves 99% of your problems)
THE MAGIC TRICK
@ladyleet
@ladyleet
SETUP TIPS
Create an /src folder with an App.js
@ladyleet
Copy/paste index.ios.js into App.js
Import App.js into index.ios.js and index.android.js
@ladyleet
STYLING
@ladyleet
STYLING
Using styled-components 💅
@ladyleet
@ladyleet
EXISTING CSS
$ yarn add styled-components
@ladyleet
@ladyleet$ yarn add styled-components
STYLED COMPONENTS
@ladyleet
STYLED COMPONENTS
Create a new variable, which becomes
a React Native component.
@ladyleet
STYLED COMPONENTS
Write normal CSS
@ladyleet
STYLED COMPONENTS
NAVIGATION
@ladyleet
$ yarn add react-navigation
@ladyleet
USING REACT-NAVIGATION
NAVIGATION
@ladyleet
Built-In
StackNavigator
Custom Navigators
TabNavigator
DrawerNavigator
+
NAVIGATION
@ladyleet
TabNavigator
@ladyleet
TabNavigator
import { TabNavigator } from ‘react-navigation’;
@ladyleet
Create components you will be navigating to in /src.
Create a variable to define the TabNavigator.
TabNavigator
Import those components into your App.js
@ladyleet
TabNavigator
@ladyleet
TabNavigatorConfig
tabBarComponent
TabBarBottom
TabBarTop
tabBarPosition
swipeEnabled
animationEnabled
lazy
activeTintColor
activeBackgroundColor
showLabel
style
tabStyle
tabBarLabel
tabBarIcon
@ladyleet
tabBarIcon
@ladyleet
tabBarIcon
@ladyleet
DISPLAYING DATA
@ladyleet
@ladyleet
Create 2 components Questions.js and Answer.js
DISPLAYING DATA
Each component should have a <View/> and <Text/>
Use { this.props.q } and { this.props.a }
We’ll pass the data on the parent component
@ladyleet
DISPLAYING DATA
@ladyleet
Import Questions.js and Answer.js into a component
DISPLAYING DATA
Ex. the React.js component
Create an array of data with questions and answers
@ladyleet
Simply write React!
DISPLAYING DATA
@ladyleet
OUR AGENDA
1.
@ladyleet
2. Building an app
4. Navigation
5.
React Native Components
3. Styling
React Native Ecosystem
@ladyleet
State Management
Animations
React Native Ecosystem
Where to find help
@ladyleet
State Management
setState - react default
Redux - redux.js.org
MobX - mobx.js.org
Morearty - github.com/moreartyjs
@ladyleet
Animations
React Native Animatable
github.com/oblador/react-native-animatable
facebook.github.io/react-native/docs/animated.html
Lottie by Airbnb
airbnb.design/introducing-lottie
React Native’s Animated API
@ladyleet
React Native’s Animated API
Animated gives you 4 animatable component types:
Text, Image, View & ScrollView
Or you can create your own using
Animated.createAnimatedComponent()
@ladyleet
Lottie by Airbnb
Render After Effects animations in real time
@ladyleet
Where to find help
Twitter
Documentation
Medium articles
egghead.io
Front End Masters
@ladyleet
React Native is amazing for JavaScript
developers who want high flexibility and
the ability to build mobile apps with a
powerful JavaScript interface.
@ladyleet
React Native is best for people who want
to have full control of their applications
and understand the intricacies of their
code’s inner workings without heavy
abstractions.
Let’s get into building the actual app!

More Related Content

PPTX
How native is React Native? | React Native vs Native App Development
PDF
Intro To React Native
PDF
Introduction to React Native
PDF
Intro to react native
PPTX
ReactJS presentation.pptx
PPTX
React Native
PPTX
Introduction to react_js
PPTX
Reactjs
How native is React Native? | React Native vs Native App Development
Intro To React Native
Introduction to React Native
Intro to react native
ReactJS presentation.pptx
React Native
Introduction to react_js
Reactjs

What's hot (20)

PDF
React Native
PPTX
React Native
PPTX
Intro to React
PPTX
React native
PPTX
Introduction to Facebook React
PPTX
reactJS
PPTX
React state
PPTX
Intro to React
PDF
React Native
PPTX
React Native
PDF
Introduction to react native
PDF
React js
PPTX
Its time to React.js
PDF
Understanding react hooks
PPT
PDF
Introduction to React JS
PPTX
React JS - A quick introduction tutorial
PPTX
React workshop presentation
React Native
React Native
Intro to React
React native
Introduction to Facebook React
reactJS
React state
Intro to React
React Native
React Native
Introduction to react native
React js
Its time to React.js
Understanding react hooks
Introduction to React JS
React JS - A quick introduction tutorial
React workshop presentation
Ad

Similar to React Native - Getting Started (20)

PDF
A Practical Approach to React Native at All Things Open Conference
PDF
How To Integrate Native Android App With React Native.
PDF
React a11y-csun
PDF
React Native +Redux + ES6 (Updated)
PDF
React Lifecycle and Reconciliation
PDF
Let's do SPA
PPTX
React js programming concept
PDF
React Native in Production
PDF
The complete-beginners-guide-to-react dyrr
PPTX
Modern web app with REACT
PDF
Introduction to ReactJS
PPTX
slides.pptx
PPTX
slides.pptx
PDF
A tour of React Native
PDF
Reactive programming with RxJS - Taiwan
PPTX
20171108 PDN HOL React Basics
PDF
Introduction to react
PDF
ReactJS vs AngularJS - Head to Head comparison
PPTX
Build web apps with react js
PDF
Introduction to ReactJS and Redux
A Practical Approach to React Native at All Things Open Conference
How To Integrate Native Android App With React Native.
React a11y-csun
React Native +Redux + ES6 (Updated)
React Lifecycle and Reconciliation
Let's do SPA
React js programming concept
React Native in Production
The complete-beginners-guide-to-react dyrr
Modern web app with REACT
Introduction to ReactJS
slides.pptx
slides.pptx
A tour of React Native
Reactive programming with RxJS - Taiwan
20171108 PDN HOL React Basics
Introduction to react
ReactJS vs AngularJS - Head to Head comparison
Build web apps with react js
Introduction to ReactJS and Redux
Ad

More from Tracy Lee (20)

PDF
Contributing to Open Source - Angular World Tour
PDF
ChicagoJS's JSCAMP 2019 Keynote - Inclusive Architecture - Building Sustainab...
PDF
Angular Girls Kansas City - The Power of Open Source and Social Media
PDF
Diversity & Inclusion Conference Talk - Refactr
PDF
Inclusive Architecture - Introducing the PAMstack - [Refactr.tech]
PDF
RxJS Operators - Real World Use Cases (FULL VERSION)
PDF
RxJS Operators - Real World Use Cases - AngularMix
PDF
Diversity, Inclusive Mindsets, and Architecture
PDF
Diversity & Inclusion Keynote at Open Source 101
PDF
Reactive programming with RxJS - ByteConf 2018
PDF
The Power of RxJS in Nativescript + Angular
PDF
RxJS - The Basics & The Future
PDF
RxJS: A Beginner & Expert's Perspective - ng-conf 2017
PDF
An Introduction Into Using Angular’s Material Design
PDF
The Tale of the 3 CLIs - jDays2017
PDF
Angular Material (2) - NgVikingsConf
PDF
Using Angular-CLI to Deploy an Angular 2 App Using Firebase in 30 Minutes
PDF
A Tale of 3 CLIs - Angular 2, Ember, and React
PDF
Learning the New Tech Lingua Franca: Social Media
PDF
From 0 to Developer - Silicon Valley Code Camp
Contributing to Open Source - Angular World Tour
ChicagoJS's JSCAMP 2019 Keynote - Inclusive Architecture - Building Sustainab...
Angular Girls Kansas City - The Power of Open Source and Social Media
Diversity & Inclusion Conference Talk - Refactr
Inclusive Architecture - Introducing the PAMstack - [Refactr.tech]
RxJS Operators - Real World Use Cases (FULL VERSION)
RxJS Operators - Real World Use Cases - AngularMix
Diversity, Inclusive Mindsets, and Architecture
Diversity & Inclusion Keynote at Open Source 101
Reactive programming with RxJS - ByteConf 2018
The Power of RxJS in Nativescript + Angular
RxJS - The Basics & The Future
RxJS: A Beginner & Expert's Perspective - ng-conf 2017
An Introduction Into Using Angular’s Material Design
The Tale of the 3 CLIs - jDays2017
Angular Material (2) - NgVikingsConf
Using Angular-CLI to Deploy an Angular 2 App Using Firebase in 30 Minutes
A Tale of 3 CLIs - Angular 2, Ember, and React
Learning the New Tech Lingua Franca: Social Media
From 0 to Developer - Silicon Valley Code Camp

Recently uploaded (20)

PDF
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
PPTX
Understanding_Digital_Forensics_Presentation.pptx
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
PPTX
MYSQL Presentation for SQL database connectivity
PDF
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
PDF
Unlocking AI with Model Context Protocol (MCP)
PDF
Spectral efficient network and resource selection model in 5G networks
PDF
Advanced IT Governance
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PDF
Approach and Philosophy of On baking technology
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
PDF
Machine learning based COVID-19 study performance prediction
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
DOCX
The AUB Centre for AI in Media Proposal.docx
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
Reach Out and Touch Someone: Haptics and Empathic Computing
Dropbox Q2 2025 Financial Results & Investor Presentation
Per capita expenditure prediction using model stacking based on satellite ima...
Advanced methodologies resolving dimensionality complications for autism neur...
Diabetes mellitus diagnosis method based random forest with bat algorithm
Understanding_Digital_Forensics_Presentation.pptx
“AI and Expert System Decision Support & Business Intelligence Systems”
MYSQL Presentation for SQL database connectivity
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
Unlocking AI with Model Context Protocol (MCP)
Spectral efficient network and resource selection model in 5G networks
Advanced IT Governance
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Approach and Philosophy of On baking technology
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
Machine learning based COVID-19 study performance prediction
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
The AUB Centre for AI in Media Proposal.docx

React Native - Getting Started