Step 7. Deploy mobile apps

From the previous step

You already downloaded the app.json file and replace it into the correct position in the mobile app source code. 

62aaU72klUPaGg3Sewvrjza1EUrq2ykQpPgccseV.png

Upload the app icon


By recommendation form EXPO  the app icon should be 1024x1024. Now open the REACT APP BUILDER in the browser and by clicking on the app set up in the side menu and after that click on Basics. There you will see the upload button to upload your own app icon. Click on the button and upload your app icon.


ykuTDlDE21sWOBL1a7GeHgvBFpidiXjnoMNWkBOR.png

NOTE: This may not work if you still don't have enabled the Firebase Storage. First, go to your firebase console and click on Storage. And after that click on the Get Started.  Look at the pictures below.

3B81v5UilV8U2wgM1i5pOkLlXkbuO8Z8YfGUbCkM.png

rjCqRrT0lkOxl5r7JGjH173MZFBoxYhTcaAdUnI1.png

Now if you go to the react app builder dashboard, you will see the app icon that you uploaded.

mlwOGimNGKPRaGCsYSZjjXHQtrjFh0K1okM0OXEm.png

Now click on Produce App button and go to Set Icon,  there is explained that you should go to the Mobile app project/assets and there to replace the current app icon with the one that you had. 

s8MAKXmw1xgZE0J3uJ4QxnNb8mLaqLRG04mACKvD.png

Replace it here like in the picture below. Also, you can change the splash image if you want.

ONg69bXlNAmZcct6TNshrcxolcLhnp7ySfBRcjLj.png

Also, you can change the app logo,  sideLogo and navLogo whit your own, but they are in the different path in the mobile app project/ APP/Images and then change this tree images. Side logo appears only if you use the side navigation

JJZ41fYEkncyA4Q8DdIGh5GUU6XyHVupJc8clVk5.png

Deploying 

We should guide to this expo documentation first building-standalone-apps. The first step we already have installed EXPO cli and for the second step, we already have the bundle identifier for iOS and package for Android in our app.json file.

jglGqCHOgRJmKPFpraGn2QXxglRC8JG3CN9tn4N8.png

Step 3 is to start the build process. For Android, you should enter these commands to your terminal.

NOTE: Make sure that you are in the correct destination where package.json is.


Build the Android app

First, we will start to build or Android app, run this command 

expo build:android


After running this command you will be asked about the keystore and you should see something like this. We recommended to choose the first one, to let expo to build handle the process. 

TaZnmh83wNPtFz0Jwtlz3lvQdR0lJZXvnrDxyBe4.png

When the build process is done you should click on the url that will show in the terminal or cmd.

2Qfm5QES6C3i9Gwy5bOnC6Rlhhi4vqwR8xFU4CmH.png

and it will open the expo logs, and there when the process is completed you should be able to download the apk file.

1HABCrIODF1nfTNhZmTY7MBNlPTKbUf9jskN2i9S.png

Upload this apk file to your google play developer account.


 Build the iOS app


Now you will run this command, but first, make sure that you are in the correct place where package.json is.

expo build:ios

After you will be asked about your credentials. You should see something like in the picture below.

And for the question that you will be asked, we recommended the second one to let EXPO handle the credentials.

 SAWgHWfjwvNcN7B6LEdBNIXexAJ08c1c3NDYLg9d.png

And now you will be asked about your apple id and password.  You should have Apple developer account to be able to upload the app on App Store