React Native: Multi-Environment/Flavor Setup (App Icon, App Name, GoogleService.json) for iOS [Latest] - 2

ajmal_hasan

Ajmal Hasan

Posted on October 26, 2024

React Native: Multi-Environment/Flavor Setup (App Icon, App Name, GoogleService.json) for iOS [Latest] - 2

Must Follow Android First:
<- ANDROID CONFIGURATION


iOS CONFIGURATION:

Step 1:

Open myapp.workspace

xed -b ios 
Enter fullscreen mode Exit fullscreen mode

Step 2:

Duplicate myapp in Target section by right click and rename them production and development.
Image description


Step 3:

Go to Manage Schemes...:
Image description
Rename the myapp copyies to development/production
Image description


Step 4:

Go to Edit Scheme...:
Image description

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 in Run script also)

Image description

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
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

DO FOR PRODUCTION SIMILARLY with .env.production


Step 5:

Select scheme(like development) and rename Info.plist File
Image description

Select new generated myappInfo.plist(1) and rename(2)
Image description
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':

Image description

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.
Image description

Image description

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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\"",
  },
Enter fullscreen mode Exit fullscreen mode

Usage of .env values in Native side:

Image description

💖 💪 🙅 🚩
ajmal_hasan
Ajmal Hasan

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