Configure your app with minimal code using App.json

The fields:-

The app.json file is a configuration file for Expo and React Native projects. It contains settings that are used when building and running your app. Here's a breakdown of the fields in the default app.json file that is created when the project is initialized through expo:-

• "name": The name of your app as it appears on the home screen and in the app store.

• "slug": The URL-friendly version of your app name. It's used to generate URLs for your app on the Expo website.

• "version": The version number of your app. This should be updated whenever you release a new version.

• "orientation": The default screen orientation for your app. This can be "portrait", "landscape", or "default".

• "icon": The path to the image file to use as the app icon.

• "userInterfaceStyle": The default user interface style for your app. This can be "light", "dark", or "automatic".

• "splash": Configuration for the splash screen that is shown when your app is launching. It includes the path to the image file ("image"), the resize mode ("resizeMode"), and the background color ("backgroundColor").

• "assetBundlePatterns": An array of file patterns that Expo should bundle into the app's binary during the build process.

• "ios": Configuration specific to iOS. In your case, "supportsTablet": true means that your app is optimized for both iPhone and iPad.

• "android": Configuration specific to Android. The "adaptiveIcon" field is used to specify the foreground image and background color for the adaptive icon on Android 8.0 and above.

• "web": Configuration specific to web. The "favicon" field is used to specify the favicon for your web app.

The fields that I found most interesting:-

The adaptiveIcon field in the app.json file is specific to Android configuration. It's used to define the adaptive icon for your app on Android 8.0 (API level 26) and above. Often you might've wondered why the icons of some apps adapt to the themes you select, while some do not. Well, the thing is that apps having adaptive icons specify standards to the icon layout and sizes that make it adaptive to themes.

Adaptive icons display different shapes across different devices. They have two layers: a foreground and a background.

• "foregroundImage": This is the path to the image that will be used as the foreground of your app's icon. The image should be a square PNG file with a size of 432x432 pixels. The middle 72 pixels of the image are considered the "safe zone" where the icon is guaranteed not to be cropped. The outer 72 pixels can be cropped depending on the mask applied by the device.

• "backgroundColor": This is the background color of the icon. It's used when the background image is not provided or doesn't cover the entire icon area. The color should be a valid hexadecimal color code.

The splash field in the app.json file is used to configure the splash screen for your app. The splash screen is the initial screen that is displayed when your app is launched, before it has loaded. Here's what each subfield means:

• "image": This is the path to the image that will be used for the splash screen. In your case, it's set to ./assets/splash.png, which means the splash.png file in your assets directory will be used.

• "resizeMode": This determines how the splash image should be resized to fit the screen. The value "contain" means the image will be resized so that it is completely visible, with aspect ratio preserved. If there are empty spaces (because the image's aspect ratio doesn't match the screen's), they will be filled with the background color. Other possible values are "cover" (the image will be resized to cover the entire screen, with aspect ratio preserved), and "native" (use the native splash screen mechanism of the platform).

• "backgroundColor": This is the background color of the splash screen. It's used for the empty spaces if the image doesn't cover the entire screen, or while the image is loading. The color should be a valid hexadecimal color code.

A good splash screen often makes the difference between a one-time whimsical app download and a regular traffic, and as such it is imperative to generate a good starting user experience through splash.

Beyond the default

Here are some additional fields that you can add to the app.json file to further configure your Expo or React Native app:

1. description: This field is used to provide a brief summary of what your app does. This description is used when your app is published to the Expo website and app.

2. privacy: This field indicates whether your app is public or unlisted on the Expo website and app. The default is public.

3. platforms: This field is an array that specifies which platforms your app will support. The default is ["ios", "android", "web"].

4. ios.bundleIdentifier and android.package: These fields are used to set the bundle ID for iOS and the package name for Android, respectively. These are important for when you want to distribute your app on the App Store or Google Play Store.

5. extra: This field can be used to include any extra configuration variables that your app needs. These variables can be accessed via Expo.Constants.manifest.extra in your JavaScript code.

okay, but why?

The app.json file is a crucial part of Expo and React Native projects. It serves as a central place for configuring various aspects of your application. Being aware of its uses and how to properly configure it provides several benefits:

1. Control Over App Metadata: Fields like name, slug, version, and description allow developers to define how their app is identified and described across various platforms and in the app stores.

2. UI Customization: Fields like icon, splash, userInterfaceStyle, and orientation give developers control over the app's appearance and behavior, including the app icon, splash screen, UI theme, and screen orientation.

3. Platform-Specific Configuration: The ios, android, and web fields allow for platform-specific configurations, such as enabling tablet support on iOS, defining adaptive icons on Android, and setting the favicon for web.

4. Asset Management: The assetBundlePatterns field allows developers to specify which assets should be bundled with the app binary, which can help optimize the app's size and loading performance.

5. Extra Configuration: The extra field (not shown in your file but can be added) allows developers to include any additional configuration variables that their app needs, providing a flexible way to manage custom settings.

Remarks

In conclusion, the app.json file is a powerful tool for configuring your Expo or React Native application. It allows you to control a wide range of settings, from app metadata like name and version, to UI aspects like icon and splash screen, to platform-specific configurations for iOS, Android, and web. By understanding and effectively using this file, you can streamline your development process and create an app that provides a great user experience across multiple platforms. Remember to refer to the Expo configuration docs for more details on each field. Happy coding!