เริ่มต้นการใช้งาน

React Native

Setting Up (Expo)

Install & init project

npm install -g expo-cli
expo init <project name>
cd <project name>
expo install react-native-webview
npm install sphere-react-native
 
Copied
 
script
 

Config babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: [
      'babel-preset-expo',
      ['@babel/preset-env', { "targets": "iOS >= 11, Android >= 56" }],
    ],
  };
}; 
Copied
 
 
 

Config app.json

  "ios": {
    "bundleIdentifier": "BUNDLE_ID",
...
  "android": {
    "package": "PACKAGE_NAME",
 
Copied
 
 
 

Then, Register BUNDLE_ID, PACKAGE_NAME at https://sphere.gistda.or.th/ to obtain API_KEY ​

Setting Up (Native)

Follow React Native CLI Quickstart instruction and run

npm install react-native-webview sphere-react-native
npm install -D @babel/preset-env
 
Copied
 
script
 

Config babel.config.js

presets: [
  'module:metro-react-native-babel-preset',
  ['@babel/preset-env', { "targets": "iOS >= 11, Android >= 56" }],
], 
Copied
 
javascript
 

From app.json

"name": PROJECT_NAME,
 
Copied
 
javascript
 

Register PROJECT_NAME at https://sphere.gistda.or.th/ to obtain API_KEY

Getting Started

Add MapView in App.js

import Sphere from 'sphere-react-native';
 
Copied
 
javascript
 

In main App function

Sphere.apiKey = 'API_KEY';
 
Copied
 
javascript
 

If module fail to auto-detect app's bundle ID, add Sphere.bundleId = 'REGISTERED_ID';
Under root View

<Sphere.MapView />
 
Copied
 
javascript
 

In StyleSheet

alignItems: 'stretch'
 
Copied
 
javascript
 

For complete file, see example/App.js

Run in Simulator

npm run ios
npm run android
 
Copied
 
script