Core Settings

In order to change the core settings of the WebOS we will be changing the app.json file config.

By default app.json looks like this:

app.json

{
  "expo": {
    "name": "webos",
    "slug": "webos",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "platforms": ["ios", "android"],
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.example.appname",
      "buildNumber": "1.0.0"
    },
    "android": {
      "versionCode": 1,
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      },
      "package": "com.example.appname"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

App Name

In order to change the app name edit the value of name and slug property.

"name": "Example App"
"slug": "example-app"

Version

In order to change the app version edit the value of version property.

"version": "1.0.0"

Splash Screen

In order to change the app's splash screen edit the value of splash object's properties.

"splash": {
  "image": "./assets/splash.png",
  "resizeMode": "contain",
  "backgroundColor": "#ffffff"
}

Package & bundleIdentifier

This is an important part of the app. You have to give your app an unique Package name or bundleIdentifier if you want to publish your app to play store or app store. You can sue any name but make sure they must be unique and any other apps published on the play sore or app store must not have the same Package name or bundleIdentifier

For IOS:

"ios": {
  "supportsTablet": true,
  "bundleIdentifier": "com.example.appname",
  "buildNumber": "1.0.0"
}

For Android:

"android": {
  "versionCode": 1,
  "adaptiveIcon": {
    "foregroundImage": "./assets/adaptive-icon.png",
    "backgroundColor": "#FFFFFF"
  },
  "package": "com.example.appname"
}

App icon & Images

If you want to change the app icon, splash screen image then please check the assets folders. Inside the assets folder your will find icon.png, adaptive-icon.png and splash.png. You can just simply change them to your own logo. Just make use to use the perfect size. We have also provide the icon template files that you can use to resize your own logo to fit on both android and ios.

Here the the sizes of the images that you need to match the sizes perfectly for your own images and also the image extensions should the same as the bottom

File Name	Type (extension)	Size (W x H)
favicon.png	png	48x48
icon.png	png	1024x1024
adaptive-icon.png	png	1024x1024
splash.png	png	1284x2778
loader.gif	gif	custom

Conclusion

If you have followed the documentation and performed all steps correctly you app is fully ready. In order to check if all edit was right and app works well try running this command in the terminal.

npm start
# or
npm run start

It will start your app locally then you can either use an android or ios emulator to check the preview or if you don't have android studio installed on the device then you can directly run it on your own physical Android or IOS phone. If you see all working find then you the move to the next step that is enabling the notifications feature for the app