Web-app dev2, Expo Webview app making

This writing is about Webview app making and app icon, splash image etc. This is continued writing from previous one.

1. Create Expo app

• Open Visual Studio Code and make some folder route to make project.

• In the terminal, run the command: npm install -g expo-cli
• Note that you should install Node.js, homebrew, Git scm, etc such libraries (what I mentioned in first step writting) first to perform above command correctly otherwise it may show some error.

• Run the command: npx create-expo-app --template blank to make project. And the enter your app name. Space or some special characters are not allowed for the name.
• I want to make just simple webview app so blank template is enough for me. For other template, refer to Expo document: https://docs.expo.dev/more/create-expo/#--template

• Then you will see basic app structure (App.js, app.json, ...) is created.

2. Make your app to Webview app

• Change directory to project by entering cd ProjectName.
• Install React Native Webview library by running command: npx expo install react-native-webview

• Go to Expo document: https://docs.expo.dev/versions/latest/sdk/webview/, copy the code in basic webview usage and paste it in your App.js

import { WebView } from 'react-native-webview';
import Constants from 'expo-constants';
import { StyleSheet } from 'react-native';

export default function App() {
  return (
    <WebView
      style={styles.container}
      source={{ uri: 'https://expo.dev' }}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
  },
});

• You can easily notice that uri is the one will be shown in the Webview app. Put your web address here.

export default function App() {
  return (
    <WebView
      style={styles.container}
      source={{ uri: 'putYourWebAddressHere!' }}
    />
  );
}

3. Make your own app icon

• Once you make the app with Expo blank template, you will see icons in assets. adaptive-icon.png, favicon.png, icon.png, splash.png
• You can go to that directory and change the file what you want to show as your app icon.

3-1. adaptive-icon.png

• png image, 1024x1024 pixels
• Adaptive icon is used in Android, which its shape can be different depending on launcher. Sometimes square shape, sometimes circle shape etc.
• For detail of adaptive icon, refer to: https://developer.android.com/develop/ui/views/launch/icon_design_adaptive

3-2. favicon.png

• png image, 48x48 pixels
• favicon is used when your app is opened in web browser. It is shown as below.
• You can easily make one when you search favicon generator in Google.

3-3. icon.png

• png image, 1024x1024 pixels
• This is normal app icon which is shown in iOS or sometimes Android. (In lower version of Android which does not support adaptive icon.)

3-4. splash.png

• png image, 1284x2778 pixels
• This is an image, which appears while app is being loaded initially.

3-5. Change property of icon

• If you take a look in app.json you can find icons. Here you can change background color, re-size screen etc. For detail, refer to Expo document: https://docs.expo.dev/develop/user-interface/splash-screen-and-app-icon/

3-6. Small tip

• Be careful about uppercase and lowercase for icon file name. Of course it is always important to be careful about upper- and lowercase when coding and it is same in file name too. One day I made file name "Splash.png" by mistake, while "splash.png" is correct. My app could not be built due to that and I spent several hours until I found out the reason...