React native app build for Android and iOS

Dipankar

5 years ago

The best and easiest way to build a React Native APP for both Android and iOS. We need an installation file to publish our mobile application. Therefore, you require an installation file for mobile.

In this tutorial, we discuss the build process of a react native app. And also discuss some common problems that occur at the time build installation of file.

Install Expo CLI
Resolve common errors
Configuration of App.json file for React native app build
Change icon and splash images for app
Build process of the React native app
How to solve the Errors

First of all, you need to create a native application before building it for android and ios. I hope you have created your app and ready to publish. If you want to know how to create an app in react native then please go through the following link.

Create your react native app for Android & iOS

Click on above link to know simplest way to create react native app.

Convert your website into a mobile ap p

Click on above link to know how convert your website into a mobile app.

React native build app .apk for android or .ipa file for ios

Now we discuss the essential steps that need for building .apk (Android) and .ipa (iOS) file.

Step 1: Install Expo CLI

We use the expo CLI tool for developing and building the app. Therefore we need to install Expo CLI. For installation Expo CLI run following command in terminal.

npm install -g expo-cli

yarn global add expo-cli

If you use expo first time then you need to create an expo account and login with the expo account. You will get automatically this account creation form when need. Just fill up with a valid email id.

If you are a windows user then you must enable WSL. You can read installation guideline of WSL

Sure — here’s a clear and helpful content draft you could use for a blog post or documentation!

How to Resolve:

CommandError: Required property 'ios.bundleIdentifier' is not found in the project app.json. This is required to open the app.

If you’re working on a React Native project using Expo and you’ve run into this error:

CommandError: Required property 'ios.bundleIdentifier' is not found in the project app.json. This is required to open the app.

don’t worry — it’s a common and straightforward issue to fix! This error simply means that your Expo project’s app.json or app.config.js file is missing a necessary configuration value for iOS.

Why This Error Happens

Expo uses the bundleIdentifier to uniquely identify your iOS app. Without it, the build process or certain commands (like expo run:ios or expo build:ios) won’t know how to configure your app for the iOS environment.

How to Fix It

Step 1: Open `app.json` or `app.config.js`

Locate your app.json file in the root directory of your project. It typically looks something like this:

{
  "expo": {
    "name": "YourApp",
    "slug": "your-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "platforms": ["ios", "android", "web"],
    "sdkVersion": "XX.0.0",
    "ios": {}
  }
}

Step 2: Add the `bundleIdentifier` Field

Under the ios key, add your unique bundle identifier. For example:

{
  "expo": {
    "name": "YourApp",
    "slug": "your-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "platforms": ["ios", "android", "web"],
    "sdkVersion": "XX.0.0",
    "ios": {
      "bundleIdentifier": "com.yourcompany.yourapp"
    }
  }
}

Make sure to replace com.yourcompany.yourapp with your actual package name, typically using reverse domain notation.

Step 3: Save and Retry

After saving the file, re-run the command that triggered the error, for example:

expo run:ios

expo build:ios

This time, the process should proceed without any issues!

Additional Notes

Unique Name: Make sure the bundleIdentifier is unique to your app. Apple uses this to distinguish apps on the App Store.
Matching Identifiers: If you’re using services like Firebase or Apple Developer configurations, this identifier must match exactly.
Version Control: Be sure to commit this change to your version control system so other developers or CI/CD pipelines don’t face the same issue.

Conclusion

That’s it! By adding the bundleIdentifier in your app.json file, you resolve the error and ensure your app can build and run smoothly on iOS. This step is an essential part of configuring any Expo-managed workflow for iOS deployment.

If you’d like, I can help you draft similar troubleshooting guides for other Expo or React Native errors too! Want me to write one?

Step 2: Configuration of App.json file for React native app build

In this step you need to create two configuration settings. One is for android and another is for iOS. Update the App.json file with as following.

{
  "expo": {
    "name": "APP Name",
    "slug": "app-name",
    "privacy": "public",
    "sdkVersion": "36.0.0",
    "platforms": [
      "ios",
      "android",
      "web"
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "bundleIdentifier": "com.companyname.appname",
      "buildNumber": "1.0.0"
    },
    "android": {
      "package": "com.companyname.appname",
      "versionCode": 1
    }
  }
}

Hare you just need to change your app name and slug and add two additional sections.

For Android

"android": {
      "package": "com.companyname.appname",
      "versionCode": 1
    }

For iOS

 "ios": {
      "bundleIdentifier": "com.companyname.appname",
      "buildNumber": "1.0.0"
    }

Do not forget to change your unique identifier. For android change the value of “package” and for iOS change the value of “bundleIdentifier”. It’s necessary before start building app.

