mirror of
https://github.com/status-im/react-native-mapbox-gl.git
synced 2026-08-30 20:41:08 +00:00
Updated docs to use scoped npm package
This commit is contained in:
@@ -8,7 +8,7 @@ token by [signing up to a Mapbox account](https://www.mapbox.com/signup).
|
||||
Then, make sure you run this before mounting any `MapView`s:
|
||||
|
||||
```javascript
|
||||
import Mapbox from 'react-native-mapbox-gl';
|
||||
import Mapbox from '@mapbox/react-native-mapbox-gl';
|
||||
Mapbox.setAccessToken('your-mapbox.com-access-token');
|
||||
```
|
||||
|
||||
@@ -17,7 +17,7 @@ Mapbox.setAccessToken('your-mapbox.com-access-token');
|
||||
Import the component to use it:
|
||||
|
||||
```jsx
|
||||
import { MapView } from 'react-native-mapbox-gl';
|
||||
import { MapView } from '@mapbox/react-native-mapbox-gl';
|
||||
<MapView />
|
||||
```
|
||||
|
||||
@@ -349,7 +349,7 @@ See [the example](./example.js#L116) for an illustration of this.
|
||||
If the default annotations do not offer enough options, you can embed react native
|
||||
view directly onto the map as a custom marker view.
|
||||
|
||||
The children of the `MapView` must be `Annotation` views: `import {Annotation} from 'react-native-mapbox-gl'`.
|
||||
The children of the `MapView` must be `Annotation` views: `import {Annotation} from '@mapbox/react-native-mapbox-gl'`.
|
||||
The `Annotation` view has the following required props:
|
||||
|
||||
| Prop | Type | Description |
|
||||
|
||||
+11
-6
@@ -1,9 +1,14 @@
|
||||
#### Note
|
||||
|
||||
If you were using react-native-mapbox-gl before we moved it into the mapbox npm org.
|
||||
You will need to unlink react-native-mapbox-gl and link @mapbox/react-native-mapbox-gl
|
||||
|
||||
#### Step 1 - NPM Install
|
||||
|
||||
Run with ```--ignore-scripts``` if you don't want to download the iOS SDK, as well.
|
||||
|
||||
```shell
|
||||
npm install --save react-native-mapbox-gl --ignore-scripts
|
||||
npm install --save @mapbox/react-native-mapbox-gl --ignore-scripts
|
||||
```
|
||||
|
||||
#### Step 2 - Use with Gradle
|
||||
@@ -11,7 +16,7 @@ npm install --save react-native-mapbox-gl --ignore-scripts
|
||||
##### Option A - Automatically
|
||||
|
||||
```shell
|
||||
react-native link
|
||||
react-native link @mapbox/react-native-mapbox-gl
|
||||
```
|
||||
|
||||
##### Option B - Manually
|
||||
@@ -22,8 +27,8 @@ Edit the following files:
|
||||
// file: android/settings.gradle
|
||||
...
|
||||
|
||||
include ':reactnativemapboxgl'
|
||||
project(':reactnativemapboxgl').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-mapbox-gl/android')
|
||||
include ':@mapbox/reactnativemapboxgl'
|
||||
project(':@mapbox/reactnativemapboxgl').projectDir = new File(rootProject.projectDir, '../node_modules/@mapbox/react-native-mapbox-gl/android')
|
||||
```
|
||||
|
||||
```gradle
|
||||
@@ -32,7 +37,7 @@ project(':reactnativemapboxgl').projectDir = new File(rootProject.projectDir, '.
|
||||
|
||||
dependencies {
|
||||
...
|
||||
compile project(':reactnativemapboxgl')
|
||||
compile project(':@mapbox/reactnativemapboxgl')
|
||||
}
|
||||
```
|
||||
|
||||
@@ -85,4 +90,4 @@ configurations.all {
|
||||
force "com.squareup.okhttp3:okhttp-ws:3.4.2"
|
||||
}
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
@@ -3,10 +3,10 @@
|
||||
If you use already [CocoaPods](https://cocoapods.org/) in your react-native
|
||||
project, you can also add the react-native-mapbox-gl project to your Podfile.
|
||||
|
||||
1. Run `npm install --save react-native-mapbox-gl`
|
||||
1. Run `npm install --save @mapbox/react-native-mapbox-gl`
|
||||
2. In your `podfile`, make sure that `platform :ios, '8.0'` is set to `8.0`
|
||||
3. Add `pod 'RCTMapboxGL', :path => '../node_modules/react-native-mapbox-gl/ios'`
|
||||
to your `Podfile` file.
|
||||
3. Add `pod 'RCTMapboxGL', :path => '../node_modules/@mapbox/react-native-mapbox-gl/ios'`
|
||||
to your `Podfile` file.
|
||||
(The path depends on your Podfile location.)
|
||||
4. Open your Xcode project and ensure that the "Build Settings" parameter
|
||||
"Other linker flags" (`OTHER_LDFLAGS`) contains the CocoaPods generated
|
||||
@@ -15,7 +15,7 @@ project, you can also add the react-native-mapbox-gl project to your Podfile.
|
||||
remove this parameter. Just select the line and press the Delete key.
|
||||
* Alternative, if you setup your Xcode project yourself, ensure that the
|
||||
parent configuration was included with a `$(inherited)` variable.
|
||||
5. Install the new CocoaPods dependency with `pod install`.
|
||||
5. Install the new CocoaPods dependency with `pod install`.
|
||||
This command must not have output any warning. ;)
|
||||
|
||||
## Troubleshooting with CocoaPods
|
||||
@@ -45,7 +45,7 @@ pod 'React/RCTNetwork', :path => 'node_modules/react-native'
|
||||
pod 'React/RCTText', :path => 'node_modules/react-native'
|
||||
pod 'React/RCTWebSocket', :path => 'node_modules/react-native'
|
||||
|
||||
pod 'RCTMapboxGL', :path => 'node_modules/react-native-mapbox-gl/ios'
|
||||
pod 'RCTMapboxGL', :path => 'node_modules/@mapbox/react-native-mapbox-gl/ios'
|
||||
```
|
||||
|
||||
### NativeModules.MapboxGLManager.* not defined
|
||||
|
||||
+8
-3
@@ -1,15 +1,20 @@
|
||||
#### Note
|
||||
|
||||
If you were using react-native-mapbox-gl before we moved it into the mapbox npm org.
|
||||
You will need to unlink react-native-mapbox-gl and link @mapbox/react-native-mapbox-gl
|
||||
|
||||
# Manual installation process
|
||||
|
||||
_Make sure to follow these directions carefully._
|
||||
|
||||
First,
|
||||
```bash
|
||||
npm install react-native-mapbox-gl --save
|
||||
npm install @mapbox/react-native-mapbox-gl --save
|
||||
```
|
||||
|
||||
### 1: Adding RCTMapboxGL.xcodeproj
|
||||
|
||||
In the Xcode's `Project navigator`, right click on the `Libraries` folder ➜ `Add Files to <...>`. Add `node_modules/react-native-mapbox-gl/ios/RCTMapboxGL.xcodeproj`
|
||||
In the Xcode's `Project navigator`, right click on the `Libraries` folder ➜ `Add Files to <...>`. Add `node_modules/@mapbox/react-native-mapbox-gl/ios/RCTMapboxGL.xcodeproj`
|
||||
|
||||

|
||||
|
||||
@@ -17,7 +22,7 @@ In the Xcode's `Project navigator`, right click on the `Libraries` folder ➜ `A
|
||||
|
||||
### 2: Adding Mapbox.framework
|
||||
|
||||
Select your project in the `Project navigator`. Click `General` tab then add `node_modules/react-native-mapbox-gl/ios/Mapbox.framework` to `Embedded Binaries`. :collision: **Important, make sure you're adding it to general -> `Embedded Binaries` :collision:**
|
||||
Select your project in the `Project navigator`. Click `General` tab then add `node_modules/@mapbox/react-native-mapbox-gl/ios/Mapbox.framework` to `Embedded Binaries`. :collision: **Important, make sure you're adding it to general -> `Embedded Binaries` :collision:**
|
||||
|
||||
Click 'Add other' to open the file browser and select Mapbox.framework.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user