Easy Way to Add React Native App to Expo
About 38% of the professional developers of the world confirm that they use React Native framework to develop cross-platform apps.
The reasons can be many. One of the crucial reasons being it is cross-platform driven such that you can use the same code base to develop multi-platform apps.
On this note, this tutorial brings you an essential part of app development: to ‘add react native apps to the Expo Store’.
If you are a part of react native development agency, you will not want to skip this tutorial.
Without knowing how to deploy or adding apps to a proper app store won’t complete the series of app development.
If you are wondering what app deployment is. It is the process of publishing the developed apps to a definite app store.
Here, the term ‘definite’ is used in the sense that certain apps get published in certain app stores.
For example, if you are developing a react native Expo app, it would be published in the Expo app Store.
You can also list or publish it in the Google Play store or Apple App store. However, at the initial stage publishing it in the Expo App store would be much easier and under budget.
What is the Expo App store?
It is a store like the Google Play store and Apple App store.
It allows you to list the built projects (expo react native app) on its dashboard. Also, it lets the users interact with the app in the Expo App Store.
You need to create an account to access all its features and functionalities.
Go through this section of ‘Key definition’ to ensure your familiarity with the jargon that is used in the following tutorial steps.
- Slug- You can find the ‘slug’ option in the asset folder of the considered project. It is simply the name of the app used in the URL of the developed application.
- Splash screen- Splash screen is the screen that is displayed to users immediately after they open the app.
- App icon- As the name suggests, the App icon is just the small icon created for the app.
- Name- It is the name given to a built app. You can change the name in the asset directory of the developed app.
Now let’s start with the main steps of app deployment.
Step 1: Expo account creating
- Go to expo.dev/signup and create an Expo account. It is the initial step through which you can access the Expo App store. If you have one, just log in to the same account.
Step 2: Prerequisite consideration
- Without a react native expo app, you cannot move further. So if you need guided steps, check the article to create such a React native expo app from scratch.
- Once you are done creating an Expo app, you have to make some changes to the app in its root directory. Here, I have made changes to the slug, Name, App icon, and splash screen to make the app more presentable.
- Open the code editor of the built app. Here, I am working on the VS Code, so I will make changes to it.
- Select the app.json file. Change the section of “name” with a suitable app name you like. Do the same with the “slug”. However, put a dash in between all the used words.
- As you can see from the following given image, I have changed the “name” to “Innovative App” and “slug” to “Innovative-app”
- Open the asset directory in the VS Code editor. Here, you will see some default icon images have already been saved. You have to substitute this with some other images.
- I have downloaded two suitable images. One for the splash screen and the other one for the app icon. Save it to the asset file of your local disk.
- Save the process and delete the default images that have been there for the app icon and splash screen.
- Consider images that are of equal width and height.
- You also have to substitute the default name of the icon and splash image in the editable section of the code editor. Refer to the right side of the given image.
- You can also add some descriptions to your app. Consider the given image for including the “description” on your app screen.
- Save the process and you are done with the changes.
Step 3: Deploying ‘Innovative App’
- Make sure that you have expo CLI installed in the developing system. If you have not installed it, allow the cmd to run as administrator and pass the command npm install -g expo-cli in it.
- Now log in to your account. Run expo login in the cmd. You have to insert your password and email address.
- You will be shown a message that you have successfully logged in.
- To publish the app into this account. Run expo publish. After some time, it will be published.
Step 4: Cross-Checking
- This step will help you to cross-check whether the app is correctly published.
- Open the account from your browser. Similar to the image attached below, your app will show up in the left panel if it has been published in the store.
- Here, my ‘Innovative App’ has been published successfully.
- If it is not published, again go through the above steps.
- If it is done, open the app from the left side panel, and you can see the overview of the app.
- To ensure the app’s visibility on your created profile, you have to switch on the ‘Public’ mode from the settings. It may be seen as ‘Unlisted’ mode as the default option.
- Open your name icon from the right top corner and then go to the ‘Profile’. Here you can see all the apps that you will publish.
You have successfully made it. congratulations.
You should not avoid the step of app deployment. Every time you build an app with react native expo, you should go through these steps to deploy your app. Also, react native app development company ensures to publish or deploy their app in the Expo app store before moving forward with the further steps.