Does eas.json replace app.json in Expo projects?

Question

I am migrating from the old expo build process to eas . I need to configure my eas.json , but am unsure on what exactly needs to go here.

I can't find a clear answer as to whether eas.json replaces my app.json , or whether I still need my app.json .

Of course, in my app.json , I have version numbers, name of my app, slug, icon, iOS and Android configurations etc.

Also, how does this affect my app.config.js ?

Answer 1

Well, the fact that expo-cli is different than eas-cli, similarly eas.json is not same as app.json, so it'll not replace app.json, eas.json only contains the configuration of the eas-cli and primarily will be used when you run the eas build or any eas commands and thus it's different from expo-cli which uses the app.json config to configure your app's details.

Note: expo build in the same way different from eas build

And, app.config.js is the same as app.json, thus changes to app.config.js will affect app.json, but it doesn't mean to replace app.json.

app.config.js will be used mostly to configure plugins and native changes if required for newer versions of expo.

eas.json should look something like this:

{
  "cli": {
    "version": ">= 2.6.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
     "preview": {
      "android": {
        "buildType": "apk"
      }
    },
    "production": {}
  },
  "submit": {
    "production": {}
  }
}

and your app.json should look something like this:

{
  "expo": {
    "name": "Your App Name",
    "slug": "yourappslug",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "cover",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      },
      "versionCode": 1
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
  }
}

and your app.config.js should look something like this:

export default ({ config }) => {
    return {
        ...config,
        plugins: [
            [
                '@config-plugins/react-native-webrtc',
                {
                    cameraPermission:
                        'Camera permission is required to click pictures, (Example: setting a profile picture, or taking a picture and uploading it to a chat and while video calling some one within the app.)',
                    microphonePermission:
                        'Microphone permission is required to record and use audio, (Example: recording a voice message while chatting with someone within the app or while in video calling or voice calling.)',
                },
            ],
            
        ],
    };
};