Flavors(environments) in React Native
Are you looking for methods to make your React Native development easier and faster? Then Flavors in React Native is the right solution that helps in creating apps with minimal differences.
We will be providing you insights to save the React developers times and efforts by being highly efficient.
What is flavor?
Flavor is one type of environment. We have different environments like development, staging, and production when working on live projects. So, for that project, these environments are flavors.
Let’s figure out all there is to learn about the flavor.
The term “flavor” in React Native often refers to creating and releasing numerous variations of your mobile application for different uses, such as development, testing, and production. The same program is frequently made in several iterations with varied configurations, resources, and behaviors using flavors.
Flavors and build configurations, environment settings, and resource management are frequently intertwined in the context of React Native (and mobile development in general).
Different server endpoints and API keys can be managed for different environments using flavors. This ensures that your app talks with the appropriate backend services during development, testing, and production.
In order to express the distinct personality of each version of your app, you could have various app icons, splash screens, and other resources for different flavors.
Depending on how the app is meant to be used, flavors can also activate or turn off particular features or elements. You might, for instance, have a “demo” flavor that reveals special features concealed in other flavors.
Why are React Native flavors essential?
Sometimes, developers need to create different builds for different flavors. So, developers change the URL of the server according to their needs.
In that scenario, developers do not need to change the URL if the flavor has been implemented. They only need to run a specific command already defined in the package.json.
Also, sometimes developers want to make some changes for specific environments. That time, flavor is essential. If flavors are already implemented, then developers can easily manage these things.
Where can we use it?
When there are several flavors (environments), we can go for it.
And Let’s go for the Implementation of flavors.
Developers have to do different processes for Android and iOS.
First, we are going for the Android device.
1. Add a “react-native-config”: “^1.5.1” dependency in the package.json
2. Create files in the project directory as shown below’s image and set environment variables in each File as your requirements
You can store all important things related to that environment or flavor in these files. Developers can put their API’s endpoint, any keys, or something like that which are helpful for that flavor only and access it from there.
3. Add these lines to your app-level build.gradle file
4. Now, we will add flavors to Android in the app-level build.gradle file
5. Now we have to add some scripts for run. Also, we will add some scripts for making release builds of any flavor.
6. If you want to make an app name and icon regarding your flavors, then you need to follow these steps also
First, copy the android/app/main and paste it according to your requirements.
7. Then, you can change the name from this path in your specific flavor folder. Do the same process for all flavors you want to change the name.
8. To change the app icon, replace these mipmap folders with your new mipmap folders(new icon).
If you don’t have an idea about how to make mipmap folders of your icon, then you can create one from this link: https://www.appicon.co/
Do the same process for all flavors you want to change the name.
Here is the output for the Android device
That’s all there is to say about Android devices.
Now, we can go ahead with the iOS device.
1. As we know, we have added one dependency(“react-native-config”: “^1.5.1”) in the package.json, so first, we have to run the command “pod install” in the iOS folder.
-> cd ios && pod install.
2. We have to make targets for our flavors. So, for that, we need to make a duplicate schema. You need to click on that and select duplicate. Otherwise, it would help if you fixed it and press command (⌘) + d.
3. After creating it, we need to check whether the names(names should be the same as we keep in targets) are correct, as shown in the image.
If it is correct, then you can skip this step. We are going to change the name. For that, first, we have to go on manage schemes. Then, double-click on which should be changed. Now you can change it as we kept in targets.
4.Next, choose your flavor and then go to Edit Scheme.
Then, do the same as shown in the image.
Go to Build -> Pre-actions.
After clicking on Pre-action, you see this window. Now click on plus, as we can see in the above image.
Select your scheme and add a script, as shown in the above image. Apply the same procedure now to the pre-actions in Debug mode.
All flavors need to pass by carrying out the same procedure.
5. We have to make some changes in the pod file, as mentioned below
6. Then verify the name of info.plist as flavor name just like the below image
If you want to change the name of the info.plist then follow these steps
Select flavor from targets -> go to build settings -> search info.plist -> Info.plist File (under packaging) -> change the name.
7. If you want to change the app name according to flavor, then go to info.plist for that File and change it just like the below image
Here is the output for iOS device
Conclusion
If we have different environments for our project, we can go for flavor setup. It saves much time till to the end of a project. As we know, the Mobile developer needs to make a build every time QA wants, so if we have a flavor set up, we need to run a command for any release build. It saves lots of time without worrying about changing different URLs.
We can make many things easy after the use of flavors. Our React developers have excelled to provide the best solutions in the market and beating the competition.
