DEV Community

Ajmal Hasan
Ajmal Hasan

Posted on

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

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


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 the new icon to Images.xcassets. Then, in Xcode, navigate to the app icon settings and select the new icon from the available options.
Image description


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

Top comments (0)