from zero to hero with react native!
TRANSCRIPT
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
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
