React Native II Flashcards
1
Q
What are we going to learn in React Native II?
A
Mosh worked really hard on this course
Promise you’ll be a React-Native Ninja
Tons of Tips and Tricks
If we build an App or get a job, share story!
Advanced Concepts:
Native Device features (Android/iOS)
Navigation
Networking (Api calls)
Offline support
Authentication & Authorization
Push Notifications
Distrubution (App stores)
2
Q
What do we need to know?
A
Ultimate React Native Part I
React Hooks
(useState, useEffect, custom hooks)
React Context
Javascript
(arrow fns, spread, async/await)
3
Q
What native features are not available in React Native?
A
React Native has limited API for working with native features:
Camera, context not available
available as 3rd party library
Ex. image picker -> allows us to get an image from camera
have to install a library
run in iOS project
can eject from expo
or
use components by expo
lots of native features available
4
Q
What is the ImagePicker component?
A
Can select a video or image from user’s library or camera
expo install expo-image-picker
5
Q
What is useEffect (effect hook) for?
A
accessing lifecycle hooks like componentDidMount ( ) in functional component
6
Q
How can we access a user’s camera?
A
ImagePicker component from ‘expo-image-picker’
7
Q
What is the permissions API?
A
another method for accessing camera, etc.
can pass multiple permission types
8
Q
How can we access a user’s library to add a photo and display on the screen?
A
useState() hook
to set result.uri (from ImagePicker)
display imageUri in Image component
9
Q
How do we build a re-usable ImageInput component?
A
10
Q
How do we handle the touch event of our image picker component?
A
consumer of ImageInput:
handles state using hooks
ImageInput:
props - imageUri, onChangeInput (reference to hook from consumer for updating data of imageUri)
wrap in a TouchableWithoutFeedback
set handlePress to fn for calling ImagePicker.launchImageLibrary
11
Q
How do we build the image input list component?
A
12
Q
How do we solve this problem?
Hint: Horizontal scrolling
A
ScrollView component from react-native
wrap ScrollView in a View so it only takes up content space
use useRef() hook to get current element and scroll to end
13
Q
How do we design a form image picker?
A
wrap our ImageInputList in a new component with an error message
Just like FormPicker, FormField
allow Formik to handle state
use the values field to get form values
use the SetFieldValue method to update form values
14
Q
How do we add the Form Image Picker to our Listing Edit Screen?
A
Consume FormImagePicker in ListingEditScreen
add validation to images using Yup schema in ListingEditScreen
15
Q
How do we get the user’s location?
A
define function:
getLocation( ) to async call Location.getLastKnownPosition()
useEffect :
to call getLocation( )
useState:
set location and get location
16
Q
What is a custom hook?
A
Encapsulate some state and logic around state
in a re-usable component
naming convention:
useLocation
*start with “use”
17
Q
What are we going to learn in navigation?
A
How to take App to next level
add navigation at bottom
can click on screens
App is becoming more functional
18
Q
How do we implement navigation in our React Native Apps?
A
19
Q
What kind of navigators do we have in React?
A
Stack - taking users from one page to another
Tab - going between tabs
Drawer - drawing things on screen navigations
**all of them are very similar and can learn if you know one!
20
Q
How do we use the stack navigator?
A
Each navigator is implemented in a separate library
We render StackNavigatorComponent
it knows how to navigate between components
21
Q
What does React Navigation give our screen components?
A
A special prop called navigation
can destructure and pick navigation property
Ex. navigation.navigate(“Target Location”)
only available in screen component
not available in child components
.push creates a new instance on the stack
.navigate creates a single instance on stack
but can use navigation hook to access navigation object
22
Q
How do we access navigation prop using React Navigator hook?
A
useNavigation( ) hook
23
Q
How do we pass parameters to React Navigator?
A
ex. pass ID of a specific tweet
24
Q
How can we set the title of a screen?
A
using the options prop of the Stack.Screen component
25
**How** do we **customize the header of a screen**?
**Locally (screen only)**
use the **options prop** of the **Stack.Screen component**
**headerStyle (pass a color)**
**headerTintColor**
**headerShown**
**Globally (all screens)**
**options prop of the Stack.Navigator component**
**can override for specific screen**
26
How do we create a **bottom tab navigator?**
**npm install @react-navigation/bottom-tabs**
createBottomTabNavigator()
returns an object
**has Screen and Navigator properties**
**render**
**TabNavigator inside NavigationContainer**
27
**How** do we add a **background color** to **each tab** and **change the text when pressed?**
**createBottomTabNavigator()**
tabBarOptions = styles
/\>
28
**How** can we **add icons to our Tabs?**
**Really easy**
Tab.Screen
**options** - set to a fn that renders a **MaterialCommunityIcon**
**destructure the props** from **React Navigator**
**set size** and **color** to **props given by Navigator**
29
**What** is **nesting navigators?**
instead of **passing a component** to the **Tab.Screen component (bottomTabNavigator)**
**passing** a **Stack Navigator**
**called nesting navigators**
30
**How** do we **build the welcome screen** to **login screen / register screen navigation?**
**AuthNavigator.js**
use createStackNavigator( ) from @react-navigation/stack
from the return object
create Screen component and Navigator container
**Consuming Screen:**
inherits navigation prop
uses navigate method onPress of button
31
How do we set a **custom theme for our app?**
spread the **...DefaultTheme**
## Footnote
**can update headers in Stack.Screen**
**pass options prop**
**headerStyle: { backgroundColor: 'white' }**
32
**How** do we **create** the **AppNavigator component?**
33
**How** do we **create navigation** from the **listings screen** to **press on an item** and **be directed to the item details screen**?
**add TouchableWithoutFeedback to card component**
assign the **onPress event** via **props to consuming class**
because we have **registered the screen** with **our navigator**....
can access the **navigation or route props**
handle **onPress in ListingScreen** by **extracting navigation prop (ListingsScreen)**
**extract route param, use it to get item**
**listing.title, listing.price**
**dynamically display item**
34
**How** can we **navigate to an item dynamically?**
wrap **card component in a Touchable**
set the **event to props (onPress)**
handle in **ListingsScreen (navigation prop)**
handle **ListingDetailsScreen (route to get item[param])**
35
How do we **make our listing details screen appear from the bottom vs from the side?**
Set **Stack.Navigator prop to modal**
36
**What** does our **account screen need?**
It's own **stack navigator** for **navigating to it's components**
37
**How do** we **make** our **AppNavigator tabs beautiful?**
**create NewListingButton component**
let **consumer decide** what **should happen when onPress event**
**hook with prop**
38
**What should** we do to **make our navigation cleaner?**
**Get** ride of **hard coded route names**
**if there is a typo, app will not work**
**testing every feature manually or automated**
**if rename route, have to rename all instances**
**solns?**
**store all routes in a single place in app**
**Object.freeze** ensures **object cannnot be modified** anywhere **else in our app**
39
**What** are we **going to learn in the networking section?**
How to **connect our React-Nativ**e app to a **node.js server**
## Footnote
**created a fake database**
**Why?**
**Don't need to setup MongoDB, etc.**
40
**What library** are **we going to use** for **calling APIs?**
**Hint:** npm i apisauce
**Api Sauce**
an **abstraction over axios**
**can use fetch API, but using api sauce**
**why?**
**whenever call server, promise always resolved, even if an error**
**just check if there is an error**
**no try/catch needed**
**gives us standardized errors**
41
**What should our components know?**
What UI looks like
How UI behaves
**Why?**
separation of concerns
**NOT:**
HTTP protocol
calling GET, POST, ETC.
not responsibility of component
Don't do this, violates separation of concerns
**Soln?**
Create an API layer that handles all this
proper architecture
42
**How** do we **create our basic API layer?**
43
**How can** we get the **list of items from our backend?**
44
**How** do we **debug our API calls** to see if **the server was called** as well as **the request and response objects?**
**Look at network requests** in **React Native Debugger**
45
**How should** we **handle an error?**
**should** provide a **good user experience**
Not a blank screen
**How?**
**use another hook** to catch an **error from APISauce**
**conditionally render** the error with a **Text component**
**and a Button component**
46
**How** do we **simulate a slow network connection?**
**React native developer tools**
**makes our app slow**
takes **2 seconds of a blank screen** before listings
**soln?**
**Show an animation** before **listings shown**
47
**How** do we **display an activity indicator?**
**ActivityIndicator component**
defined in **react native core**
**use a separate hook for loading, setLoading**
**render component if loading is true**
**kind of boring can replace with a beautiful animation**
48
**What is Lottie?**
an **animation library** built by **AirBnB**
Can **add beautiful animations**
**JSON file exported from Adobe After Effects**
LottieFiles.com
**thousands of animations made by people**
**most free, some paid**
49
**How can we** add a **beautiful Lottie animation** to **our application?**
**Hint**: expo **install lottie-react-native**
Go to **LottieFiles.com**
customize **a free animation**
**download the JSON**
**upload into project**
**render** using a **special component**
50
**What's** the **problem with this implementation**?
have to **repeat logic everytime** want to **call server**
declare hooks, etc.
is there a better way?
**repetative, redundant**
**Soln?**
use hooks
encapsulate some state and logic around
can encapsulate details around a re-usable hook
51
**How** do we create a **re-useable API hook**?
**extract** the **useState (state)**
**extract the logic** that **modifies state**
52
How do we **pass props to our re-usable useApi hook?**
use **rest operator** to **allow request function** in **useApi**
to **take zero or more args**
53
**How** can we call **multiple Api's** in **on a screen?**
**name each Api call** and **pass to useApi function**
54
**How** do we **post data to the server?**
(ie - send a new listing to the server?)
55
**How do we get upload progress?**
**pass a third object to axios (config)**
{**onUploadProgress**: progress =\> console.log(progress)}
this object contains loaded and total bytes
**(loaded bytes / total bytes)** \* 100 = progress
How?
**Pass fn reference to child (raising event)**
child calls event when event is raised
gives access to progress in UI layer
56
**How** do **we build** the **upload screen?**
**UploadScreen**
composed of a **Modal**
**Props** of **progress, visible**
**ListingEditScreen**
composed of **UploadScreen**
**uses hooks** to **handle progress, visibility**
57
**How** do **we add** a beautiful **progress animation** to our **application?**
**npm install react-native-progress --save**
**hook for storing progress / visible**
**pass progress / visible to UploadScreen**
**in UploadScreen import progress bar**
58
**How** do we **display** a **beautiful done animation?**
**UploadScreen**
conditionally render
Progress.Bar or LottieView
raise onDone event after onAnimationFinish
**ListingEditScreen**
handle onDone event
59
**How** do we **reset our form** after **making a post to the server?**
pass **resetForm from formik (fn)**
ensure **FormFields use formik setFieldValue**, **value** from **FormikContext** so that **resetForm can clear values**
60
**What** will we **learn in the offline support section?**
**A very important topic**
**lots of otherbooks / courses overlook topic**
**What?**
if **no internet connection**
reloads listings from a cache
61
**What** are **strategies for offline capable apps?**
\*as **we build more offline** capability, **cost increases**
**Think about time, budget, uses before implementing in apps**
**Four Strategies:**
**Notify the user**
that there is no internet connection
**Disable features**
turn off certain feature capabilities while offline
**Cache data**
data available while offline
**Store user actions**
if user takes actions, store actions locally on device
when online is back, execute them on server
62
How do we **detect the status of a users network connection?**
**expo install @react-native-community/netinfo**
**NetInfo.fetch() returns an object...**
**isInternetReachable**
check this property
**isConnected**
doesn't mean has internet
63
How can **we subscribe to network status changes?**
**Class Components:**
**ComponentDidMount**
call **const unsubscribe = NetInfo.addEventListener()**
Function **called everytime a change to network status**
**ComponentDidUnmount**
unsubscribe ( )
prevent memory leaks
**Functional Components**
**useNetInfo ( ) hook**
**subscribe / unsubscribe happens inside hook**
64
**What** is **caching?**
When **we call an API** to **retrieve data from server**
storing **successful request data** **locally on device**, so **if mobile device goes offline**
**can read data from cache**
**How?**
**AsyncStorage -**
65
**What** are the **three options for caching successful API response data** locally **on the mobile device?**
**AsyncStorage**
values are not encrypted
like local storage in browsers
stores key value pairs
values are strings, not encrypted
6MB limited storage
don't store large data or sensitive data
**SecureStore**
expo built API
2MB limit
**SQLite**
SQL like database
if query data using SQL, use this option
66
How do we **store a value in async storage?**
**Hint:** expo install @react-native-community/async-storage
67
**How can we debug** our **async storage in React Native debugger?**
open react native debugger
in console
call showAsyncStorageContentInDev()
**work directly with Async functions**
$reactNative.AsyncStorage.clear()
if storage is corrupt, need to clear, or insert values
68
How do we **store listings in cache** in **our app so that if the network connection is down we can read data from our cache?**
**caching listings**:
don't have complex data to query
don't have sensitive information
**use AsynStorage**
69
**How** does **AsyncStorage work under the hood**?
We **don't have to worry** about **these implementation details**
just store in **AsyncStorage** and **let them figure out the details**
hide behind a cache layer (don't use directly)
**Android**
uses SQLite
**iOS**
uses dictionary (hash map) or separate files
70
**What** is a **cache layer?**
**abstraction over AsyncStorage**
will handle serialization / de-serialization logic
will apply a timestamp (expired or not)
automatically remove expired data
**Why?**
Encapsulate all details in a single place
Prevents data leakage
minimizes breaking changes if we change cache implementation
71
What is the **command-query separation (CQS)?**
an **important programming principle**
functions should either be commands or queries
**Command**
fn that changes state of system
**Query**
fn that returns the state of the system
72
What's the **problem with this code?**
it breaks the **command query separation principle**
the **function is both returning** the **state** and **changing the state** in the same function
But...
we are **consciously breaking the rules**
we **don't want to store too much data in the cache**
73
What's the problem with this code?
it's violating the **single responsibility principle**
**fn or method should have a single responsibility**
**get ( )** function **has two responsibilities:**
1. get **item from cache**
2. **detecting if item is expired** or not
Soln?
move logic somewhere else
define new function isExpired()
74
How do we **bring the caching layer into the api layer?**
**in the client.js file**
**logic for caching** should **go where calling server**
**store get method in a constant**
**call original get ( )**
**perform some logic before / after**
75
**How** do we **cache images?**
## Footnote
**Hint:**
**npm i react-native-expo-image-cache**
**npm i expo-blur**
**popular** library **gives replacement imagecomponent**
(vs **react native image component**)
**Why?**
Supports caching, progress loading, authorization headers
**But?**
Not available for expo aps
**Soln?**
react-native-expo-image-cache
76
How can we **cache images in our app?**
use **Image component** from **expo-image-cache**
**slighly different API**
images **now stored in files on device**
77
What is Redux?
Used in React and React Native Apps
**many people use Redux for caching and offline support**
store entire app state in a single object
like a database for front end
**redux-persist**
persist and rehydrate a redux store
**BUT**...
Many people can't live without redux
it brings extra complexity
simplicity is the ultimate sophistication
78
**Why** is using **Redux not an elegant solution to caching problem?**
Adds a **lot more complexity**
**Ask yourself..**
Does undue/redue really matter for your app?
know state of app and go back in time really matter?
**Only use Redux if you have a complex data flow in your app**
don't use redux for every single app
**When use?**
When having multiple screens, sharing data, updating
Screens must be in synch
otherwise, don't use redux
79
**How** can we **store user's actions and execute when back online?**
store post request locally in app, execute later
modify API layer - post, put methods to execute later
**complex app with various apps?**
complex actions to handle like retrying actions, conflict resolution, optimistic updates
don't implement by hand
**use Firebase**
real time database, offline support, auto synchronization
Fire saves changes automatically
Firebase would be backend of app
**use Realm**
automatically synchs with database
**ask?**
Is this necessary for my application
Twitter doesn't allow posting tweets when offline
80
**How** do we **display a notice to the user** if the **mobile device is not connected to the internet?**
**useNetInfo ( ) hook**
81
What will **we learn** in the **authentication and authorization section?**
Users **will be able to register and login**
## Footnote
**taking App to the next level**
82
Why should we **subscribe to React context vs. use Redux?**
**React Context replaces prop drilling**
**Redux** is useful for l**arge objects that change frequently**
**Why?**
any changes to a **context object,** causes entire app tree to re-render
redux store components subscribe individually
only components that use / need data are re-rendered
83
**How** do we **login a user?**
**create an auth.js api file**
**use client** (abstraction over apiSauce)
to **call endpoint** and pass **email, password**
**LoginScreen**
**onSubmit** (handleSubmit)
**define** login for **handleSubmit**
**use authApi** to **login** by sending **email / password** from form
if error, use **state variable** to display **error message**
84
**How** do we **decode the JWT** sent from **the server to access the payload?**
**npm i jwt-decode**
85
**How** do we **give the current user** to **all the screens in our application?**
**wrap** in **Context (react context)**
**pass hook (user, setUser)** to **all components using context**
86
**How** do we **replace the hard coded data in the account screen with the current user?**
**get user from context**
**useContext(AuthContext)**
87
**How** do we **implement logging a user out?**
**AccountScreen**
**extract setUser from context**
**onPress () =\> setUser(null)**
**redirects to the login / register page**
88
**How** do we **persist the authentication?**
**Auth Context** vs. **SecureStorage**
two places in memory to persist
**store auth token on device**
use **Secure Store**
**storage.js**
responsible for **storing / retrieving auth token**
like **AsynStorage but for secure data**
89
What is the **AppLoading component?**
90
**What** is the **problem with this code**?
**App component**
**should be like a manager**
**delegating**, not implementing
**too many details** of **authentication inside App**
**Soln?**
**Refactoring** by **moving logic** to **auth module**
91
**How** can we **make this code better?**
All **business logic into custom hook**
**App** is **only responsible for delegation**
**How?**
**extract useContext(AuthConte**xt)
into a **module that abstracts these details**
**instead of importing the context hook**
**and the authContext hook**
**only import custom hook**
**Encapsulate**
**setUser()**
**authStorage.removeToken()**
**into custom hook**
92
**How** can we **refactor this code?**
**separate concerns**
**encapsulate** logic for **logIn ( )**
fn **updates Context** and **SecureStorage**
**both** are **encapsulated in custom hook**
**handle logic** around the **state there**
**export** **logIn function**
**import** in **LoginScreen**
**cleaner code**
93
**How** can we **access protected routes**?
**update client.js**
**transform (middleware) request**
**automatically** include **authToken**
94
**How** do **we** **register a new user**?
**usersApi**
create **users.js in api module**
handles **calling api**
**RegisterScreen**
pass **formik object (userInfo)** to **usersApi**
**How?**
**Register user**
usersApi.register(userInfo)
formik object
**Login user**
authApi.login
95
**How** do **we add** an **overlay to the listing screen?**
96
**How** can we **send push notifications?**
**Expo Push Notification**
simplest
hides all complexity
by far the best
**OneSignal, Amazon, etc.**
have to eject from expo
make changes to native projects
lots of extra work
if you miss any steps, don't work
review all the steps
**Recommendation?**
Use expo unless job says you have to use something else
97
What is **Amazon Simple Notification Service?**
**have to make changes to native projects**
**to setup notifications**
**any steps missed or not done properly**
**have to review all steps, painfully**
98
**What** are the **four steps** we **need to execute** to setup **push notifications using expo?**
**Register app with expo**
get push **notification token**
uniquely **identifies each device**
can send **notification to unique device**
**store token on device**
somewhere **stored a collection of users**
each user - **Id, name, email, pushNotificationToken**
can **send notifications** to **a user or group of users**
**Send notification**
happens on server
not on the client
UI has a box for **typing a message**
onSubmit sent to server
server **stores message in DB**
server **notifies user**
**Handle device recieved notifications**
**decide** what t**o do when** **user taps notification**
99
**How** do we **handle push notifications in our app**?
using **expo notifications**
100
**How** do **we get the push token?**
use **Permissions to ask permission**
use **Notifications** to **getExpoPushTokenAsync( )**
**useEffect ( ) hook**
**call a function**
**Permissions.askAsync**
**await Notifications.getExpoPushTokenAsync()**
**user will get same push token**
**unless they re-install the app**
101
**How** do we **send a notification token** **to the server?**
**AppNavigator component**
**ask permissions** for **push notifications**
generate a **push notification token**
send it to the server using **expoPushTokensApi**
an **abstraction over the client (axios)**
102
**How** do **we send test notifications** in **Expo during development?**
103
**How does** the **backend** **send push notifications** using **expo?**
104
**How** can we **handle push notifications** in **our app**?
**addNotificationRecievedListener**
105
**How** can we **navigate a user** to a **specific page** when **the notification is recieved?**
**Can't?**
use navigation prop
useNavigation hook
**Why?**
Only available in screens wrapped in Navigator
**Soln?**
create a reference object (ref to Navigation)
from that reference, can access navigation object
**access ref property 'current'**
get access to navigation object
**rootNavigation.js file**
**ref object called when Navigation container created**
**check if .current is null (will throw error if called too early)**
106
**What** is the **challenge with this code?**
the **notifications logic**:
getting users permission
generating a pushToken
handling a notification response
is **polluting our AppNavigator component**
**UI components should only have logic for presentation**
**Soln?**
**extract logic into a custom hook (re-usable)**
107
How **can we make this code re-usable?**
we **don't want to hardcode the action everytime a listener is added**
## Footnote
**pass action down to component via props**
108
**What** are the **two types of notifications**?
**Remote (push)**
sent by expo backend
**Local**
created locally in the app
109
How **can we schedule a local notification** for **the future?**
Ex. **10 minutes** after reached **cart page?**
110
**How** do we **send a message to the seller and display a notification for the user?**
**create a new form component**
import **Form** (Formik abstraction)
**FormField** (error handling, etc.)
**handleSubmit ( )**
s**end message to server** with **messagesApi** (client abstraction)
use **Expo notifications** to send **user notification**
111
**What will we learn** in the **final section of this course?**
how to **submit app to iOS store**
**GooglePlay store** should **be similar**
Have to give **app proper Icon**
112
**How do we** create a **proper app icon** for **distributing our app**?
**https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/**
**https://developer.android.com/guide/practices/ui\_guidelines/icon\_design\_adaptive**
113
**How** do we **optimize the assets in our project?**
Delete **non essential assets**
**Why?**
**Bundled in app during production**
**only make our app larger**
**Soln?**
**include** only **absolute essential assets**
**assets that must be immediately** available when **starting our app**
**anything not essential, downloaded later from internet**
114
**How else** can we **optimize our assets** before **building the app for production?**
**sudo npm i -g sharp-cli**
**Why?**
reduce the size of our images
**How?**
npx expo-optimize
**Why?**
uses sharp cli behind scenes
reduces images **without losing quality**
115
What **happens when we build our app?**
all our **javascript code gets combined**, **minified into a bundle**
**app loads**, bundle is **loaded into memory**
Javascript **virtual machine on mobile**, parses code
**Why?**
More **code in the bundle, more time to load and parse**
116
**As a best practice**, **what should we do?**
**Always check:**
**is there** a **more lightweight version** of a **package used?**
**Ex. Moment.js**
**bringing** a **lot of code we don't need**
in app, only using once, using a small functionality
**moment has a lot of functionality, not used**
**Soln?**
Replace with a more lightweight library
npm i dayjs
117
**How** can we **see the cost of our import statements?**
**cost** of **moment.js is 258k (71kb compressed)**
## Footnote
**vs.**
**7.2k kb for dayjs (compressed)**
118
What else can effect our bundle size?
**How we import things from a library**
**Why?**
**can import needed code vs. all library code**
**How?**
**some libraries are split into small packages**
119
**How** can we **log errors** when **our app is in the app store**?
**use error reporting tools**
Talked about sentry in React course
LOVES bugsnap (new tool)
a bit pricey
report handle / unhandled
identify users who encountered errors
120
**What** is **bugsnag?**
**an error reporting tool**
Mosh loves it!
**Lift, Square, Airbnb, Mailchimp**
**How?**
**upload sourcemaps allows us to see stack trace in production**
121
**How do** we **report errors** in our **production app**?
**use bugsnag**
create **logger.js (in utility) folder**
can see error rate over time (very powerful)
can see device iOS and version of React (very powerful)
122
How can we **manage the settings** for **different environments?**
**Why**?
baseUrl is for **production backend**
in **production app,** want to **use backend hosted in cloud**
**How?**
settings.js (config module)
define settings for different environments
123
**How do we publish to expo?**
**publish on Expo**
expo publish --release-channel staging
build **standalone binaries for iOS and Android**
124
**How** can we **build standalone binaries** for **deployment to app stores (Google and Apple)?**
Expo publishing only used for dev, testing
**Why?**
don't want users to have to download expo app to use our app
**soln?**
Expo's build service
Mosh absolutely loves this service
it's exceptional
125
**How** can we **build the iOS standalone app**?
**_Step 1:_** register in **Apple developer program**
developer.apple.com/programs/enroll
must provide driver's license
must pay $99 / year
to **publish to app store**, need **current payment status**
**_Step 2_: add fields in app.json (app store uses)**
bundleIdentifier
buildNumber
**_Step 3_**: expo build:ios
(terminal)
appleID, password
create distribution service
apple push notifications key
provisioning profile
**_Step 4_**: Download ipa file (monitor status)
for **uploading in app store**
126
**How** do we **submit our ipa file** to the **app store**?
**Hint**: file **containing our app** from **expo build:ios**
**_Step 1_: appstoreconnect.apple/com**
login with **appleID**
**go to "my apps"**
**create new app**
**_Step 2:_** install Transporter (from apple app store)
for uploading app to **appstore**
**deliver it to app store**
**can invite users by email to test app, testers**
**must download testflight, then download app on phone**
**Step 3: prepare for submission**
**provide screen shots, url, etc.**
**takes 1 day or 2 or make changes**
127
What is **over the air updates?**
**don't** have to **re-submit to app store**
**App** will **check expo and automatically download updates**
128
What are the next steps?
**think of next app idea**
**apply for a job** as a **React native developer**
should **have very strong foundation**
**be able to discover new things**
if **get a job or build an app**, share a **tweet with him**
he **wants to know he made an impact on our life**
**Salary:**
**Average $120,000 usd / year**
**entry level positions** start at **$80,000 usd /year**
**experienced $187,000 usd /year**
