React Native Expo to APK File

so far i have released four video in the series where we saw how we can build this full stack application full stack react native blog application in the very first video we saw that how we can build the backend dpa in the second video we saw that how we can create admin panel for the backend api that we made in the very first video and in the third video i showed you how we can build this exact application using react native and in the fourth video i showed you how we can upload our backend api to this live server called heroku and at the end we got this result this is our live api as you can see this is our domain and here we have this post currently inside our database we just have the single post and we have this right here okay and now in this video i want to show you guys how we can convert our react native app to apk file and you may ask why just apk file and that is because if you come to this documentation so this is the documentation that you can follow to build your standalone application if you are using xposed cli so you don't need to worry about if you are using windows system or if you are using mac if you want to build your android and ios both of the file or both of the application for both of these marketplaces then you can do that with expo because expo will not do all these things inside your system first it will upload your file to its own server and then it will convert those files or those code into this ios and this android standalone app but if you want to make this ios standalone app then you need to have this apple developer account and obviously you can build your ios application or ios file with this expo but to test this application you need to have your apple account so that you can upload this to your app store otherwise you need to have mac system so that you can run this application inside your device okay so if you come all the way down here you can read all these things right here so i'll recommend you guys to come to this documentation and read about these things if you want to publish your application and if you are serious about these things because if you read this line it's a good idea to read this based practice about deploying your app to this app store to ensure your app is in good shape and that is because both of these marketplaces this apple and google they all have their own rules and regulations so you need to read these things before you publish your application okay you need to have your application according to their rule so come here and read about these things and one more thing here if you want to publish your application to this play store or this app store you need to have these accounts and these accounts are not free okay if you want to create this apple developer account or account inside this google play store both of these will cost you some money i don't know about the app store but this google play store will cost you around 20 okay so here we want to go with the free option so i'll just show you how we can build this apk file so let's see this quickly how we can do it so first of all what we will do we will change some of the things from inside this application first thing first we need to change our splash screen and this icon now if you guys don't know what this splash screen is then let me reload this application so this is the image or the animation which you will see whenever your app is starting up for the very first time okay and the icon is the icon which will be your app icon so these three are the icons so this is now currently default icon for our application and now we want to change this you can leave it like this but it's nice to change okay so you can simply right click here and click on that reveal and file explorer so this is our splash screen and this is our icon now the best practice is to create this image with the same dimension like this is the dimension that this expo is using for this splash screen and you can check the same thing for this icon as well so 10 24 by 10 24 this will be the size of this icon so what you can do you can open your favorite editor that you like so this is my free tool pigma so this is the icon and the splash screen that i'm going to use for this project and these are with that same dimension 1024 by 1024 and this is 1284 by 2778 now i'll quickly export these things and i will add this inside my folder so now i'm using this splash screen and this icon for this application and if you want to change this name or if you want to use any other images then you can come to this app.json and you can change this name or or this link from here so this is the link for your icon and this is the link for your image okay and also let me show you one more thing here now i will reload this application and i'll go here and let's change this to red only let's save this and i will reload this application like this and i cannot do it like this i need to open this application first and you can see this red part here and this is obviously first i need to kill the server so this is the thing that we need to handle inside this expo whenever you change your splash and things we need to restart our server and now you can see this is the thing that i wanted to show you you can see this red line here and here and that is because of this resize mode okay here you can see this content so i'll change this to center or cover let's save this and i'll reload this again and now you can see it is covering all of these things so now we can simply change it to white now that's it for this splash screen part and the next thing that we can change is this name so we can change this name to blog app or the name that you like for your application and this is the slug which you will be shown in your expo dashboard so you can also change this okay and i'll change it to r and block app means react net blog app which makes no sense but i'll use it like this now i will make this package name with the same name okay rn blog app so i'll go here iron blog app dot my app so this is the package name now if you want to know more about these things then you can come here and if you come down so this is the configuration that you can setup inside your export.json not export.json app.json and these are the things which we just changed okay so we just change the name icon and also you can change the version if you are uploading it for the second time but we are just doing this for the first time so we will make this version like 1.0.0 because this is our first app and also here you can read about this slug and all of these things and i'll not go through all these things we just change these things and that's it this is the thing that we will change inside this export.json i'll save this and the next thing and the very important thing that you need to do go to this api client.js and here we are using this base url so i will change this with our live url which we have inside the suroku so this is our url now we are going to use this one so i simply remove this so this will be our base url okay now i'll save this and the next thing that we can do we can simply export this application let's open the terminal i'll kill the server and let's clear out this terminal and one more thing to publish this application first of all you need to have account inside this expo so simply go to this export.deb or export.io and here you can click on the signup and you can create your brand new account this account creation part is free and if you already have account then don't need to worry about this thing you can simply log in inside your application with id and password let me show you how we can do that so here simply we will run this command expo build colon android so this is the command that we want to run or that we need to run to create this apk file so i'll simply press enter and sorry for my spelling mistake expo build colon android and now it will take some time and it will ask you some questions as well so the very first question it will ask you is this one okay so if you want to create your new account or if you want to log in with your existing account so let's change choose the second option you can choose these options with this up and down arrow key i'll go with this second one here we need to provide this email address so this is my email address and here we also need to provide this password as well and now it is again asking you for this question if you want to just build this apk file or if you want to build this bundle app bundle okay and i just want to build this apk i'll go with this one and if you want to know more about these things and i am again telling you guys come to this documentation and read about these things okay and again it is asking you for this key store thing and if you want to publish this application to play store come here and read about this key store okay so this is the key store which is very important thing which you need to generate and store it or place it in safe place because this is the key store which you will use to publish your application and you will use the same keystore later whenever you want to upgrade your apk version or app version okay but for now i'll just go with this generate new key store and expo will handle this thing and now it will take some time to build this application or to upload this application to expo server and now you can see our application is uploaded successfully to this expo server and this build is in queue and that is because we are currently using the free version so this expo will build this behind the scene and now you can simply kill this terminal you don't need to worry about these things but now if you come to your expo dashboard now if you log in with your email and password this is the dashboard that you will see now if i reload this then here you can see this is our new blog app so this is building our application and this is currently in queue so it will build this application and it will take some time so you can come to this page later and later you will see something like this let me show you this let me go to this dashboard and if you successfully build this application or if this process is finished then you will see something like this you can download your apk file and install it inside your device and make sure if you download this to place it in safe place because after 29 days this application will go away from the space and if you are publishing this application if you publish this application this will be available inside your play store but this will go away from inside here okay so you can see only for 29 days okay it took a lot of time to build this application finally we have this application right here and if you come here you can see this title here finished and as you can see here this is now will be valid for 29 days but we can simply download this and install it inside our phone okay now i'll download this and i'll place it inside my phone and i will see you there as you can see this is the application that i downloaded and i have placed it inside my device okay now i will open this inside my phone so this is our application let's install it and let's see how it looks so it is asking for this play protect is protecting this app device or things like that so i know this application is safe so i will click on this install anyway and now this application is installed so let's open this and as you can see this is our application and finally here we have this post inside this application currently inside our application we just have the single post and you will see little bit of slowness inside this app and that is because of the huroku server because if you are not using your uraku server your server will go to sleep after 30 minute so this is the default inside that free plan okay but currently you can see this app is running completely fine so that's it for this video this is how we can build this apk file inside our expo react native so with this video this series is completed now and if you guys have any questions then you can ask them in the comment section for now that's it for this video i hope you like this video and learn something new if this is the case then don't forget to hit that like button subscribe if you haven't already and i'll see you guys in my next video

Channel: Full Stack Niraj

Views: 39,358

Keywords:

Id: MK4JjqbHFBk

Length: 14min 31sec (871 seconds)

Published: Mon Feb 28 2022