Merge pull request react-native-maps#546 from tt-sport-mobile/master

Support Android LiteMode

Author: jrichardlai

README.md

@@ -240,6 +240,11 @@ Markers are draggable, and emit continuous drag events to update other UI during
 
 ![](http://i.giphy.com/l2JImnZxdv1WbpQfC.gif) ![](http://i.giphy.com/l2JIhv4Jx6Ugx1EGI.gif)
 
+### Lite Mode ( Android )
+
+Enable lite mode on Android with `liteMode` prop. Ideal when having multiple maps in a View or ScrollView.
+
+![](http://i.giphy.com/qZ2lAf18s89na.gif)
 
 ## Component API
 

android/src/main/java/com/airbnb/android/react/maps/AirMapLiteManager.java

@@ -0,0 +1,20 @@
+package com.airbnb.android.react.maps;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.google.android.gms.maps.GoogleMapOptions;
+
+public class AirMapLiteManager extends AirMapManager {
+
+    private static final String REACT_CLASS = "AIRMapLite";
+
+    @Override
+    public String getName() {
+        return REACT_CLASS;
+    }
+
+    public AirMapLiteManager(ReactApplicationContext context) {
+        super(context);
+        this.googleMapOptions = new GoogleMapOptions().liteMode(true);
+    }
+
+}

android/src/main/java/com/airbnb/android/react/maps/AirMapManager.java

@@ -16,6 +16,7 @@
 import com.facebook.react.uimanager.annotations.ReactProp;
 import com.facebook.react.uimanager.events.RCTEventEmitter;
 import com.google.android.gms.maps.GoogleMap;
+import com.google.android.gms.maps.GoogleMapOptions;
 import com.google.android.gms.maps.MapsInitializer;
 import com.google.android.gms.maps.model.LatLng;
 import com.google.android.gms.maps.model.LatLngBounds;
@@ -43,8 +44,11 @@ public class AirMapManager extends ViewGroupManager<AirMapView> {
 
     private final ReactApplicationContext appContext;
 
+    protected GoogleMapOptions googleMapOptions;
+
     public AirMapManager(ReactApplicationContext context) {
         this.appContext = context;
+        this.googleMapOptions = new GoogleMapOptions();
     }
 
     @Override
@@ -63,7 +67,7 @@ protected AirMapView createViewInstance(ThemedReactContext context) {
             emitMapError("Map initialize error", "map_init_error");
         }
 
-        return new AirMapView(context, this.appContext, this);
+        return new AirMapView(context, this.appContext, this, this.googleMapOptions);
     }
 
     @Override

android/src/main/java/com/airbnb/android/react/maps/AirMapView.java

@@ -31,6 +31,7 @@
 import com.google.android.gms.maps.CameraUpdate;
 import com.google.android.gms.maps.CameraUpdateFactory;
 import com.google.android.gms.maps.GoogleMap;
+import com.google.android.gms.maps.GoogleMapOptions;
 import com.google.android.gms.maps.MapView;
 import com.google.android.gms.maps.OnMapReadyCallback;
 import com.google.android.gms.maps.Projection;
@@ -76,8 +77,9 @@ public class AirMapView extends MapView implements GoogleMap.InfoWindowAdapter,
     private final ThemedReactContext context;
     private final EventDispatcher eventDispatcher;
 
-    public AirMapView(ThemedReactContext context, Context appContext, AirMapManager manager) {
-        super(appContext);
+    public AirMapView(ThemedReactContext context, Context appContext, AirMapManager manager, GoogleMapOptions googleMapOptions) {
+        super(appContext, googleMapOptions);
+
         this.manager = manager;
         this.context = context;
 

android/src/main/java/com/airbnb/android/react/maps/MapsPackage.java

@@ -37,13 +37,15 @@ public List<ViewManager> createViewManagers(ReactApplicationContext reactContext
         AirMapPolygonManager polygonManager = new AirMapPolygonManager(reactContext);
         AirMapCircleManager circleManager = new AirMapCircleManager(reactContext);
         AirMapManager mapManager = new AirMapManager(reactContext);
+        AirMapLiteManager mapLiteManager = new AirMapLiteManager(reactContext);
 
         return Arrays.<ViewManager>asList(
                 calloutManager,
                 annotationManager,
                 polylineManager,
                 polygonManager,
                 circleManager,
-                mapManager);
+                mapManager,
+                mapLiteManager);
     }
 }

components/MapView.js

@@ -222,6 +222,14 @@ const propTypes = {
     longitudeDelta: PropTypes.number.isRequired,
   }),
 
+  /**
+   * A Boolean indicating whether to use liteMode for android
+   * Default value is `false`
+   *
+   * @platform android
+   */
+  liteMode: PropTypes.bool,
+
   /**
    * Maximum size of area that can be displayed.
    *
@@ -457,6 +465,15 @@ class MapView extends React.Component {
       };
     }
 
+    if (Platform.OS === 'android' && this.props.liteMode) {
+      return (
+        <AIRMapLite
+          ref={ref => { this.map = ref; }}
+          {...props}
+        />
+      );
+    }
+
     return (
       <AIRMap
         ref={ref => { this.map = ref; }}
@@ -477,6 +494,14 @@ const AIRMap = requireNativeComponent('AIRMap', MapView, {
   },
 });
 
+const AIRMapLite = requireNativeComponent('AIRMapLite', MapView, {
+  nativeOnly: {
+    onChange: true,
+    onMapReady: true,
+    handlePanDrag: true,
+  },
+});
+
 MapView.Marker = MapMarker;
 MapView.Polyline = MapPolyline;
 MapView.Polygon = MapPolygon;

docs/mapview.md

@@ -6,6 +6,7 @@
 |---|---|---|---|
 | `region` | `Region` |  | The region to be displayed by the map. <br/><br/>The region is defined by the center coordinates and the span of coordinates to display.
 | `initialRegion` | `Region` |  | The initial region to be displayed by the map.  Use this prop instead of `region` only if you don't want to control the viewport of the map besides the initial region.<br/><br/> Changing this prop after the component has mounted will not result in a region change.<br/><br/> This is similar to the `initialValue` prop of a text input.
+| `liteMode` | `Boolean` | `false` | Enable lite mode. **Note**: Android only.
 | `mapType` | `String` | `"standard"` | The map type to be displayed. <br/><br/> - standard: standard road map (default)<br/> - satellite: satellite view<br/> - hybrid: satellite view with roads and points of interest overlayed<br/> - terrain: (Android only) topographic view
 | `showsUserLocation` | `Boolean` | `false` | If `true` the app will ask for the user's location. **NOTE**: You need to add `NSLocationWhenInUseUsageDescription` key in Info.plist to enable geolocation, otherwise it is going to *fail silently*!
 | `followsUserLocation` | `Boolean` | `false` | If `true` the map will focus on the user's location. This only works if `showsUserLocation` is true and the user has shared their location. **Note**: iOS only.

example/App.js

@@ -23,6 +23,7 @@ import CachedMap from './examples/CachedMap';
 import LoadingMap from './examples/LoadingMap';
 import TakeSnapshot from './examples/TakeSnapshot';
 import FitToSuppliedMarkers from './examples/FitToSuppliedMarkers';
+import LiteMapView from './examples/LiteMapView';
 
 class App extends React.Component {
   constructor(props) {
@@ -93,6 +94,7 @@ class App extends React.Component {
       [CachedMap, 'Cached Map'],
       [LoadingMap, 'Map with loading'],
       [FitToSuppliedMarkers, 'Focus Map On Markers'],
+      [LiteMapView, 'Android Lite MapView'],
     ]);
   }
 }

example/examples/LiteMapView.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import {
+  StyleSheet,
+  Dimensions,
+  ScrollView,
+} from 'react-native';
+
+import MapView from 'react-native-maps';
+
+const { width, height } = Dimensions.get('window');
+
+const ASPECT_RATIO = width / height;
+const LATITUDE = 37.78825;
+const LONGITUDE = -122.4324;
+const LATITUDE_DELTA = 0.0922;
+const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
+
+const SAMPLE_REGION = {
+  latitude: LATITUDE,
+  longitude: LONGITUDE,
+  latitudeDelta: LATITUDE_DELTA,
+  longitudeDelta: LONGITUDE_DELTA,
+};
+
+class LiteMapView extends React.Component {
+  render() {
+    const maps = [];
+    for (let i = 0; i < 10; i++) {
+      maps.push(
+        <MapView
+          liteMode
+          key={`map_${i}`}
+          style={styles.map}
+          initialRegion={SAMPLE_REGION}
+        />
+      );
+    }
+    return (
+      <ScrollView style={StyleSheet.absoluteFillObject}>
+        {maps}
+      </ScrollView>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  map: {
+    height: 200,
+    marginVertical: 50,
+  },
+});
+
+module.exports = LiteMapView;