Setup React Native Mini-app

Follow the steps below to set up a React Native mini-app

Update the JS entry point#

Please change your appKey when registering JS entry point to RNMain.

AppRegistry.registerComponent('RNMain', () => App);

Handle the initial props#

When starting a mini-app, Terra will pass some properties to your mini-app via the props of the root component of your mini-app (It's usually the <App /> component). The initial props may include (based on your mini-app's business):

  • Auth data: if your mini-app uses Exchange Token Flow, an terraIdToken will be passed via props.
  • Configs for starting the mini-app from the host app: such as language, host app's identity (these are defined by you - the mini-app team). Let call them as custom properties.

In the root component of your app, use the code below to get the initial props:

const App = ({ props }) => {
// ...
// handle idToken
const idToken = props.terraIdToken;
// exchange the given idToken
// handle custom properties
const customProp1 = props.customProp1;
const customProp2 = props.customProp2;
// ...
return <View>{/* ... */}</View>;
};

Connect with Javascript bridge#

This step is required if you need to access Terra features (currently only run in native code). Please refer Javascript bridge for more information.

Publish the mini-app#

We provide a command-line tool, called terra-rn, for publishing a React Native mini-app to the Teko package. The mini-apps will be downloaded and used in the host app when integrating the mini-apps into the host app.

To publish a mini-app we need to do the steps bellow:

Get your mini-app's ID#

Contact the Terra team to get the id of your mini-app. We need two IDs for both Android and iOS. Normally, both IDs are the same.

Add config to the app.json file#

  • Add config for Terra to the app.json file in the root folder of the mini-app.
{
// other parts of the app.json file
"terra": {
"android": {
"id": "your-app-id",
"version": "version-code", // x.y.z
"config": {
// Map<String, String> configs for your mini-app, leave it blank if you don't need it
"data": {},
"extra": {}
}
},
"ios": {
"id": "your-app-id",
"version": "version-code", // x.y.z
"config": {
// Map<String, String> configs for your mini-app, leave it blank if you don't need it
"data": {},
"extra": {}
}
}
}
}

For example:

{
// other parts of the app.json file
"terra": {
"android": {
"id": "19",
"version": "1.0.0",
"config": {
"data": { "config2": "1", "config2": "two" },
"extra": {}
}
},
"ios": {
"id": "19",
"version": "1.0.1",
"config": {
// config for your mini-app,
"data": { "config2": "1", "config2": "two" },
"extra": {}
}
}
}
}

Install and log in to the cli tool#

  • Install the terra-rn cli tool (Cooming soon, this tool is under Beta testing now)

  • Log in to the cli tool. Please contact the Terra team to get account information for logging into cli tool.

terra-rn login

Publish the mini-app#

For Android version:

terra-rn publish --platform android --env [dev/stag/prod]

For iOS version:

terra-rn publish --platform ios --env [dev/stag/prod]

Provide react-native's version and dependencies that use native modules#

Your mini-apps may use some dependencies that use native modules, such as react-native-gesture-handler, react-native-svg,... You need to provide us information about these dependencies (and some installation instructions if you feel necessary). This information will be used during the integration of your mini app with a host app.

Edit this page