Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

doc: install guide #2

Merged
merged 1 commit into from
Dec 6, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
219 changes: 219 additions & 0 deletions docs/install.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,219 @@
---
id: install
sidebar_position: 1
title: Install
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# Configure credentials

Before installing @rnmapbox/maps you'll need to get the proper credentials.
You'll need:
- secret access token with (Downloads:Read) scope to download iOS and Android SDK from mapbox.
- public token to use as accessToken when running the app

See [Configure Credential](https://docs.mapbox.com/ios/navigation/guides/get-started/install/#configure-credentials) on mapbox.com for details.

# Install

<Tabs groupId="install-module" queryString defaultValue="npm" values={[
{label:'NPM', value:'npm'},
{label:'Yarn', value:'yarn'},
{label:'Expo', value: 'expo'}
]}>
<TabItem value="npm">

```shell
npm install @rnmapbox/maps
```

</TabItem>
<TabItem value="yarn">

```shell
yarn add @rnmapbox/maps
```

</TabItem>
<TabItem value="expo">

```shell
expo install @rnmapbox/maps
```

</TabItem>
</Tabs>

# Configure @rnmapbox/maps

<Tabs groupId="configure-module" queryString defaultValue="ios" values={[
{label:'iOS', value:'ios'},
{label:'Android', value:'android'},
{label:'Expo', value: 'expo'}
]}>
<TabItem value="ios">


### Update your podfile
Add the following to your `ios/Podfile`

```ruby
pre_install do |installer|
$RNMapboxMaps.pre_install(installer)
# ... other pre install hooks
end

post_install do |installer|
$RNMapboxMaps.post_install(installer)
# ... other post install hooks
end
```

### Verify .netrc
Make sure your `.netrc` is configured with your secret access token, as described by the [mapbox docs](https://docs.mapbox.com/ios/maps/guides/install/#configure-credentials). To verify execute:

```sh
grep -A 4 api.mapbox.com ~/.netrc
```

This should output something like:
```sh
machine api.mapbox.com
login mapbox
password sk.ey...
```

</TabItem>
<TabItem value="android">

### Adding mapbox maven repo

Add the following to your android/build.gradle, into the section `allprojects/repositories`

```gradle
// android/build.gradle

allprojects {
repositories {
// ...other repos
maven {
url 'https://api.mapbox.com/downloads/v2/releases/maven'
authentication {
basic(BasicAuthentication)
}
credentials {
// Do not change the username below.
// This should always be `mapbox` (not your username).
username = 'mapbox'
// Use the secret token you stored in gradle.properties as the password
password = project.properties['MAPBOX_DOWNLOADS_TOKEN'] ?: ""
}
}
// ...even more repos?
}
}
```

### Verify MAPBOX_DOWNLOADS_TOKEN in gradle.properties

Make sure your global `.gradle-properties` is configured with your secret access token, as described by the [mapbox docs](https://docs.mapbox.com/android/maps/guides/install/#configure-credentials). To verify execute:

```sh
grep -R MAPBOX_DOWNLOADS_TOKEN ~/.gradle/gradle.properties
```

This should output something like:
```sh
/Users/foo/.gradle/gradle.properties:MAPBOX_DOWNLOADS_TOKEN=sk.ey...
```

</TabItem>
<TabItem value="expo">

### Plugin configuration

Set `RNMapboxMapsDownloadToken` to your secret token. See the [credentials instructions](https://docs.mapbox.com/ios/maps/guides/install/#configure-credentials) on mapbox.com.

Add `RNMapboxMapsDownloadToken` to the @rnmapbox/maps [config plugin](https://docs.expo.io/guides/config-plugins/) in the [`plugins`](https://docs.expo.io/versions/latest/config/app/#plugins) array of your `app.{json,config.js,config.ts}`:


```json
{
"expo": {
"plugins": [
[
"@rnmapbox/maps",
{
"RNMapboxMapsDownloadToken": "sk.ey.."
}
]
]
}
}
```

</TabItem>
</Tabs>

## Using V11

@rnmapbox 10.1 supports both `10.16.*` and `11.0.*` versions, but defaults to `10.16.*`. To use `11.0.*` please configure according to your platform:

<Tabs groupId="v11-insructions" queryString defaultValue="expo" values={[
{label:'iOS', value:'ios'},
{label:'Android', value:'android'},
{label:'Expo', value: 'expo'}
]}>
<TabItem value="ios">

Add the following to your `ios/Podfile`

```ruby
$RNMapboxMapsVersion = '= 11.0.0'
```

</TabItem>
<TabItem value="android">

Set `RNMapboxMapsVersion` in `android/build.gradle` > `buildscript` > `ext` section

```gradle
buildscript {
ext {
RNMapboxMapsVersion = '11.0.0'
}
}
```

</TabItem>
<TabItem value="expo">

Add `RNMapboxMapsVersion` to the @rnmapbox/maps [config plugin](https://docs.expo.io/guides/config-plugins/) to the [`plugins`](https://docs.expo.io/versions/latest/config/app/#plugins) array of your `app.{json,config.js,config.ts}`:

```json
{
"expo": {
"plugins": [
[
"@rnmapbox/maps",
{
...
"RNMapboxMapsVersion": "11.0.0"
}
]
]
}
}
```

</TabItem>
</Tabs>


## Advanced - using non default version

It's possible to overwrite the native SDK version with `RNMapboxMapsVersion`. But you have to revise it when upgrading `@rnmapbox/maps` as future `@rnmapbox/maps` releases might not support he version you set today.

Follow the instructions above [on using v11](#using-v11), just use 10.* version you'd like.

7 changes: 0 additions & 7 deletions docs/tutorial-extras/_category_.json

This file was deleted.

Binary file removed docs/tutorial-extras/img/docsVersionDropdown.png
Binary file not shown.
Binary file removed docs/tutorial-extras/img/localeDropdown.png
Binary file not shown.
7 changes: 6 additions & 1 deletion docusaurus.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const config = {
trailingSlash: false,


onBrokenLinks: 'throw',
onBrokenLinks: 'warn',
onBrokenMarkdownLinks: 'warn',

// Even if you don't use internalization, you can use this field to set useful
Expand Down Expand Up @@ -68,6 +68,11 @@ const config = {
navbar: {
title: '@rnmapbox/maps',
items: [
{
type: 'doc',
docId: 'install',
label: 'Install',
},
{
type: 'docSidebar',
sidebarId: 'examplesSidebar',
Expand Down