Multiple Schemes and Configurations in a React Native iOS App | React Native | BETA,DEV,STAGING

hi guys in this lecture we are going to create how to create multiple build flavor or schema and reacting to your use so for Android we have already completed for those who have not watched that video you can just refer to that video I am giving the video link in the description now in this lecture what we are going to do how to create built flowers in react native iOS for that one what I am going to do I am going to create a project then I am going to create build for production staging and development right now in this terminal here you can see I have already created one project those who don't know how to create a react native project you can check out my previous videos I am going to create the project using the command react native init shopping okay here you can see project is built now what I am going to do inside this one I'm just install my port okay so it will install our code install and it will install all our dependency whatever we need for running react native iOS project then what we have to do we can open the xcode workspace now the main thing what we are going to do we are going to create a production build a staging build then a development build okay now we can just wait the pro Port installation to be completed so meanwhile we can just write down the step whatever we are going to do we are going to create different Target first then second thing is going to create different schema then connecting Target and schema then make sure our code is code installation is working perfectly working then what we can do we can just make different name for different flower and then also we can just make different icons for different flavor right at the end we are going to uh create multiple multiple Google service info paid release for a different Firebase configuration different multiple or we can just say multiple configuration for Firebase okay so this step we are going to follow for creating this production and staging and development now if I check yes our Port installation completed what we can do just open the X workspace here you can see our workspace okay now just open the workspace so this is opening our xcode yes here you can see our project is running we have just created you see the command MPX react energy init shopping right here you can see the project running on simulator what I have done just build the application using this button right so here you can see the project is running and also we can just open the code in vs code and just open the code here is my vs code you can just remove whatever is already there so I'm just going to remove the old folder just import the folder which I just created here is the shopping here now if I just go to the app.js we can just remove this header section right or we can just remove this text let's see it's reflecting now if I just refresh here you can see edit changes coming perfectly right you can just remove this section if you want yes so this is the project the project is running perfectly now what I am going to do I am going to create different uh Target first okay so for that one what I am going to do here it is that uh select the project inside here you can see Target section right here this one I am going to delete because we are not going to use test project so we can just delete this one now and the next thing is what I'm going to do I am just going to duplicate this one okay here we will treat shopping as the production one right here you can see the package is exactly the what we need here you can see example dot shopping we don't have any extension dot dot stage right so we can just read this as production now what I'm going to create I am going to create development one we can just have and one more thing I also I'm going to create before that one we can just rename this into Dev fine so we have created a Dev now what we can do also we can just create one more schema shopping dot staging right so we can just duplicate it once more click on the shopping so this one we can just create as shopping Dot State okay now what I need uh so we can just rename this as well stage okay now instead shopping go to the shopping check the build settings here you can see the package just check uh search for package here the info dot PLS is shopping.info.b list so we don't have any problem here go to the shopping this is the info.please right now go to the shopping Dev one here you can see this one is copy right we have just changed it to Dev one right so what you have to do just change this into div okay so this will be doubt in for the dot P list so this target will take this info dot please same thing we can do for staging as well right so we can just go here click States right now what we can do we can just create different schema right if you just click here you can see the schema is collected it is not created properly right now go to the product schema manage schema right now what we can do we can just remove all the selection first then what we have to do just click this one the selected one just click this one and just delete the schema created by reactivity okay so we don't have a schema for staging we have only schema existing for this production but right this one so we can just have this one now the next thing is we need to create schema for product development and staging right so we can just click on the plus button so here you can see the target is shopping dot Dev and the name is shopping.net right just click OK button here it will create the schema for shopping the target okay now the same thing for uh staging as well here you can see create another schema for shopping stage Target here you can see three schema three schema is created and we have selected that one right now just close this one here if you just click right now you can see different schema is created different Target is created right now what we need to do we need to make sure that each Target is pointing to the each uh the respective schema right for that one what you have to do go to the schema click on manage schema or edit schema right just click on edit schema now this this is the schema shopping right it's targeting to shopping this is correct right now we can just disable this one we don't want testing one right so shopping so we can just delete this one shopping schema is targeting shopping right so it is for it is okay now the next thing is we can just go to the shopping Dove if I just click schema and edit schema here you can see shopping device targeting to shopping tab this is working perfectly right so also make sure that analyze test run profile and archive is Tick marked okay it is selected now the next thing is we need to verify the last one stage in the environment right so just click on this one and edit schema here you can see stopping stage is targeting to swapping State this is okay and we have selected all the four or five uh selection that we have selected this one we should select all these uh actions and we can just close so what we have done is we have just created shopping and we have just created a shopping Target and just shopping schema shopping Dev Target and shopping devil schema shopping stage Target shopping stage schema so we have just connected this target with the schema now what the next thing we can do we can build each one so just firstly I'm going to build a shopping schema just click the plus button replace so there will be no more changes because it's already built up so we can just wait to build to be completed yes shopping is completed now what we need we need to create Dev schema so we can just select delve schema here and the click the press button now here you can see Dove build is created so keeping the production one it is not overriding the production one right now the next thing is we can just create staging Bond create the staging Bond yes so it's created the third build right so even though we don't have different name it created three build which we need right we need production build we need Dev build we need staging in build okay so we have completed the initial step setup for different schema now we can just check out the next setup now we have created tray Target and three schema we have connected Target to schema Right View I created three build the next thing is we need different EnV file for different build right so for that one what I am going to do I am going to use the library react native config go to the library here I'm going to install that Library just go to the root folder and add yarn add react native config so this will install our library for creating EnV files right so this we can just wait for a moment and then if we just go to the c i here and type type Port installed foreign so this giving me some errors right here unable to find the target name shopping test right and in shopping that project we have only find this uh Target right so we have to change our Port file so for that one what I'm going to do go to the iOS folder inside profile so shopping test we are already removed right so before going to delete this one what we can do we can just paste into here now what we have to do just copy this one shopping dot Dev which is our development Target we can just have shopping dot Dev Target and then shopping stage targets right so we can just add this one so we don't have the shopping test Target so we have already deleted right if you just check out your uh Target here you can see there is no shopping test Target now what the next thing is we can just we can save the file and install the port support install so this will create all our this will install our code for different targets so we have we don't have separate separate port for different targets we have only one target so what we have done we have just board installed now the next thing is what we can do so we have completed our code installation we can just build the application once more so that we can just make sure that it does not break anything yes we are going to create the build production so it is creating uh the build file now meanwhile we can just create our EnV file for that and go to the root project here I am going to create dot EnV file so this will be our temporary file for copying all the EnV right now the next thing is we need dot EnV dot prod this will be production work here what we can do we can declare one variable EnV e n b is equal to Broad now the next thing is we need staging in one right so we can just create EnV dot stage and what we can do we can just copy this one to here so here e and B will be States fine now the next thing is we need development one right we can just have a DOT e n Dot s now we can just copy this to here foreign file so here you can see the project is built successfully the staging build is successfully right now the next thing is what I'm going to do and going to add app.js file here just remove all The Unwanted code we can just remove all this code right we only need one view here view Style Flex equal to one align item sender justify content sender now what we can do we can just make this as a view here remove all other styling whatever the code is created by react native so we can just remove all this one we can just make app only here foreign now what we need we can just have a text here right you can just verify the text is working perfectly we can just go here and reload the project once more using the debugger menu Yes actually I can print here now what I am going to do I am going to add some more style for text font size 14 color will be Black by default you can just have yes H is coming right now what I am going to do I am going to import our config file here what I'm going to import config from react native config now what I am going to do I am going to print the config file here config dot e and B what the value which we have stored right so we can just refresh this is this will not be here because we didn't rebuild the production bill right we have only Built the staging one we can just take this seasoning one uh go to so we can just build the application once more here you can this one I am going to build so what we can do select the schema shopping and run the application so most probably all our secured values we will be souring our EnV values so our base URL talked and everything we will be storing on EnV files right so this EnV file we need to select on different schema right so what that we are going to do we are just running our application here you can see Dev right because this is selecting the EnV file now the next thing is we are we are going to create staging build so we can just create scheduling build right here and just clicking straightening below or we can just select stage so straightening build is creating here you can see staging build is created but the still the value is there because it is taking by default value from dot EnV file right so it is not selecting according to our schema right for that so we have added different EnV file that dot enb.production.staging still there is a problem right even if you look into the doubt it is showing Dev on the production as well this is the production build right still it's showing the vnb now if I just go here to this one also scheduling also it is showing Dev development one also it is showing that a Double Y right means that it only picking this EnV file whatever we have added it sure it is not picking according to our schema for that one what we can do whenever we are creating a production build it should create it should pick from production EnV if you are creating a staging build it should pick from staging EnV then if you are building a Dell bill it should pick from build right for that one what I am going to do go to the schema here you can see schema just click on the schema edit right here you can see different section right so expand the build section and click on the free action and just type press so here it will two proper will come new run script action and news and email action just what I'm going to do I'm just select new run script Action Now inside this we are going to type the script for selecting different EnV file according to our schema now here what I am going to do Echo dot EnV dot Pro just verify that it should match with our code here is dot EnV Dot Plot right now what we can do we can just copy into this into temp dot e and B file so if you have any query just check out the documentation here you can see temp EnV file right just check out the documentation here you can see temp here what this actually doing it will copy our production file into current running EnV file right we can just close this one and try to build the production build again so it's building our production now it should show production right so we can just wait now if I just refresh now the EnV file is replaced that this is a production build we are picking production EnV right now same thing we can do for staging right so what we have to do just select the schema go to the schema edit right we can just go to the edit schema here it is pre-action click on the plus button now what I'm going to do Echo copy the dot EnV dot stage into temporary variable whenever the build is creating right so you can just add e and B file clear now just run the stage name build again or so this is Dev schema right so we can just product edit schema for diab build it should select devs EnV file right not stage anymore we can just change into that fine now we can just build the dove build once more so it should select the EnV from now right so it should here be the value should be in doubt now you can just wait built to be completed yes build is completed now you can see after reloading the value is printing as Dev so it's selecting it's taking the value from dot EnV file right now the same thing we need for staging right go to here select the schema product schema edit schema now go to the pre-action and plus run button here you can see Echo dollar e and V Dot stage to the term EnV file right so you can just go close this one and create the double build so to create the stage name build we can just wait staging build to be completed we can just close the dial build for now yes so it is selecting the E and B value according to the schema so we have completed EnV configuration for different schema file here completed different EnV configuration right now what we need we need different name for different build right so we can easily understand which flower or which schema is this one for that one what I am going to do shopping we don't want to change the name for shopping the what we can do we can just go to the Target shopping Dev here you can see info info uh info PLS right so insert info Billet what you have to do just change the name into shopping there right so you can just make ad shopping day also in the build settings just verify that one draw this search product name here you can see it's already by default shopping Dev itself now what we can do inside info we can just make this as shopping Dev right so you can have a hyphen same thing we can do and for staging as well what we can do go to the bundle name here we can do we can just name shopping stage right also cross verify product name is same right you can just go to here product name so it's already product name or you can do just copy this one here in into the info dot piece here bundle displays we can just have this product name here now the next thing is we can just build a double build first we can just build first replace it so double this building we have changed our name so it should show shopping there right so you can just wait for a moment now you can see it has an extension shopping Dev right so same thing we can do for staging as well we can just have build so change your schema staging right just replace yes now here you can see this is staging build right staging EnV is fetching here you can see our probability it does not have an extension here you can see Dev Bill and stage name Bill so we have created three build with the three name is we need different images for different build right for that one what I am going to do I am going to place a build a base image for production one div one and staging one right so I have downloaded three images on my download section you can see three images production Dev staging so I am going to configure different images for different build for that one what I am going to do I am going to create different email icons for different build here I am going to use one of the website app python.co now what I'm going to do here just select production one first click then just select iPhone and iPod if you are selecting for Android also you can just click this one generate so it will generate app icon for production one so we have the production app icon now the next thing is I am going to select for dove so we can just refresh this one Dev one I am going to select now generate for drive one so we have generated for the one the next thing is scheduling one so just select the staging one yes so we have created three files now what we can do we can just unzip this one and save one and zip two now what we need we need to place this icon in our xcode right so if you look into the image set of the project you could just go here images here you can see app icon is added but this does not have an image right so what we can do we can just go into the show in folder so we have a content.json and a folder right so what we can do we can just click on this one and just delete whatever is existing now we can just open or downloaded into another finder we can just open this one go to the download section app icon here you can see assets already right so what we can do we can just copy this one with the content.json file we can just copy this one paste into our folder right so you can just paste into our folder now if I refresh you can see all the app icon is placed correctly if you try to drag one by one we cannot understand which size is each one so better to replace with it content dot Json right now what I am going to do I am going to create another app icon set Here app icon for do now what you have to do is just click show in finder go to the show in finder so this will create an icon so what we have to do delete this content.jsn now what I have to do download this is our second one right so the one so we can just copy all this into here so you can just copy yes all these places with the content.js and now if I just refresh oh something is gone wrong we can just show in finder so we have the icons we can just clean up yes or the icons are placed now the last thing is what we need we can just create another app icons IOS app icon we can just create app icon stage so we can just what I have create a stage now the next thing is what you have to do just show in finder go to the show in finder open this one remove this content.json what I have to do now the last one final one which we have downloaded right go to the download section so we have the app icon last set go to the set open this one copy all this one and just drag into our folder right now what you have to do just clean up this one now if I just wait for a moment let's wait for a moment you can see and if I just go here yes we have already added all the icon just clean up yes it's wait for a moment because it's taking time to fetch the icons you can just have show in finder go to the icon up icon storage no we didn't copy it into app icon right so you can just make this copy into we have copied into wrong folder what we can do go to this one app icon oh yes we have copied into app icon itself what we can do we can just go here just unzip this one we can just remove this one here app icon stage what we can do copy this again into Stage now what we can do we can just clean up now if I refresh oh something is going down yes it's added all the image is added it's taking some time to reload so we have app icon Now app icon stage bio applicant we have right now we need to set this in our info dot PLS what we have to do go to the email or info.please so we can just have our build settings go to the build State settings of here here you can see by default app icon will select we can just have product image or app python we can just search icon here you can see primary app icon set name so for the production we have already app icon now go for this uh shopping the go to the build setting here we can just change into app icon Dev clear so it will be set for debug and release for the staging as well we can just change the name into Stage so the name should match whatever the image set we have already added here you can see the image name is app icon Dev and app icon stays now if I just try to build each Dove so shopping we can just here you can see also image set is added right for the schema also image is added now we can build the application one by one so we can just build the production one first meanwhile before building application remove everything remove this build otherwise icon will blink okay so if you just changing the app icon just delete all this build which is created before now what I am going to do I am going to build the production one first so we can just build the production foreign yes the production bundle is building here you can see the image is added C shopping now what the next thing is we are going to build the Dell one so we can just have a dove one here you can see the image icon is set for dev1 now what we can do for stage name we can build the staging one as well right so yes perfect so we have created three build with three name and three icons so shopping have a production build shopping dev has Dev configuration here you can see Dev configuration Dev EnV files now here if you just check here you can see staging EnV file clear have completed different flavors at a price we have different name different icon now sometime there will be a dependency of Firebase right each Firebase account will be dependent on for our bundle identifier so we need different different Google service file also for demonstrating what I am going to do I am going to create one project shopping so here what I'm going to do I am going to create different Google service file for different flavors so what I am going to do create the project here we can just set the default account for Firebase then create the project so this will create a Firebase account in our console now what we need we need our package name our Google service file dependent on package name or bundle identify so we have to create three Google service files right so what we can do we can just wait the project to be completed yes some of the project is completing click on the continue now I am going to create three application right so what I am going to do here is project overview click iOS application now what I'm going to I need a bundle identifier right so firstly I'm going to create it for the production click on the shopping here you can see the bundle identifier right just click on this one or just just go to the info General you can just copy this one right so we can just copy all this code and it will be shopping just verify from the general section okay you can just click on the general section again so shopping is the end name right so we have copied our bundle identifier now what we need we need to create the project you can just go to the uh continue button or we can have a name production if you need uh so I'm not adding any name just click on the next next continue to Google console so we have created our project go to the settings and here you can see the Google info did info Google service file right just download that one yes now what I have to do go to the project on the root here I am going to create a new folder so we can just create a new folder a new group or new folder whatever you can just create we can just go to delete this group inside this one I am going to create the folder so here I am just adding Google service so in this folder only we are going to keep different Google service file here but I am going to I am going to add the file right so add file shopping too click on the add file now go to the download section paste this one so here you can see you can select the Target right so we can just select the Target Copy if item needle also need to be check and just add so it will add the Google service for the production now the next thing is we need to create the for the uh development one right so we can just go here and create another application so it's also iOS one so we can just go here so just paste this shopping and here we have to add the actions right so for the action so what you can do go to here shopping now here in the general section you can see uh there is an extension we can add that extension though and we can just have dough here register go here next next continue to console yes so we have created the dev project right so go to the dev project just click here download the Google service file so it created I downloaded the another Google file right so if you just go here here you can see Google service file is created for now what we can do we can just add one more thing here one more layer we can just add new group product production right so I am going to place this into production one yes now what I am going to do I am going to create Dove file so here you can keep the right now inside there I am going to add the file so if you keep in the same folder you should have different name right so we can our different name adding creating different folders so we can just add the secondary file before that one we can just rename that one into div right we can just go delete this or we can just move into desktop the older one so we can just rename into info.plist itself we can just go here fine now we need to add this into our project we can just add the dove one add file so this is this should be targeted to the one right we can just select the shopping dot we don't want to Target shop there so you can just add so it's added the dove one as well now we we need staging Bond right so you can just have the stage name one as well so just creating a new group here I'm going to rename into Stage now what I need I need to create new info.plist right so this is a new project we can go to the project overview here I am going to create new app it's also iOS one the package name is same thing we can just paste it shopping and the extension will be staged so if you have any clarification go to here select the shopping one click on the shopping dough here you can see that here you will get the correct bundle identifier right so we can just add this bundle identifier we can just give a name stage so we can easily identify this one so register now next next click on the next one click on the next continue to console so we have a div one stage one we can also have change this into name um yes so I think it can rename from anywhere yes project facing name we can just plot save now if I just go to the project uh it should be a way to change this name yes app nickname sorry it should be app nickname so you can just change into production one so we can just reset into the previous one we can just go here yes it's created the production one and stage name one now we need to download the staging in info.plist right we can just go here go to the service file here is the stage name one we can just download this one so we have to remove the older one right so we can just remove the older one into our desktop replace we don't want it because already we have pasted just rename into the info.plist itself now what we need we need we can just add this into our project here go into the stage add file into the shopping now what I need I need to select the file that go to the download section here info.please and this will be targeting to stage name right just add right so we have added now we can just verify which one is targeting just click on this one here is the target membership here you can see the target for the one it should Target the one and the production one it should Target the production one so we have added different info diet pills now if you build the application once more there should be no changes as we have not integrated Firebase right so you can just try with integrating Firebase as well there will be no issues you have added different info.plates for different build schema yes bill is getting successfully so we have built this staging one inside the staging we are fetching the staging EnV file so we have completed all the setup for different flavors or different schema build for react native iOS [Music]

Channel: JAS ACADAMY

Views: 10,876

Keywords: JASACADAMY, Technical, Coding, React native, nodejs, Devops, News, interview tips, resume format, resume writing, career, communication, social meda, time management, polytechnic, diploma, Perfomance, development, udemy, google, covid, jasacadamy

Id: rhdOWYqc-Cg

Length: 43min 14sec (2594 seconds)

Published: Mon Oct 03 2022