Step 3: Change icon and splash images before start building React native app

Change app icon which is available under the assets directory. Also change splash image before start the build process. Keep the splash and icon exactly the same aspect ratio and height width. Best way to open those files with Photoshop or other image editor software and change it with your images.

Step 4: Start the build process of the React native app.

Run build command for creating .apk file for android and .ipa file for ios. Run the following command.

For android

expo build:android

For ios

expo build:ios

If you want to build for Android

In the case of android build you can choose two types of build processes. One is for build “APK” and another is Android App Bundle. Below describe commands for both.

For build “APK”

expo build:android -t apk

For app bundle

expo build:android -t app-bundle

App bundle is always recommended but one important checking you need to do that is Google Play App Signing enabled in your project. Run the expo command in command prompt.

Build Errors and solutions

ERROR! “expo” is not recognized

You may get this error while run expo command for build purpose.

‘expo’ is not recognized as an internal or external command, operable program or batch file.

If you get this type of error then check the “%USERPROFILE%\AppData\Roaming\npm” location. just copy the location and open folder and find the “EXE” file. the “EXE” file name may be “exp” instead of “expo” and also check the environment variable path. If the path does not exist then you should set the path.

Is case of the “EXE” file name is “exp” the please go with following command.

For Android apk file

exp build:android

For ios .ipa file

exp build:ios

Error: Problem validating fields in app.json

[21:13:07] Error: Problem validating fields in app.json. See https://docs.expo.io/versions/v36.0.0/guides/configuration.html
[21:13:07] • Field: ios.bundleIdentifier – ‘ios.bundleIdentifier’ should be a iOS bundle identifier notation unique name for your app. For example, host.exp.expo, where exp.host is our domain and expo is our app name..
[21:13:09] Error: Problem validating fields in app.json. See https://docs.expo.io/versions/v36.0.0/guides/configuration.html
[21:13:09] • Field: ios.bundleIdentifier – ‘ios.bundleIdentifier’ should be a iOS bundle identifier notation unique name for your app. For example, host.exp.expo, where exp.host is our domain and expo is our app name..

This type of error we get due to invalid app identifier settings. Just check the following section in your app.json file.


    "ios": {
      "bundleIdentifier": "com.companyname.myappname",
      "buildNumber": "1.0.0"
    },
    "android": {
      "package": "com.companyname.myappname",
      "versionCode": 1
    }

You need to set “bundleIdentifier” for ios and “package” for android.

ERROR! connect ECONNREFUSED 127.0.0.1:19001

connect ECONNREFUSED 127.0.0.1:19001
Error: connect ECONNREFUSED 127.0.0.1:19001
at TCPConnectWrap.afterConnect as oncomplete

This error occurs due to the React Native app not running. To avoid this type of error you need to start the app first and at the same time open another window to run build command like the below image.

ERROR! write ECONNRESET

write ECONNRESET
Error: write ECONNRESET
at WriteWrap.onWriteComplete as oncomplete

This type of error may generate for following issues.

For networking issue – please check you internet connection
Check your firewall – If possible disable your firewall for some time.
Your antivirus may block it – If possible disable antivirus for some time.

After that run the build command again. Now I hope you will successfully complete your build process.

When the build process is in progress then you will get an URL. using this URL you can get build status from time to time like below.

Build React Native App for Android and iOS

Some more common errors you may have.

commanderror: required property 'android.package' is not found in the project app.json. this is required to open the app.

Solution

That’s a common error in React Native or Expo projects when the Android package name isn’t properly set in app.json (or app.config.js).

Here’s how to fix it:

💡 Steps to Resolve

Open your app.json or app.config.js file
(Usually at the root of your project).
Add the android.package property inside the android block.

Example:

jsonCopyEdit{
  "expo": {
    "name": "YourAppName",
    "slug": "your-app-slug",
    "version": "1.0.0",
    "android": {
      "package": "com.yourcompany.yourappname"
    }
  }
}

✅ Replace com.yourcompany.yourappname with your unique package name, usually reverse domain style:

CopyEditcom.yourname.appname

⚠️ Important Notes

Package names must be unique across the Play Store.
Only lowercase letters, no spaces, and it must start with a letter.

💡 Extra: If you’re using `app.config.js`

If your config is JavaScript-based:

javascriptCopyEditexport default {
  expo: {
    name: "YourAppName",
    slug: "your-app-slug",
    version: "1.0.0",
    android: {
      package: "com.yourcompany.yourappname"
    }
  }
}

Once you’ve added that:

Save the file.
Re-run your command (expo build:android or eas build etc).

Table of Contents