Generalize svg import script and use for maps, add key (to be replace…

…d) to manifest, add maps to exponent-sdk [maps] Run script to import maps [maps] Add exp.json entry for maps api key and use it in app builder

Summary:
- I did not test the shell app builder, shell app expert people please do and let me know how it goes or if I missed something.
- We should probably use a shared debug keystore (tell me if this is stupid and I don't know what I'm talking about) so we can just have one maps api key that we can use in development, and we need to generate an api key with the sha1 fingerprint for our release keystore (@jesse plis).
- We need a way for users to get the sha1 fingerprint for keystore for their shell app so that they're able to register their own API key. (@skevy plis).  - iOS was pretty straightforward, no api keys necessary, but @ben you will need to add support for the prefixes SM (https://github.com/lelandrichardson/react-native-maps/blob/master/ios/AirMaps/Callout/SMCalloutView.m) and AIR (https://github.com/lelandrichardson/react-native-maps/blob/master/ios/AirMaps/AIRMap.m) to the iOS versioning script.
- I don't know how we handle versioning of dependencies like Google Play Services Maps, which is required by this lib.

Test Plan:
- Create an Android API key: https://developers.google.com/maps/documentation/android-api/signup
  - You will need your sha1 keystore fingerprint, something like this: `keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android`
  - Put the API key into exponent/__internal__/keys.json, GOOGLE_MAPS_API_KEY
- Build in debug mode and try adding a map somewhere:
```
  import MapView from 'react-native-maps';
  // or Exponent.Components.MapView

  // in your render fn:
  <MapView
    initialRegion={{
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }}
  />
```
- Test it out in shell app builder

Reviewers: skevy, jesse, ben

Reviewed By: ben

Subscribers: jesse, ben, skevy, nikki, ide

Differential Revision: D3026

fbshipit-source-id: 73172f4

android/app/build.gradle

@@ -67,8 +67,14 @@ android {
       zipAlignEnabled true
     }
   }
+  signingConfigs {
+    debug {
+      storeFile file('../debug.keystore')
+    }
+  }
 }
 
