React Native: Multi-Environment/Flavor Setup (App Icon, App Name, GoogleService.json) for iOS [Latest] - 2
Ajmal Hasan
Posted on October 26, 2024
Must Follow Android First:
<- ANDROID CONFIGURATION
iOS CONFIGURATION:
Step 1:
Open myapp.workspace
xed -b ios
Step 2:
Duplicate myapp
in Target section by right click and rename them production
and development
.
Step 3:
Go to Manage Schemes...
:
Rename the myapp copyies
to development/production
Step 4:
Go to Build
Pre-actions
Select scheme(like development in screenshot)
Click + to add 2✌🏻 "New Run Script Actions"
Select scheme(like development in screenshot inRun script
also)
Add this in First Run Scripts:
# Type a script or drag a script file from your workspace to insert its path.
rm "${CONFIGURATION_BUILD_DIR}/${INFOPLIST_PATH}"
echo ".env.development" > /tmp/envfile
Add this in Second Run Scripts:
# Type a script or drag a script file from your workspace to insert its path.
"${SRCROOT}/../node_modules/react-native-config/ios/ReactNativeConfig/BuildXCConfig.rb" "${SRCROOT}/.." "${SRCROOT}/tmp.xcconfig"
DO FOR PRODUCTION SIMILARLY with
.env.production
Step 5:
Select scheme(like development) and rename Info.plist File
Select new generated myappInfo.plist
(1) and rename(2)
Also in Bundle display name
in .plist
put $(DISPLAY_NAME)
or App name as per environment.
Step 6: iOS Change App Icon and App Name
Change App name as per scheme in Display Name/ also you can change in Info.plist of 'Bundle display name':
Change App Icon: First, add/duplicate the new icon set in Images.xcassets
and replacing with specific icons.
Then, in Xcode, navigate to the app icon settings and select the new icon from the available options.
Finally, properly clean project and RUN.
Step 7:
In Podfile
make these changes:
# react-native-config
pod 'react-native-config', :path => '../node_modules/react-native-config'
# For extensions without React dependencies
pod 'react-native-config/Extension', :path => '../node_modules/react-native-config'
# react-native-config
Also add these:
target 'development' do
inherit! :complete
end
target 'production' do
inherit! :complete
end
// target 'myapp_mappTests' do
// inherit! :complete
// # Pods for testing
// end
Use these command to run app:
"scripts": {
"iosAppStart": "yarn ios:dev",
"iosAppStartProd": "yarn ios:prod",
"ios": "yarn setDevelopment && npx react-native run-ios",
"iosNew": "yarn setDevelopment && npx react-native run-ios --simulator='iPhone 16'",
"iosSE": "yarn setDevelopment && npx react-native run-ios --simulator='iPhone SE (3rd generation)'",
"ios:check": "react-native run-ios -h",
"aos:check": "react-native run-android --list-devices",
"lintFixAll": "eslint 'src/**/*.{js,jsx}'",
"prettierFixAll": "prettier --write 'src/**/*.{js,jsx}'",
"fix:lintPrettier": "yarn prettierFixAll && yarn lintFixAll",
"cleanCache": "npm start -- --reset-cache",
"start": "react-native start",
"killAllBundler": "killall node",
"adb": "adb reverse tcp:9090 tcp:9090 && adb reverse tcp:8081 tcp:8081 && adb reverse tcp:3000 tcp:3000",
"installAll": "yarn && cd ios && pod install && cd ..",
"cleanGitIgnoredFiles": "rm -rf .jso node_modules package-lock.json yarn.lock && cd ios && rm -rf build pods .xcode.env.local Podfile.lock && cd .. && cd android && rm -rf build && cd app && rm -rf build && cd .. && cd .. && yarn installAll",
"setDevelopment": "ENVFILE=.env.development",
"setStaging": "ENVFILE=.env.staging",
"setProduction": "ENVFILE=.env.production",
"aos:dev": "yarn installAll && yarn setDevelopment react-native run-android --mode=developmentdebug --appIdSuffix=myappdev",
"aos:dev-release": "yarn installAll && yarn setDevelopment react-native run-android --mode=developmentrelease --appIdSuffix=myappdev",
"aos:prod": "yarn installAll && yarn setProduction react-native run-android --mode=productiondebug --appIdSuffix=myappprod",
"aos:prod-release": "yarn installAll && yarn setProduction react-native run-android --mode=productionrelease --appIdSuffix=myappprod",
"aos:clean": "cd android && ./gradlew clean",
"aos:DR-apk": "yarn setDevelopment && yarn aos:clean && cd android && ./gradlew assembleDevelopmentRelease",
"aos:PR-apk": "yarn setProduction && yarn aos:clean && cd android && ./gradlew assembleProductionRelease",
"aos:DD-apk": "yarn setDevelopment && yarn aos:clean && cd android && ./gradlew assembleDevelopmentDebug",
"aos:PD-apk": "yarn setProduction && yarn aos:clean && cd android && ./gradlew assembleProductionDebug",
"open-apk": "open ./android/app/build/outputs/apk/",
"aos:dev-apk": "yarn aos:DD-apk && yarn open-apk",
"aos:prod-apk": "yarn aos:PD-apk && yarn open-apk",
"uninstallApks": "cd android && ./gradlew uA && cd ..",
"aos:dev:release-apk": "yarn aos:DR-apk && yarn open-apk",
"aos:prod:release-apk": "yarn aos:PR-apk && yarn open-apk",
"ios:dev": "yarn installAll && yarn setDevelopment && react-native run-ios --mode=Debug --scheme \"development\"",
"ios:dev-release": "yarn installAll && yarn setDevelopment && react-native run-ios --mode=Release --scheme \"development\"",
"ios:prod": "yarn installAll && yarn setProduction && react-native run-ios --mode=Debug --scheme \"production\"",
"ios:prod-release": "yarn installAll && yarn setProduction && react-native run-ios --mode=Release --scheme \"production\"",
},
Usage of .env values in Native side:
Posted on October 26, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 29, 2024