React NativeでGoogle Mapを出現させる（iOS）

React NativeでUberみたいな位置情報を使ったアプリを作ります。
今回は、「React NativeでGoogle Mapを出現させる」ところまで進めていきたいと思います。

`react-native link`をやってはいけない、やってOKなど情報が錯綜していますが、下記の開発環境ではドキュメント通りに進めていくことが正解でした。

# 開発環境

react-native: 0.55.3
react-native-maps: 0.21.0

# Mapを表示する

* [react-native-maps]('https://github.com/react-community/react-native-maps')をインストールする

```
npm install --save react-native-maps
```

* Google MapのAPIキーを取得する
[こちら](https://developers.google.com/maps/documentation/ios-sdk/get-api-key)のドキュメント通りに、Google Map APIキーを取得したあと、プロジェクトにAPIキーを追加していきます。

```objc:AppDelegate.m 
以下のインポート文を追加します。
#import "AppDelegate.h"

@import GoogleMaps; // ここを追加

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

[GMSServices provideAPIKey:@"YOUR_API_KEY"]; // ここを追加

```

* Pod installする
ios階層で`pod init`して（Cocoa podをインストールしてることを想定）Podfileを出現させます。そこに、下記をコピペ。

```ruby:Podfile
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target '_YOUR_PROJECT_TARGET_' do
  rn_path = '../node_modules/react-native'
  rn_maps_path = '../node_modules/react-native-maps'

  # See http://facebook.github.io/react-native/docs/integration-with-existing-apps.html#configuring-cocoapods-dependencies
  pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec"
  pod 'React', path: rn_path, subspecs: [
    'Core',
    'CxxBridge',
    'DevSupport',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTGeolocation',
    'RCTImage',
    'RCTLinkingIOS',
    'RCTNetwork',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket',
  ]

  # React Native third party dependencies podspecs
  pod 'DoubleConversion', :podspec => "#{rn_path}/third-party-podspecs/DoubleConversion.podspec"
  pod 'glog', :podspec => "#{rn_path}/third-party-podspecs/glog.podspec"
  # If you are using React Native <0.54, you will get the following error:
  # "The name of the given podspec `GLog` doesn't match the expected one `glog`"
  # Use the following line instead:
  #pod 'GLog', :podspec => "#{rn_path}/third-party-podspecs/GLog.podspec"
  pod 'Folly', :podspec => "#{rn_path}/third-party-podspecs/Folly.podspec"

  # react-native-maps dependencies
  pod 'react-native-maps', path: rn_maps_path
  pod 'react-native-google-maps', path: rn_maps_path  # Remove this line if you don't want to support GoogleMaps on iOS
  pod 'GoogleMaps'  # Remove this line if you don't want to support GoogleMaps on iOS
  pod 'Google-Maps-iOS-Utils' # Remove this line if you don't want to support GoogleMaps on iOS
end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == 'react-native-google-maps'
      target.build_configurations.each do |config|
        config.build_settings['CLANG_ENABLE_MODULES'] = 'No'
      end
    end
    if target.name == "React"
      target.remove_from_project
    end
  end
end
```
書き込んだら、`pod install`します。

ここまでできたら、`App.js`にコードを書いていきます。

```App.js
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import MapView from 'react-native-maps'

export default class Main extends Component {
  render() {
    return (
      <MapView
        style={styles.map}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
    );
  }
}

const styles = StyleSheet.create({
  map: { ...StyleSheet.absoluteFillObject, },
});
```
これで、通常のMapは出るはずです。

* Google Mapを表示する
上記の仕様は、Google Mapも出せるようにインストールしておいたので、下記のようにソースコードを変えてあげるだけで出るはずです。

```App.js
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps'

export default class Main extends Component {
  render() {
    return (
      <MapView
        provider={PROVIDER_GOOGLE}
        style={styles.map}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
    );
  }
}

const styles = StyleSheet.create({
  map: { ...StyleSheet.absoluteFillObject, },
});
```