Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/metamediatechnology/longdo-map-react-native
Longdo Map component for React Native
https://github.com/metamediatechnology/longdo-map-react-native
longdo map react-native
Last synced: 3 months ago
JSON representation
Longdo Map component for React Native
- Host: GitHub
- URL: https://github.com/metamediatechnology/longdo-map-react-native
- Owner: MetamediaTechnology
- License: apache-2.0
- Created: 2021-06-15T09:59:28.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-11-29T03:18:01.000Z (about 2 years ago)
- Last Synced: 2024-10-11T16:01:17.083Z (3 months ago)
- Topics: longdo, map, react-native
- Language: JavaScript
- Homepage:
- Size: 772 KB
- Stars: 3
- Watchers: 8
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Longdo Map Component for React Native
- [Setting Up (Expo)](#setting-up-expo)
- [Setting Up (Native)](#setting-up-native)
- [Getting Started](#getting-started)
- [Documentation](#documentation)
- [Version](#version)
## Setting Up (Expo)
Install & init project
```
npm install -g expo-cli
expo init
cd
expo install react-native-webview
npm install longdo-map-react-native
```
### Config babel.config.js
```
presets: [
'babel-preset-expo',
['@babel/preset-env', { "targets": "iOS >= 11, Android >= 56" }],
],
```
### Config app.json
```
"ios": {
"bundleIdentifier": "BUNDLE_ID",
...
"android": {
"package": "PACKAGE_NAME",
```
Then, Register BUNDLE_ID, PACKAGE_NAME at https://map.longdo.com/api to obtain API_KEY
## Setting Up (Native)
Follow [React Native CLI Quickstart](https://reactnative.dev/docs/environment-setup) instruction and run
```
npm install react-native-webview longdo-map-react-native
npm install -D @babel/preset-env
```
### Config babel.config.js
```
presets: [
'module:metro-react-native-babel-preset',
['@babel/preset-env', { "targets": "iOS >= 11, Android >= 56" }],
],
```
### From app.json
```
"name": PROJECT_NAME,
```
Register PROJECT_NAME at https://map.longdo.com/api to obtain API_KEY
## Getting Started
### Add MapView in App.js
```
import Longdo from 'longdo-map-react-native';
```
In main App function
```
Longdo.apiKey = 'API_KEY';
```
> If module fail to auto-detect app's bundle ID, add `Longdo.bundleId = 'REGISTERED_ID';`
Under root View
```
```
In StyleSheet
```
alignItems: 'stretch'
```
For complete file, see [example/App.js](example/App.js)
### Run in Simulator
```
npm run ios
npm run android
```
Follow this [instruction](https://medium.com/@davidjasonharding/developing-a-react-native-app-on-an-m1-mac-without-rosetta-29fcc7314d70) to run on Mac M1
## Documentation
- [Reference 3.x](https://github.com/MetamediaTechnology/longdo-map-react-native/wiki/)
- [Reference 1.x](https://api.longdo.com/map/doc/react-native.php)
- [JavaScript documentation](https://map.longdo.com/docs/)
## Version
- 3.x: Vector map GL backend
- 1.x: Raster map backend