from zero to hero with react native!

FROM ZERO TO HERO WITH REACT NATIVE

Paolo Rovella

Alber to Pellizzon

- In t roduct ion : W hat is React Nat ive

- Create React Nat ive A p p

0 1

0 2

- Let ’s b u ild t h e M em ory g am e ! 0 3

- Exp o : in t eg rat e N at ive fu n c t ion al it ies 0 4

- H ow t o u se Exp o : i t 's t im e t o ‘ejec t ’! 0 5

- Level u p : cam era an d p h ot o l ib rary in t eg rat ion 0 6

https://facebook.github.io/react-native/docs/getting-started.html

Create React Native App is the easiest way to start

bu i ld ing a new React Native application .

yarn global add create-react-native-app

create-react-native-app AwesomeProject

Minimal "Time to Hello World" : reduce the setup t ime it

takes to try bui ld ing a mobi le app to the absolute

m i n i m u m

Develop on Your Device : It is easy to develop on a physical

device when you wan t to test how your app feels and

responds to inputs .

One Build Tool: If you just wan t to get started w i th React

Native , you don ' t need to install Xcode or Android Studio

No Lock-In : You can always "eject" to your own bui ld setup

if you need to wri te cus tom native code or modi fy how

your app isbuil t .

Expo Client

It is a set of tools , libraries and services wh ich let you bui ld

native iOS and Android apps by wri t ing JavaScript

Apps are React Native apps which contain the Expo SDK.

The SDK is a native-and-JS library wh ich provides access to

the device ’s system functionali ty (things like the camera ,

contacts , local storage , and other hardware )

When you open an app in Expo development tool (XDE), i t spawns

and manages two server processes in the background : the Expo

Development Server and the React Native Packager Server

https://docs.expo.io

It provides UI components to handle a variety of

use-cases and can manage your assets and

cus tom fonts

It works out -of - the -box wi th react-navigation

rout ing library

Expo handles device permissions and has a

specific API for push notifications

You can integrate Firebase, GraphQL , Sentry and

other tools easily thanks to the docs

"Ejecting" is the process of setting up your own custom builds

When i need to use "eject"?

- If you want to include a library wh ich uses react-native l ink

- If you want to wri te your own native code for your app

- If you want to publish your app to the App Store or Play Store

There are two type of "ejecting":

yarn ejectwil l start the process of ejecting f rom

Create React Native App 's bui ld scripts

https://docs.expo.io/versions/latest/guides/detach.html

- Ejecting to Regular RN

- Ejecting to ExpoKit

Ejecting (detaching ) to ExpoKit

Expo XDE (Expo Development Environment ) helps everyone

start, develop and publish React Native projects

https://docs.expo.io/versions/latest/guides/expokit.html

Expo exp CLI lets you work on the c o m m a n d line and it can

be used in tests or continuous integration (CI)

Developing Wi th ExpoKit

It provides access to the system’s UI for selecting images f rom

the phone ’s photo library or taking a photo w i th the camera .

Expo .ImagePicker . launchImageLibraryAsync (options)

Expo .ImagePicker . launchCameraAsync (options)

https://docs.expo.io/versions/latest/sdk/imagepicker.html