Skip to main content

Upgrade App to Version 3.1

UPGRADE MINI APP CLI​

First, you need to upgrade the Mini App CLI to the latest version.

Only Mini App CLI version 0.0.79 and higher supports initializing v3.1 source

npm install -g @momo-miniapp/cli@latest

INITIALIZE V3.1 SOURCE​

Then, run the following command to initialize the Mini App version 3.1 source code.

momo-miniapp init awesomeMiniApp --variant=v31

For example, the above command creates source code for a Mini App called “awesomeMiniApp".

Mini App v3.1 uses the Component Kits v2

MIGRATING TO V3.1​

Mini App v3.1 uses the Component Kits v2. Therefore, if you have a Mini App currently running in version 3.0 (which is initialized without the “variant” argument), after upgrading Mini App CLI, initializing v3.1 source code folder, and moving the source code to, you have to replace all components in component kits v1 used in the source code with component kits v2.

For example:

// In app v3.0
import Navigation from ‘@momo-platform/component-kits’

// In app v3.1
import { Navigation } from ‘@momo-kits/core’

If you are doing the migration of all source code from Mini App v3.0 to Mini App v3.1, please recheck the content of 2 following files to make sure they have been updated accordingly for the v3.1 app.

src/index.js
1
  /**
1
  /**
2
   * @format
2
   * @format
3
   */
3
   */
4
  import React from 'react';
4
  import React from 'react';
5
-
  import { AppRegistry } from 'react-native';
5
+
  import App from './src/Application';
6
-
  import App from './src/App';
6
+
  import AppJson from './app.json';
7
-
  import { appId } from './app.json';
7
+
  import { ApplicationStyle } from '@momo-kits/core';
8
  import MiniApi from '@momo-miniapp/api';
8
  import MiniApi from '@momo-miniapp/api';
9
-
  import { ApplicationStyle } from '@momo-platform/component-kits';
10
-
  import { Provider } from 'react-redux';
11
-
  import configureStore from './src/redux/reducer';
12
-
  const store = configureStore()
13
  ApplicationStyle();
9
  ApplicationStyle();
14
-
  class MiniApp extends React.Component {
10
+
  export const MiniApp = props => {
15
-
      constructor(props) {
11
+
      return <App {...props} />
16
-
          super(props);
12
+
  };
17
-
          /**
13
+
  /**
18
-
           * do not remove code bellow
14
+
   * do not change codes bellow
19
-
           */
15
+
   */
20
-
          MiniApi.init(props);
16
+
  if (__DEV__) {
21
-
      }
17
+
      AppJson.bridgeMode = 2;
22
-
      render() {
23
-
          return <Provider store={store}>
24
-
              <App {...this.props} />
25
-
          </Provider>;
26
-
      }
27
  }
18
  }
28
-
  AppRegistry.registerComponent(appId, () => MiniApp);
19
+
  MiniApi.registerApp(AppJson, () => MiniApp);
29
-
  AppRegistry.registerComponent('MiniApp', () => MiniApp);
