Expo Basic

Install & Develop

Install

# install latest
$ npx create-expo-app@latest MyProject
# or install minimum files for template
$ npx create-expo-app MyProject --template blank

Run up

run web/mobile

# These packages make sure we can open project in Web
$ npm install react-dom react-native-web @expo/metro-runtime
$ npx expo start

run mobile ios only

# start dev server
$ cd MyProject
$ npm run ios

demo config for Babel JS

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        require.resolve('babel-plugin-module-resolver'),
        {
          alias: {
            "components": "./components",
            "hooks": "./hooks",
            "assets": "./assets",
          }
        }
      ]
    ],
  };
};

Library

Icons

$ npx expo install @expo/vector-icons

Image Picker

Link provides access to the system's UI to select images and videos from the phone's library or take a photo with the camera

$ npx expo install expo-image-picker

Gesture

Link provides built-in native components that can handle gestures

$ npx expo install react-native-gesture-handler react-native-reanimated

ScreenShot

Link
- react-native-view-shot: allows taking a screenshot
- expo-media-library: allows accessing a device's media library to save an image

$ npx expo install react-native-view-shot expo-media-library

Svg

$ npx expo install react-native-svg

Async Store

Link

$ npx expo install @react-native-async-storage/async-storage

Status Bar/Splash Screen/App Icon

StatusBar

allows configuring the app's status bar to change the text color, background color, make it translucent, and so on.

import { StatusBar } from 'expo-status-bar';

<StatusBar style="auto" />
<StatusBar style="light" />

Splash screen

a screen that is visible before the contents of the app has had a chance to load. It hides once the app is ready for use and the content is ready to be displayed，config in app.json file

app.json

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

App Icon

same configured by defining a path to the "icon" property in the app.json file

Debugging

Debugging tools

open devtool menu: cmd + d

More to learn

Follow up