+
 task generateDynamicMacros(type: Exec) {
   // This gets run from the 'app' directory
   commandLine 'bash', '../../tools-public/generate-dynamic-macros-android.sh'
@@ -126,6 +132,7 @@ dependencies {
   compile 'com.squareup.picasso:picasso:2.5.2'
   compile 'com.google.android.gms:play-services-gcm:8.4.0'
   compile 'com.google.android.gms:play-services-analytics:8.4.0'
+  compile 'com.google.android.gms:play-services-maps:8.4.0'
   apt 'com.raizlabs.android:DBFlow-Compiler:2.2.1'
   compile "com.raizlabs.android:DBFlow-Core:2.2.1"
   compile "com.raizlabs.android:DBFlow:2.2.1"

android/app/src/main/java/versioned/host/exp/exponent/ExponentPackage.java

@@ -47,6 +47,7 @@
 import versioned.host.exp.exponent.modules.api.components.LinearGradientManager;
 import versioned.host.exp.exponent.modules.api.components.VideoViewManager;
 import versioned.host.exp.exponent.modules.api.components.svg.RNSvgPackage;
+import versioned.host.exp.exponent.modules.api.components.maps.MapsPackage;
 import versioned.host.exp.exponent.modules.internal.ExponentAsyncStorageModule;
 import versioned.host.exp.exponent.modules.internal.ExponentIntentModule;
 import versioned.host.exp.exponent.modules.internal.ExponentUnsignedAsyncStorageModule;
@@ -147,6 +148,10 @@ public List<ViewManager> createViewManagers(ReactApplicationContext reactContext
     RNSvgPackage svgPackage = new RNSvgPackage();
     viewManagers.addAll(svgPackage.createViewManagers(reactContext));
 
+    // Add view managers from the react-native-maps package.
+    MapsPackage mapsPackage = new MapsPackage();
+    viewManagers.addAll(mapsPackage.createViewManagers(reactContext));
+
     return viewManagers;
   }
 }

android/app/src/main/java/versioned/host/exp/exponent/modules/api/components/maps/AirMapCallout.java

@@ -0,0 +1,23 @@
+package versioned.host.exp.exponent.modules.api.components.maps;
+
+import android.content.Context;
+
+import com.facebook.react.views.view.ReactViewGroup;
+
+public class AirMapCallout extends ReactViewGroup {
+    private boolean tooltip = false;
+    public int width;
+    public int height;
+
+    public AirMapCallout(Context context) {
+        super(context);
+    }
+
+    public void setTooltip(boolean tooltip) {
+        this.tooltip = tooltip;
+    }
+
+    public boolean getTooltip() {
+        return this.tooltip;
+    }
+}

android/app/src/main/java/versioned/host/exp/exponent/modules/api/components/maps/AirMapCalloutManager.java

@@ -0,0 +1,59 @@
+package versioned.host.exp.exponent.modules.api.components.maps;
+
+import com.facebook.react.common.MapBuilder;
+import com.facebook.react.uimanager.LayoutShadowNode;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.ViewGroupManager;
+import com.facebook.react.uimanager.annotations.ReactProp;
+
+import java.util.Map;
+
+import javax.annotation.Nullable;
+
+public class AirMapCalloutManager extends ViewGroupManager<AirMapCallout> {
+
+    @Override
+    public String getName() {
+        return "AIRMapCallout";
+    }
+
+    @Override
+    public AirMapCallout createViewInstance(ThemedReactContext context) {
+        return new AirMapCallout(context);
+    }
+
+    @ReactProp(name = "tooltip", defaultBoolean = false)
+    public void setTooltip(AirMapCallout view, boolean tooltip) {
+        view.setTooltip(tooltip);
+    }
+
+    @Override
+    public
+    @Nullable
+    Map getExportedCustomDirectEventTypeConstants() {
+        return MapBuilder.of(
+                "onPress", MapBuilder.of("registrationName", "onPress")
+        );
+    }
+
+    @Override
+    public LayoutShadowNode createShadowNodeInstance() {
+        // we use a custom shadow node that emits the width/height of the view
+        // after layout with the updateExtraData method. Without this, we can't generate
+        // a bitmap of the appropriate width/height of the rendered view.
+        return new SizeReportingShadowNode();
+    }
+
+    @Override
+    public void updateExtraData(AirMapCallout view, Object extraData) {
+        // This method is called from the shadow node with the width/height of the rendered
+        // marker view.
+        //noinspection unchecked
+        Map<String, Float> data = (Map<String, Float>) extraData;
+        float width = data.get("width");
+        float height = data.get("height");
+        view.width = (int) width;
+        view.height = (int) height;
+    }
+
+}

android/app/src/main/java/versioned/host/exp/exponent/modules/api/components/maps/AirMapCircle.java

@@ -0,0 +1,100 @@
+package versioned.host.exp.exponent.modules.api.components.maps;
+
+import android.content.Context;
+
+import com.google.android.gms.maps.GoogleMap;
+import com.google.android.gms.maps.model.Circle;
+import com.google.android.gms.maps.model.CircleOptions;
+import com.google.android.gms.maps.model.LatLng;
+
+public class AirMapCircle extends AirMapFeature {
+
+    private CircleOptions circleOptions;
+    private Circle circle;
+
+    private LatLng center;
+    private double radius;
+    private int strokeColor;
+    private int fillColor;
+    private float strokeWidth;
+    private float zIndex;
+
+    public AirMapCircle(Context context) {
+        super(context);
+    }
+
+    public void setCenter(LatLng center) {
+        this.center = center;
+        if (circle != null) {
+            circle.setCenter(this.center);
+        }
+    }
+
+    public void setRadius(double radius) {
+        this.radius = radius;
+        if (circle != null) {
+            circle.setRadius(this.radius);
+        }
+    }
+
+    public void setFillColor(int color) {
+        this.fillColor = color;
+        if (circle != null) {
+            circle.setFillColor(color);
+        }
+    }
+
+    public void setStrokeColor(int color) {
+        this.strokeColor = color;
+        if (circle != null) {
+            circle.setStrokeColor(color);
+        }
+    }
+
+    public void setStrokeWidth(float width) {
+        this.strokeWidth = width;
+        if (circle != null) {
+            circle.setStrokeWidth(width);
+        }
+    }
+
+    public void setZIndex(float zIndex) {
+        this.zIndex = zIndex;
+        if (circle != null) {
+            circle.setZIndex(zIndex);
+        }
+    }
+
+    public CircleOptions getCircleOptions() {
+        if (circleOptions == null) {
+            circleOptions = createCircleOptions();
+        }
+        return circleOptions;
+    }
+
+    private CircleOptions createCircleOptions() {
+        CircleOptions options = new CircleOptions();
+        options.center(center);
+        options.radius(radius);
+        options.fillColor(fillColor);
+        options.strokeColor(strokeColor);
+        options.strokeWidth(strokeWidth);
+        options.zIndex(zIndex);
+        return options;
+    }
+
+    @Override
+    public Object getFeature() {
+        return circle;
+    }
+
+    @Override
+    public void addToMap(GoogleMap map) {
+        circle = map.addCircle(getCircleOptions());
+    }
+
+    @Override
+    public void removeFromMap(GoogleMap map) {
+        circle.remove();
+    }
+}

android/app/src/main/java/versioned/host/exp/exponent/modules/api/components/maps/AirMapCircleManager.java

@@ -0,0 +1,72 @@
+package versioned.host.exp.exponent.modules.api.components.maps;
+
+import android.content.Context;
+import android.graphics.Color;
+import android.os.Build;
+import android.util.DisplayMetrics;
+import android.view.WindowManager;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.ViewGroupManager;
+import com.facebook.react.uimanager.annotations.ReactProp;
+import com.google.android.gms.maps.model.LatLng;
+
+public class AirMapCircleManager extends ViewGroupManager<AirMapCircle> {
+    private final DisplayMetrics metrics;
+
+    public AirMapCircleManager(ReactApplicationContext reactContext) {
+        super();
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
+            metrics = new DisplayMetrics();
+            ((WindowManager) reactContext.getSystemService(Context.WINDOW_SERVICE))
+                    .getDefaultDisplay()
+                    .getRealMetrics(metrics);
+        } else {
+            metrics = reactContext.getResources().getDisplayMetrics();
+        }
+    }
+
+    @Override
+    public String getName() {
+        return "AIRMapCircle";
+    }
+
+    @Override
+    public AirMapCircle createViewInstance(ThemedReactContext context) {
+        return new AirMapCircle(context);
+    }
+
+    @ReactProp(name = "center")
+    public void setCenter(AirMapCircle view, ReadableMap center) {
+        view.setCenter(new LatLng(center.getDouble("latitude"), center.getDouble("longitude")));
+    }
+
+    @ReactProp(name = "radius", defaultDouble = 0)
+    public void setRadius(AirMapCircle view, double radius) {
+        view.setRadius(radius);
+    }
+
+    @ReactProp(name = "strokeWidth", defaultFloat = 1f)
+    public void setStrokeWidth(AirMapCircle view, float widthInPoints) {
+        float widthInScreenPx = metrics.density * widthInPoints; // done for parity with iOS
+        view.setStrokeWidth(widthInScreenPx);
+    }
+
+    @ReactProp(name = "fillColor", defaultInt = Color.RED, customType = "Color")
+    public void setFillColor(AirMapCircle view, int color) {
+        view.setFillColor(color);
+    }
+
+    @ReactProp(name = "strokeColor", defaultInt = Color.RED, customType = "Color")
+    public void setStrokeColor(AirMapCircle view, int color) {
+        view.setStrokeColor(color);
+    }
+
+    @ReactProp(name = "zIndex", defaultFloat = 1.0f)
+    public void setZIndex(AirMapCircle view, float zIndex) {
+        view.setZIndex(zIndex);
+    }
+
+}

android/app/src/main/java/versioned/host/exp/exponent/modules/api/components/maps/AirMapFeature.java

@@ -0,0 +1,18 @@
+package versioned.host.exp.exponent.modules.api.components.maps;
+
+import android.content.Context;
+
+import com.facebook.react.views.view.ReactViewGroup;
+import com.google.android.gms.maps.GoogleMap;
+
+public abstract class AirMapFeature extends ReactViewGroup {
+    public AirMapFeature(Context context) {
+        super(context);
+    }
+
+    public abstract void addToMap(GoogleMap map);
+
+    public abstract void removeFromMap(GoogleMap map);
+
+    public abstract Object getFeature();
+}