Note: wrld.js does not officially support React Native. Make use of this example at your own risk.
This is an example of how wrld.js could be used in a React Native app using Expo.
- Node.js (v12.8.2 tested)
- npm (installed with Node.js)
- Expo CLI installed globally (v4.4.2 tested)
npm i -g expo-cli
- If using a physical device:
- Expo Development Client for Android or iOS installed on your device.
- If using an Android emulator or iOS simulator
- A WRLD API key which can be obtained by signing up for a free account at wrld3d.com
You can view the example on your Android device in the Expo Development Client. Just paste this url https://exp.host/@wrld3d/Wrld/index.exp?sdkVersion=39.0.0 into the Client or open the Client and point it at the QR code here: https://expo.io/@wrld3d/projects/Wrld
In the repo root, run:
npm install-
Insert your WRLD API key here
-
Compile the WebView source code into inline html.
npm run build:webview
You will need to rerun this command whenever you make any changes inside src/webView or src/shared
-
Run the following command:
npm start
This will start a local server running the app and you will be presented with a QR code. Use this QR code to open the app in the Expo Development Client on your device.
If using an emulator, Open your emulator and follow the instructions in the terminal.
The example works by inserting a Wrld.map into a WebView. We create the map in src/webView/MapController.js and handle communication between the WebView and React Native in src/webView/WebViewMessenger.js and src/app/map/WrldMap/ReactNativeMessenger.js
Currently the WebView only sends information about the current state of the map to React Native. First on the initialstreamingcomplete event and every 500ms during the map move event. If we need to call methods on the Wrld.map from a response to data or an action within React Native we can do so by posting messages, i.e. map_setview, which can be received and acted upon within the WebView in src/webView/MapController.js.
See here for more information on communicating between a WebView and React Native.
- WebGL does not work on all mobile devices.
- wrld.js is not optimized for mobile. See the Android and iOS SDKs for full mobile support.
This example is released under the Simplified BSD License. See LICENSE.md for details.