Created Expo config plugin (#1388)

* Created config plugin

* Update .eslintignore

* Added installation guide

* Update CHANGELOG.md

* Update plugin/src/withMapbox.ts

.eslintignore

@@ -1,2 +1,3 @@
 index.d.ts
 scripts/
+/plugin/build

.gitignore

@@ -121,3 +121,6 @@ coverage
 *.iml
 
 react-native-mapbox-gl-maps.tgz
+
+# Config plugin
+/plugin/build

.npmignore

@@ -42,3 +42,7 @@ android/local.properties
 example
 __tests__
 coverage
+
+plugin/src
+plugin/jest.config.js
+plugin/tsconfig.json

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## UNRELEASED
 Please add unreleased changes in the following style:
 PR Title ([#123](link to my pr))
+Add Expo config plugin ([#1388](https://github.com/react-native-mapbox-gl/maps/pull/1388))  
 
 Android: Bump `okhttp` to `4.9.0` ([#1390](https://github.com/react-native-mapbox-gl/maps/pull/1390))  
 

README.md

@@ -59,8 +59,10 @@ npm install @react-native-mapbox-gl/maps --save
 
 - [Android](/android/install.md)
 - [iOS](/ios/install.md)
+- [Expo](/plugin/install.md)
 - [Example](/example)
 
+
 ## Getting Started
 For more information, check out our [Getting Started](/docs/GettingStarted.md) section
 
@@ -147,7 +149,7 @@ export default class App extends Component {
 
 ## Expo Support
 
-We have a feature request open with Expo if you want to see it get in show your support https://expo.canny.io/feature-requests/p/add-mapbox-gl-support
+This package is not available in the [Expo Go](https://expo.io/client) app. Learn how you can use it with [custom dev clients](/plugin/install.md).
 
 ## Testing with Jest
 

app.plugin.js

@@ -0,0 +1 @@
+module.exports = require('./plugin/build/withMapbox');

package.json

@@ -26,14 +26,19 @@
     "unittest": "jest",
     "unittest:single": "jest --testNamePattern",
     "format": "npm run lint -- --fix",
-    "lint": "eslint . --ignore-pattern 'example' --fix && cd example/ && eslint ./src --fix"
+    "lint": "eslint . --ignore-pattern 'example' --fix && npm run lint:plugin --fix && cd example/ && eslint ./src --fix",
+    "prepare": "yarn build:plugin",
+    "test:plugin": "expo-module test plugin",
+    "build:plugin": "tsc --build plugin",
+    "lint:plugin": "eslint plugin/src/*"
   },
   "peerDependencies": {
     "prop-types": ">=15.5.8",
     "react": "^16.6.1",
     "react-native": ">=0.59.9"
   },
   "dependencies": {
+    "@expo/config-plugins": "^2.0.2",
     "@mapbox/geo-viewport": ">= 0.4.0",
     "@turf/along": ">= 4.0.0 <7.0.0",
     "@turf/distance": ">= 4.0.0 <7.0.0",
@@ -58,6 +63,7 @@
     "@react-native-community/eslint-config": "^2.0.0",
     "eslint-plugin-fp": "^2.3.0",
     "eslint-plugin-import": "2.23.4",
+    "expo-module-scripts": "^2.0.0",
     "husky": "4.3.8",
     "jest": "25.5.4",
     "@sinonjs/fake-timers": "^7.0.1",

plugin/install.md

@@ -0,0 +1,32 @@
+# Expo installation
+
+> This package cannot be used in the "Expo Go" app because [it requires custom native code](https://docs.expo.io/workflow/customizing/).
+
+First install the package with yarn, npm, or [`expo install`](https://docs.expo.io/workflow/expo-cli/#expo-install).
+
+```sh
+expo install @react-native-mapbox-gl/maps
+```
+
+After installing this npm package, add the [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` or `app.config.js`:
+
+```json
+{
+  "expo": {
+    "plugins": ["@react-native-mapbox-gl/maps"]
+  }
+}
+```
+
+Next, rebuild your app as described in the ["Adding custom native code"](https://docs.expo.io/workflow/customizing/) guide.
+
+## API
+
+This plugin doesn't currently provide any additional properties for customization. The plugin simply generates the pre-install block in the `ios/Podfile` (the post-install block is not required for Expo support). No additional changes are done on Android.
+
+## Manual Setup
+
+For bare workflow projects, you can follow the manual setup guides:
+
+- [iOS](/ios/install.md)
+- [Android](/android/install.md)

plugin/jest.config.js

@@ -0,0 +1 @@
+module.exports = require('expo-module-scripts/jest-preset-plugin');

plugin/src/__tests__/__snapshots__/withMapbox-test.ts.snap

@@ -0,0 +1,198 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`applyCocoaPodsModifications adds blocks to a expo prebuild template podfile 1`] = `
+"
+require_relative '../node_modules/react-native/scripts/react_native_pods'
+require_relative '../node_modules/react-native-unimodules/cocoapods.rb'
+require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
+
+platform :ios, '11.0'
+
+target 'HelloWorld' do
+  use_unimodules!
+  config = use_native_modules!
+
+# @generated begin pre_installer - expo prebuild (DO NOT MODIFY) sync-c8812095000d6054b846ce74840f0ffb540c2757
+  pre_install do |installer|
+# @generated begin @react-native-mapbox-gl/maps-pre_installer - expo prebuild (DO NOT MODIFY) sync-5a7ed0a20d5aff2d61639bc5bb4fd5551233d57c
+    $RNMBGL.pre_install(installer)
+# @generated end @react-native-mapbox-gl/maps-pre_installer
+  end
+# @generated end pre_installer
+  use_react_native!(:path => config[\\"reactNativePath\\"])
+
+  # Uncomment to opt-in to using Flipper
+  #
+  # if !ENV['CI']
+  #   use_flipper!('Flipper' => '0.75.1', 'Flipper-Folly' => '2.5.3', 'Flipper-RSocket' => '1.3.1')
+  #   post_install do |installer|
+  #     flipper_post_install(installer)
+  #   end
+  # end
+end
+"
+`;
+
+exports[`applyCocoaPodsModifications adds blocks to a expo prebuild template podfile with custom modifications  1`] = `
+"
+require_relative '../node_modules/react-native/scripts/react_native_pods'
+require_relative '../node_modules/react-native-unimodules/cocoapods.rb'
+require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
+
+platform :ios, '11.0'
+
+target 'HelloWorld' do
+  use_unimodules!
+  config = use_native_modules!
+
+# @generated begin pre_installer - expo prebuild (DO NOT MODIFY) sync-c8812095000d6054b846ce74840f0ffb540c2757
+  pre_install do |installer|
+# @generated begin @react-native-mapbox-gl/maps-pre_installer - expo prebuild (DO NOT MODIFY) sync-5a7ed0a20d5aff2d61639bc5bb4fd5551233d57c
+    $RNMBGL.pre_install(installer)
+# @generated end @react-native-mapbox-gl/maps-pre_installer
+  end
+# @generated end pre_installer
+  use_react_native!(:path => config[\\"reactNativePath\\"])
+
+  # pre_install do |installer|
+  # end
+
+  # Uncomment to opt-in to using Flipper
+  #
+  # if !ENV['CI']
+  #   use_flipper!('Flipper' => '0.75.1', 'Flipper-Folly' => '2.5.3', 'Flipper-RSocket' => '1.3.1')
+  #   post_install do |installer|
+  #     flipper_post_install(installer)
+  #   end
+  # end
+end
+"
+`;
+
+exports[`applyCocoaPodsModifications adds blocks to a react native template podfile 1`] = `
+"
+require_relative '../node_modules/react-native/scripts/react_native_pods'
+require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
+
+platform :ios, '11.0'
+
+target 'HelloWorld' do
+  config = use_native_modules!
+
+# @generated begin pre_installer - expo prebuild (DO NOT MODIFY) sync-c8812095000d6054b846ce74840f0ffb540c2757
+  pre_install do |installer|
+# @generated begin @react-native-mapbox-gl/maps-pre_installer - expo prebuild (DO NOT MODIFY) sync-5a7ed0a20d5aff2d61639bc5bb4fd5551233d57c
+    $RNMBGL.pre_install(installer)
+# @generated end @react-native-mapbox-gl/maps-pre_installer
+  end
+# @generated end pre_installer
+  use_react_native!(
+    :path => config[:reactNativePath],
+    # to enable hermes on iOS, change \`false\` to \`true\` and then install pods
+    :hermes_enabled => false
+  )
+
+  target 'HelloWorldTests' do
+    inherit! :complete
+    # Pods for testing
+  end
+
+  # Enables Flipper.
+  #
+  # Note that if you have use_frameworks! enabled, Flipper will not work and
+  # you should disable the next line.
+  use_flipper!()
+
+  post_install do |installer|
+    react_native_post_install(installer)
+  end
+end
+"
+`;
+
+exports[`applyCocoaPodsModifications doesn't work with revisions to blocks after comments 1`] = `
+"
+require_relative '../node_modules/react-native/scripts/react_native_pods'
+require_relative '../node_modules/react-native-unimodules/cocoapods.rb'
+require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
+
+platform :ios, '11.0'
+
+target 'HelloWorld' do
+  use_unimodules!
+  config = use_native_modules!
+  # pre_install do |installer|
+# @generated begin @react-native-mapbox-gl/maps-pre_installer - expo prebuild (DO NOT MODIFY) sync-5a7ed0a20d5aff2d61639bc5bb4fd5551233d57c
+    $RNMBGL.pre_install(installer)
+# @generated end @react-native-mapbox-gl/maps-pre_installer
+  # end
+
+  # Uncomment to opt-in to using Flipper
+  #
+  # if !ENV['CI']
+  #   use_flipper!('Flipper' => '0.75.1', 'Flipper-Folly' => '2.5.3', 'Flipper-RSocket' => '1.3.1')
+  #   post_install do |installer|
+  #     flipper_post_install(installer)
+  #   end
+  # end
+
+# @generated begin post_installer - expo prebuild (DO NOT MODIFY) sync-00old-id-2
+INVALID_post_install do |installer|
+# @generated begin @react-native-mapbox-gl/maps-post_installer - expo prebuild (DO NOT MODIFY) sync-001
+  INVALID_$RNMBGL.post_install(installer)
+# @generated end @react-native-mapbox-gl/maps-post_installer
+end
+# @generated end post_installer
+# @generated begin pre_installer - expo prebuild (DO NOT MODIFY) sync-c8812095000d6054b846ce74840f0ffb540c2757
+  pre_install do |installer|
+  end
+# @generated end pre_installer
+  use_react_native!(:path => config[\\"reactNativePath\\"])
+
+
+end
+"
+`;
+
+exports[`applyCocoaPodsModifications works after revisions to blocks 1`] = `
+"
+require_relative '../node_modules/react-native/scripts/react_native_pods'
+require_relative '../node_modules/react-native-unimodules/cocoapods.rb'
+require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
+
+platform :ios, '11.0'
+
+target 'HelloWorld' do
+  use_unimodules!
+  config = use_native_modules!
+
+# @generated begin post_installer - expo prebuild (DO NOT MODIFY) sync-00old-id-2
+INVALID_post_install do |installer|
+# @generated begin @react-native-mapbox-gl/maps-post_installer - expo prebuild (DO NOT MODIFY) sync-001
+  INVALID_$RNMBGL.post_install(installer)
+# @generated end @react-native-mapbox-gl/maps-post_installer
+end
+# @generated end post_installer
+# @generated begin pre_installer - expo prebuild (DO NOT MODIFY) sync-c8812095000d6054b846ce74840f0ffb540c2757
+  pre_install do |installer|
+# @generated begin @react-native-mapbox-gl/maps-pre_installer - expo prebuild (DO NOT MODIFY) sync-5a7ed0a20d5aff2d61639bc5bb4fd5551233d57c
+    $RNMBGL.pre_install(installer)
+# @generated end @react-native-mapbox-gl/maps-pre_installer
+  end
+# @generated end pre_installer
+  use_react_native!(:path => config[\\"reactNativePath\\"])
+
+  # pre_install do |installer|
+  # end
+
+  # Uncomment to opt-in to using Flipper
+  #
+  # if !ENV['CI']
+  #   use_flipper!('Flipper' => '0.75.1', 'Flipper-Folly' => '2.5.3', 'Flipper-RSocket' => '1.3.1')
+  #   post_install do |installer|
+  #     flipper_post_install(installer)
+  #   end
+  # end
+end
+"
+`;