Please tell me how to write app.json

Expo SDK
1

Nice to meet you.
I am not good at English, so there may be strange parts. I’m sorry.

I made a todo application for ios using react-native and expo. This application can not store data in the device’s local storage yet, but I’d like to publish the application.

I noticed that I had to create app.json and edited it. This is app.json created below ↓

// app.json
{
“expo”: {
“name”: “TodoApp”,
“description”: “todo app”,
“slug”: “TodoApp”,
“privacy”: “public”,
“sdkVersion”: “19.0.0”,
“version”: “0.1.0”,
“orientation”: “portrait”,
“primaryColor”: “#E3DEE4”,
“icon”: “”,
“notification”: {
“icon”: “”,
“color”: “#E3DEE4”,
“androidMode”: “default”,
“androidCollapsedTitle”: “#{unread_notifications} new interactions”
},
“loading”: {
// 起動時の画像 PNG
“icon”: “”,
“exponentIconColor”: “white”,
“exponentIconGrayscale”: “1”,
“backgroundImage”: “”,
“backgroundColor”: “#E3DEE4”,
“hideExponentText”: true
},
“appKey”: “main”,
“androidStatusBarColor”: “#E3DEE4”,
“androidStatusBar”: {
“barStyle”: “light-content”,
“backgroundColor”: “#E3DEE4”
},
“androidShowExponentNotificationInShellApp”: false,
“scheme”: “rnplay”,
“entryPoint”: “./App.test.js”,
“extra”: {},
“rnCliPath”: “”,
“packagerOpts”: {},
“ignoreNodeModulesValidation”: false,
“ios”: {
“bundleIdentifier”: “TodoApp.uneco.io”,
“buildNumber”: “310”,
“icon”: “”,
“config”: {
“branch”: {
“apiKey”: “”
},
“usesNonExemptEncryption”: false,
“googleMapsApiKey”: “”,
“googleSignIn”: {
“reservedClientId”: “”
}
},
“isRemoteJSEnabled”: true,
“supportsTablet”: true,
“isTabletOnly”: false,
“infoPlist”: {},
“associatedDomains”:
},
“nodeModulesPath”: “”,
“hooks”: {
“postPublish”:
}
}
}

In this way, I created app.json and started the application with expo XDE. However, reading can not be completed with “Starting React Native packager …” displayed. I can not start the application. What’s wrong with my created app.json? What is missing?

I read the “Configuration with app.json” page (https://docs.expo.io/versions/latest/guides/configuration.html), but I am not good at English, so I can not understand everything was. I’m sorry.

If there are gentle people, please tell me the wrong part of app.json that I created. And please tell me how to fix it. Thank you. I’m sorry.

2

Well, there seems to be some problem with you json file:

  • JSON file cannot have comments in them, so you need to remove your commetns like // 起動時の画像 PNG
  • you need to use english double quotation mark like this one ", your ” does’t look like to be correct.
3

No need to apologize @uneco! I’m sure this is frustrating and we’ll try our best to get to the bottom of this.

One thing that you can do is create a new project and look at the app.json thats created for you. But to save you some time let me show you what that looks like:

{
  "expo": {
    "name": "tabs",
    "description": "No description",
    "slug": "tabs",
    "privacy": "public",
    "sdkVersion": "19.0.0",
    "version": "1.0.0",
    "orientation": "portrait",
    "primaryColor": "#cccccc",
    "icon": "./assets/icons/app-icon.png",
    "notification": {
      "icon": "./assets/icons/notification-icon.png",
      "color": "#000000"
    },
    "loading": {
      "icon": "./assets/icons/loading-icon.png",
      "hideExponentText": false
    },
    "packagerOpts": {
      "assetExts": ["ttf"]
    },
    "ios": {
      "supportsTablet": true
    }
  }
}

This app.json is created for you through our command line tool exp when you use it to create a new project.

Here is how:

npm install -g exp
exp init

What I would do, is start from the example app.json created by us, and add the properties you need based on the docs you had read https://docs.expo.io/versions/latest/guides/configuration.html

Also as @leimengda suggested, it may be worthwhile to pass your JSON file through a JSON Validator https://jsonlint.com/ - it will tell you the bugs that were pointed out. Thanks a ton for jumping in @leimengda!

4

Thank you for your reply.

As @leimengda taught me, I deleted comments (// image PNG at startup etc). Thank you for teaching me.

I created a new application by running npm install - g exp and exp init myApp as taught me by @jimmylee. Thank you for teaching me.

Below is app.json made by command.
I have not made any changes to this app.json yet. ↓

// app.json
{
“expo”: {
“name”: “testExpo”,
“description”: “An empty new project”,
“slug”: “testExpo”,
“privacy”: “public”,
“sdkVersion”: “19.0.0”,
“version”: “1.0.0”,
“orientation”: “portrait”,
“primaryColor”: “#cccccc”,
“icon”: “./assets/icons/app-icon.png”,
“loading”: {
“icon”: “./assets/icons/loading-icon.png”,
“hideExponentText”: false
},
“packagerOpts”: {
“assetExts”: [“ttf”, “mp4”]
},
“ios”: {
“supportsTablet”: true
}
}
}

By the way, the todo application I made first was created with create-recat-native init myApp instead of exp init myApp.
Could you tell me the correct way to edit app.json?
I am examining myself and trying various methods.
Thank you.

5

I’m assuming you did react-native init myApp instead of create-react-native init myApp? That’s using react native CLI and the forums here are for those creating their apps with expo.

If you try and start that app with expo, it’s not going to work. The problem isn’t with your app.json file. If you want to use expo, you will need to create the app using exp init as @jimmylee has mentioned. If you want to continue developing your app with react native CLI, you can run it in the simulator by running the command react-native run-ios. But these forums are not the right place to find assistance if you go that way.

I hope this helps and best of luck @uneco

6

Thank you for your reply.
I first created an application using create-react-native init myApp. However, since @jimmylee taught exp init, I am reworking the application. It seems that the cause of my problem is not app.json as you said. It was a lack of study. If there is something wrong, I would like to ask you a question here. Thank you, everyone who kindly taught me.

2 Likes
7

@uneco don’t be so hard on yourself :slight_smile: You’re going to build great apps! Feel free to ask more questions on the forums if you ever get stuck.

1 Like
8

is it mandatory to add (Slug) to app.json ?

9

yes, it is required if you want to publish or build your app with expo services

1 Like
10

Hi, I am still a little confused. I created my app using create-react-native-app AnroidApp. And I have been using npm run to debug and develop using AVD emulator. Does this mean I can not use this method to generate a .apk file?

11

@reier360 to clarify, which “method” are you trying to use to generate an APK? We have documentation to help you out if you need it.

https://docs.expo.io/versions/latest/guides/building-standalone-apps.html

12

I managed thanks.I wanted to eject it because of the APK size, but or now I am just using expo to generate APK.

1 Like
13

This topic was automatically closed after 14 days. New replies are no longer allowed.

14

Thanks for the information, we’re working towards reducing the APK size of our bundles.