Skip to content

Commit

Permalink
iOS Installation Docs Fix & Enhancements
Browse files Browse the repository at this point in the history 
Fixed path to @react-native-mapbox/maps
Added additional visual elements to iOS installation documentation to add clarity to installation steps
  • Loading branch information
@systemlevel
systemlevel authored Apr 27, 2019
1 parent 571b3b6 commit ba7de96
Showing 1 changed file with 32 additions and 5 deletions.
37 changes: 32 additions & 5 deletions ios/install.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ To install with CocoaPods, add the following to your `Podfile`:
]
# Mapbox
pod 'react-native-mapbox-gl', :path => '../node_modules/@mapbox/react-native-mapbox-gl'
pod 'react-native-mapbox-gl', :path => '../node_modules/@react-native-mapbox/maps'
```

Then run `pod install` and rebuild your project.
Expand All @@ -39,21 +39,46 @@ Then run `pod install` and rebuild your project.

### Add Native Mapbox SDK Framework

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:**
Select your project in the `Project navigator`. Click `General` tab then add `node_modules/@react-native-mapbox/maps/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.

![](https://s3.systemlevel.com/docs-public/addother.png)

Select the 'Copy items if needed' checkbox.

![](https://cldup.com/s4U3JfS_-l.png)
![](https://s3.systemlevel.com/docs-public/copyitems.png)

After adding Mapbox.framework it should be listed in your Embedded Binaries:

![](https://s3.systemlevel.com/docs-public/embeddedbinaries.png)

<!-- ![](https://cldup.com/s4U3JfS_-l.png) -->


### Add React Native Mapbox SDK Files
In Xcode's `Project navigator`, right click on the `Libraries` folder ➜ `Add Files to <...>`. Add `node_modules/@mapbox/react-native-mapbox-gl/ios/RCTMGL.xcodeproj`.
In Xcode's `Project navigator`, right click on the `Libraries` folder ➜ `Add Files to <...>`. Add `node_modules/@react-native-mapbox/maps/ios/RCTMGL.xcodeproj`.

![](https://s3.systemlevel.com/docs-public/addfilesto.png)


Then in Xcode navigate to `Build Phases` click on it and you should see `Link Binary with Libraries`, we need to add `libRCTMGL.a`.

![](https://s3.systemlevel.com/docs-public/buildphases.png)

After you add 'libRCTMGL.a' it should be listed as such:

![](https://s3.systemlevel.com/docs-public/buildphasesadd.png)


### Add Framework Header Search Paths
In the `Build Settings` of your application target search for `FRAMEWORK_SEARCH_PATHS`. Add `$(PROJECT_DIR)/../node_modules/@mapbox/react-native-mapbox-gl/ios` non-recursive to your `Framework Search Paths`.
In the `Build Settings` of your application target search for `FRAMEWORK_SEARCH_PATHS`.

![](https://s3.systemlevel.com/docs-public/frameworksearch.png)

Add `$(PROJECT_DIR)/../node_modules/@react-native-mapbox/maps/ios` non-recursive to your `Framework Search Paths`.

![](https://s3.systemlevel.com/docs-public/frameworksearchadd.png)

**Important** If there is a select input under `Debug` line, choose `Any iOS SDK`.

Expand All @@ -69,4 +94,6 @@ Open the newly added `Run Script` and paste:
"${BUILT_PRODUCTS_DIR}/${FRAMEWORKS_FOLDER_PATH}/Mapbox.framework/strip-frameworks.sh"
```

![](https://s3.systemlevel.com/docs-public/runscript.png)

Checkout the [example application](/example/README.md) to see how it's configured for an example.

0 comments on commit ba7de96

Please sign in to comment.