To run the Android app, we can specify a variant like react-native run-android - variant=productionDebug, but I prefer to go to Android Studio, select the variant, and run. After that, we can see that we have four build variants: How to run staging and production They are configured in the app module adle: buildTypes Ĭlick Sync Now to let gradle do the syncing job. By default there are only debug and release build types: Open the android folder in Android Studio. Staging and production product flavors in Android To solve it, we must disable Parallelise Build and add React target and move it above MyApp Staging. It is because React target is not linked yet. You can run into issues like ‘React/RCTBundleURLProvider.h’ file not found or RN: ‘React/RCTBridgeModule.h’ file not found. You need to make sure that the scheme is marked as Shared so that it is tracked into git.įor some reason, the staging scheme does not have all the things set up like the production scheme. I usually delete the generated MyApp copy scheme, then I create a new scheme again for the MyApp Staging target. Xcode also duplicates the scheme when we duplicate the target, so we get MyApp copy:Ĭlick Manage Schemes in the scheme drop-down to open Scheme manager: After dragging, MyApp Staging target can’t find the plist, so click Choose ist File and point to the ist. Change it to a more meaningful name ist and drag it to the MyApp group in Xcode to stay organised. When we duplicate MyApp target, Xcode also duplicates ist into MyApp ist for the staging target. Change the bundle id of MyApp to and MyApp Staging to. Let’s call it MyApp Staging.Įach target must have unique bundle id. Let’s use MyApp target as our production environment, and right click -> Duplicate to make another target. If we don’t need the tvOS app, we can delete the MyApp-tvOS and MyApp-tvOSTests. In Xcode, a project can contain many targets, and each target means a unique product with its own build settings - ist and app icons. React Native creates iOS and tvOS apps, and two test targets. Open MyApp.xcodeproj inside ios using Xcode. The resulting build variant is the “demoDebug” version of your app, and it includes a combination of the configurations and resources included in the “demo” product flavor, “debug” build type, and main/ source set. For example, a “demo” product flavor can specify different features and device requirements, such as custom source code, resources, and minimum API levels, while the “debug” build type applies different build and packaging settings, such as debug options and signing keys. In Android, debug and releases are called build types, and staging and production are called product flavors. Projects can contain one or more targets, each of which produces one product A target defines a single product it organizes the inputs into the build system - the source files and instructions for processing those source files - required to build that product. A target specifies a product to build and contains the instructions for building the product from a set of files in a project or work-space. For example, it is common to have separate build configurations for debug and release builds of a product. A build configuration specifies a set of build settings used to build a target’s product in a particular way. In iOS, debug and releases are called build configurations, and staging and production are called targets. There are some terminologies we needed to remember. Build configuration, target, build types, production flavor, and build variant In this post, we will do just like we did with native apps, so that we know the basic steps. There will of course, be tons of libraries to help us with managing different environments. Let’s call our app MyApp and bootstrap it with react-native init MyApp. In fact, to add a staging and production environment, and to add app icons, requires us to use Xcode and Android Studio, and we do it the same way we do with native iOS or Android projects. For example, we might need multiple skins, themes, a free and paid version, or more often different staging and production environments.Īnd the task that we can’t avoid is adding app icons and splash screens to our apps. And for each app that we build, there are times we need to reuse the same code, build and tweak it a bit to make it work for different environments. React Native was designed to be “learn once, write anywhere,” and it is usually used to build cross platform apps for iOS and Android. By Khoa Pham How to add app icons and splash screens to a React Native app in staging and production
0 Comments
Leave a Reply. |