src/package.json
1
{
1
{
2
-
  "name": "checklist-v3.0",
2
+
  "name": "mini-app-v3.1",
3
-
  "version": "0.0.1",
3
+
  "version": "0.0.4",
4
-
  "private": true,
5
  "scripts": {
4
  "scripts": {
5
+
    "all": "watchman watch-del-all && rm -rf yarn.lock && rm -rf node_modules/ && rm -fr $TMPDIR/metro* && yarn install",
6
    "start": "bash start.sh 8181",
6
    "start": "bash start.sh 8181",
7
    "test": "jest",
7
    "test": "jest",
8
-
    "lint": "eslint ."
8
+
    "lint": "eslint .",
9
+
    "migration": "node scripts/migration/migration.js",
10
+
    "migration-core": "node scripts/migration/migration-core.js",
11
+
    "integration": "node scripts/migration/integration-repack.js",
12
+
    "start:webpack": "react-native webpack-start --webpackConfig webpack.config.js --port 8181",
13
+
    "bundle-ios": "node scripts/bundle/bundleRepack.js ios",
14
+
    "bundle-android": "node scripts/bundle/bundleRepack.js android",
15
+
    "bundleSize": "node scripts/migration/bundleSizeRepack.js"
9
  },
16
  },
10
  "supportPackages": {
17
  "supportPackages": {
11
    "note": "Import these packages below into 'dependencies' if you want to you in MiniApp",
18
    "note": "Import these packages below into 'dependencies' if you want to you in MiniApp",
12
    "lottie-ios": "3.0.3",
19
    "lottie-ios": "3.0.3",
13
    "lottie-react-native": "3.0.3",
20
    "lottie-react-native": "3.0.3",
14
    "react-native-fast-image": "8.1.5",
21
    "react-native-fast-image": "8.1.5",
15
    "react-native-maps": "0.27.0",
22
    "react-native-maps": "0.27.0",
16
    "react-native-linear-gradient": "2.5.6",
23
    "react-native-linear-gradient": "2.5.6",
17
    "react-native-sensors": "5.4.1",
24
    "react-native-sensors": "5.4.1",
18
    "react-native-share": "2.0.0",
25
    "react-native-share": "2.0.0",
19
    "react-native-svg": "^11.0.1"
26
    "react-native-svg": "^11.0.1"
20
  },
27
  },
21
  "dependencies": {
28
  "dependencies": {
22
-
    "@momo-miniapp/api": "^0.1.4-beta.4",
29
+
    "@momo-kits/core": "0.0.48-rc.4",
23
-
    "@momo-platform/component-kits": "^1.3.25",
30
+
    "@momo-kits/lottie": "0.0.48-rc.4",
24
-
    "@momo-platform/utils": "^0.0.17",
31
+
    "@momo-kits/scrollable-tab-view": "0.0.48-rc.4",
25
-
    "@react-native-community/async-storage": "1.12.1",
32
+
    "@momo-kits/selection": "0.0.48-rc.4",
33
+
    "@momo-miniapp/api": "^0.1.4",
34
+
    "@react-native-community/async-storage": "^1.8.1",
26
    "@reduxjs/toolkit": "^1.8.1",
35
    "@reduxjs/toolkit": "^1.8.1",
27
    "lodash": "^4.17.15",
36
    "lodash": "^4.17.15",
28
-
    "metro-react-native-babel-preset": "0.66.2",
37
+
    "lottie-react-native": "^3.3.2",
29
    "react": "17.0.1",
38
    "react": "17.0.1",
30
    "react-native": "0.64.2",
39
    "react-native": "0.64.2",
31
-
    "react-redux": "^8.0.1",
40
+
    "react-native-gesture-handler": "1.10.3",
32
-
    "redux": "^4.1.0"
41
+
    "react-native-webview": "^11.17.2",
42
+
    "react-redux": "^8.0.1"
33
  },
43
  },
34
  "devDependencies": {
44
  "devDependencies": {
35
-
    "@babel/core": "^7.5.5",
45
+
    "@babel/core": "^7.12.9",
36
-
    "@babel/runtime": "^7.5.5",
46
+
    "@babel/preset-env": "^7.15.6",
47
+
    "@babel/runtime": "^7.12.5",
48
+
    "@callstack/repack": "^2.5.0",
49
+
    "@react-native-community/eslint-config": "^0.0.5",
50
+
    "@testing-library/jest-native": "^4.0.4",
51
+
    "@testing-library/react-native": "^9.2.0",
37
    "babel-jest": "^24.8.0",
52
    "babel-jest": "^24.8.0",
53
+
    "babel-loader": "^8.2.2",
54
+
    "babel-plugin-module-resolver": "^4.0.0",
55
+
    "eslint": "^6.1.0",
56
+
    "husky": "^4.3.0",
38
    "jest": "^24.8.0",
57
    "jest": "^24.8.0",
58
+
    "metro-react-native-babel-preset": "0.66.0",
39
    "qrcode-terminal": "^0.12.0",
59
    "qrcode-terminal": "^0.12.0",
40
-
    "react-test-renderer": "16.8.6"
60
+
    "react-native-svg": "git+https://gitlab.com/momo-platform/react-native-svg.git#v12.1.0.public",
61
+
    "react-test-renderer": "17.0.1",
62
+
    "terser-webpack-plugin": "^5.2.4",
63
+
    "webpack": "5.61.0"
41
  },
64
  },
42
  "jest": {
65
  "jest": {
43
    "preset": "react-native"
66
    "preset": "react-native"
67
+
  },
68
+
  "publishConfig": {
69
+
    "@momo-miniapp:registry": "https://gitlab.com/api/v4/projects/27153631/packages/npm/"
70
+
  },
71
+
  "resolutions": {
72
+
    "react": "17.0.1",
73
+
    "react-native": "0.64.2",
74
+
    "@momo-kits/core": "0.0.48-rc.4",
75
+
    "react-native-fast-image": "8.1.5",
76
+
    "react-native-gesture-handler": "1.10.3",
77
+
    "react-native-pager-view": "5.1.8",
78
+
    "react-refresh": "0.4.3",
79
+
    "metro-react-native-babel-preset": "0.64.0"
44
  }
80
  }
45
}
81
}
Assets such as png, jpeg, json... imported as absolute path must have to convert to URI
// Change this style
<Image source={require('../assets/logo.png')} />
// To
<Image source={{uri: YOUR_URI}} />
BUILD YOUR MINI APP​
After completing the update, please build the mini app and test internally to ensure that the features are working correctly.
CREATE ROLLOUT REQUEST​
Once testing completed, please create a Rollout Request so that the new version can be reviewed and released.
ON THIS PAGE