react-native-maps 1.4.0 → 1.5.0-beta.1

package/README.md

@@ -2,8 +2,8 @@
 
 React Native Map components for iOS + Android
 
-
 ## Contributing
+
 This project is being maintained by a small group of people, and any help with issues and pull requests are always appreciated. If you are able and willing to contribute, please read the [guidelines](./CONTRIBUTING.md).
 
 ## Installation
@@ -41,6 +41,7 @@ See [Setup Instructions for the Included Example Project](docs/examples-setup.md
 ```js
 import MapView from 'react-native-maps';
 ```
+
 or
 
 ```js
@@ -54,15 +55,16 @@ declaratively controlling features on the map.
 ### Rendering a Map with an initial region
 
 ## MapView
+
 ```jsx
-  <MapView
-    initialRegion={{
-      latitude: 37.78825,
-      longitude: -122.4324,
-      latitudeDelta: 0.0922,
-      longitudeDelta: 0.0421,
-    }}
-  />
+<MapView
+  initialRegion={{
+    latitude: 37.78825,
+    longitude: -122.4324,
+    latitudeDelta: 0.0922,
+    longitudeDelta: 0.0421,
+  }}
+/>
 ```
 
 ### Using a MapView while controlling the region as state
@@ -96,12 +98,9 @@ render() {
 ### Rendering a list of markers on a map
 
 ```jsx
-import { Marker } from 'react-native-maps';
+import {Marker} from 'react-native-maps';
 
-<MapView
-  region={this.state.region}
-  onRegionChange={this.onRegionChange}
->
+<MapView region={this.state.region} onRegionChange={this.onRegionChange}>
   {this.state.markers.map((marker, index) => (
     <Marker
       key={index}
@@ -110,16 +109,18 @@ import { Marker } from 'react-native-maps';
       description={marker.description}
     />
   ))}
-</MapView>
+</MapView>;
 ```
 
 ### Rendering a Marker with a custom image
+
 1. You need to generate an `png` image with various resolution (lets call them `custom_pin`) - for more information go to [Android](https://developer.android.com/studio/write/resource-manager#import), [iOS](https://developer.apple.com/documentation/xcode/adding-images-to-your-xcode-project)
-2. put all images in Android drawables and iOS assets dir 
+2. put all images in Android drawables and iOS assets dir
 3. Now you can use the following code:
+
 ```jsx
 <Marker
-  coordinate={{ latitude : latitude , longitude : longitude }}
+  coordinate={{latitude: latitude, longitude: longitude}}
   image={{uri: 'custom_pin'}}
 />
 ```
@@ -127,10 +128,11 @@ import { Marker } from 'react-native-maps';
 Note: You can also pass the image binary data like `image={require('custom_pin.png')}`, but this will not scale good with the different screen sizes.
 
 ### Rendering a Marker with a custom view
+
 Note: This has performance implications, if you wish for a simpler solution go with a custom image (save your self the head ache)
 
 ```jsx
-<Marker coordinate={{ latitude : latitude , longitude : longitude }}>
+<Marker coordinate={{latitude: latitude, longitude: longitude}}>
   <MyCustomMarkerView {...marker} />
 </Marker>
 ```
@@ -138,14 +140,14 @@ Note: This has performance implications, if you wish for a simpler solution go w
 ### Rendering a custom Marker with a custom Callout
 
 ```jsx
-import { Callout } from 'react-native-maps';
+import {Callout} from 'react-native-maps';
 
 <Marker coordinate={marker.latlng}>
   <MyCustomMarkerView {...marker} />
   <Callout>
     <MyCustomCalloutView {...marker} />
   </Callout>
-</Marker>
+</Marker>;
 ```
 
 ### Draggable Markers
@@ -164,12 +166,9 @@ import { Callout } from 'react-native-maps';
 #### Tile Overlay using tile server
 
 ```jsx
-import { UrlTile } from 'react-native-maps';
+import {UrlTile} from 'react-native-maps';
 
-<MapView
-  region={this.state.region}
-  onRegionChange={this.onRegionChange}
->
+<MapView region={this.state.region} onRegionChange={this.onRegionChange}>
   <UrlTile
     /**
      * The url template of the tile server. The patterns {x} {y} {z} will be replaced at runtime
@@ -187,13 +186,15 @@ import { UrlTile } from 'react-native-maps';
      */
     flipY={false}
   />
-</MapView>
+</MapView>;
 ```
 
 For Android: add the following line in your AndroidManifest.xml
+
 ```xml
 <uses-permission android:name="android.permission.INTERNET" />
 ```
+
 For IOS: configure [App Transport Security](https://developer.apple.com/library/content/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33) in your app
 
 #### Tile Overlay using local tiles
@@ -201,27 +202,25 @@ For IOS: configure [App Transport Security](https://developer.apple.com/library/
 Tiles can be stored locally within device using xyz tiling scheme and displayed as tile overlay as well. This is usefull especially for offline map usage when tiles are available for selected map region within device storage.
 
 ```jsx
-import { LocalTile } from 'react-native-maps';
+import {LocalTile} from 'react-native-maps';
 
-<MapView
-  region={this.state.region}
-  onRegionChange={this.onRegionChange}
->
+<MapView region={this.state.region} onRegionChange={this.onRegionChange}>
   <LocalTile
-   /**
-    * The path template of the locally stored tiles. The patterns {x} {y} {z} will be replaced at runtime
-    * For example, /storage/emulated/0/mytiles/{z}/{x}/{y}.png
-    */
-   pathTemplate={this.state.pathTemplate}
-   /**
-    * The size of provided local tiles (usually 256 or 512).
-    */
-   tileSize={256}
+    /**
+     * The path template of the locally stored tiles. The patterns {x} {y} {z} will be replaced at runtime
+     * For example, /storage/emulated/0/mytiles/{z}/{x}/{y}.png
+     */
+    pathTemplate={this.state.pathTemplate}
+    /**
+     * The size of provided local tiles (usually 256 or 512).
+     */
+    tileSize={256}
   />
-</MapView>
+</MapView>;
 ```
 
 For Android: LocalTile is still just overlay over original map tiles. It means that if device is online, underlying tiles will be still downloaded. If original tiles download/display is not desirable set mapType to 'none'. For example:
+
 ```
 <MapView
   mapType={Platform.OS == "android" ? "none" : "standard"}
@@ -265,6 +264,7 @@ render() {
   );
 }
 ```
+
 For iOS, in addition to providing the `mapStyle` you will need to do the following
 
 ```jsx
@@ -291,36 +291,26 @@ This example displays some of them in a log as a demonstration.
 
 ![](http://i.giphy.com/3o6UBpncYQASu2WTW8.gif) ![](http://i.giphy.com/xT77YdviLqtjaecRYA.gif)
 
-
-
 ### Tracking Region / Location
 
 ![](http://i.giphy.com/3o6UBoPSLlIKQ2dv7q.gif) ![](http://i.giphy.com/xT77XWjqECvdgjx9oA.gif)
 
-
-
-
 ### Programmatically Changing Region
 
 One can change the mapview's position using refs and component methods, or by passing in an updated
-`region` prop.  The component methods will allow one to animate to a given position like the native
+`region` prop. The component methods will allow one to animate to a given position like the native
 API could.
 
 ![](http://i.giphy.com/3o6UB7poyB6YJ0KPWU.gif) ![](http://i.giphy.com/xT77Yc4wK3pzZusEbm.gif)
 
-
 ### Changing the style of the map
 
 ![](http://i.imgur.com/a9WqCL6.png)
 
-
-
 ### Arbitrary React Views as Markers
 
 ![](http://i.giphy.com/3o6UBcsCLoLQtksJxe.gif) ![](http://i.giphy.com/3o6UB1qGEM9jYni3KM.gif)
 
-
-
 ### Using the MapView with the Animated API
 
 The `<MapView />` component can be made to work with the Animated API, having the entire `region` prop
@@ -338,14 +328,10 @@ Markers' coordinates can also be animated, as shown in this example:
 
 ![](http://i.giphy.com/xTcnTelp1OwGPu1Wh2.gif) ![](http://i.giphy.com/xTcnT6WVpwlCiQnFW8.gif)
 
-
-
 ### Polygon Creator
 
 ![](http://i.giphy.com/3o6UAZWqQBkOzs8HE4.gif) ![](http://i.giphy.com/xT77XVBRErNZl3zyWQ.gif)
 
-
-
 ### Other Overlays
 
 So far, `<Circle />`, `<Polygon />`, and `<Polyline />` are available to pass in as children to the
@@ -353,16 +339,12 @@ So far, `<Circle />`, `<Polygon />`, and `<Polyline />` are available to pass in
 
 ![](http://i.giphy.com/xT77XZCH8JpEhzVcNG.gif) ![](http://i.giphy.com/xT77XZyA0aYeOX5jsA.gif)
 
-
-
 ### Gradient Polylines (iOS MapKit only)
 
 Gradient polylines can be created using the `strokeColors` prop of the `<Polyline>` component.
 
 ![](https://i.imgur.com/P7UeqAm.png?1)
 
-
-
 ### Default Markers
 
 Default markers will be rendered unless a custom marker is specified. One can optionally adjust the
@@ -370,11 +352,9 @@ color of the default marker by using the `pinColor` prop.
 
 ![](http://i.giphy.com/xT77Y0pWKmUUnguHK0.gif) ![](http://i.giphy.com/3o6UBfk3I58VIwZjVe.gif)
 
-
-
 ### Custom Callouts
 
-Callouts to markers can be completely arbitrary react views, similar to markers.  As a result, they
+Callouts to markers can be completely arbitrary react views, similar to markers. As a result, they
 can be interacted with like any other view.
 
 Additionally, you can fall back to the standard behavior of just having a title/description through
@@ -388,16 +368,12 @@ See `Callouts.js` example.
 
 ![](http://i.giphy.com/xT77XNePGnMIIDpbnq.gif) ![](http://i.giphy.com/xT77YdU0HXryvoRqaQ.gif)
 
-
-
 ### Image-based Markers
 
 Markers can be customized by just using images, and specified using the `image` prop.
 
 ![](http://i.imgur.com/mzrOjTR.png)
 
-
-
 ### Draggable Markers
 
 Markers are draggable, and emit continuous drag events to update other UI during drags.
@@ -558,10 +534,10 @@ Pass an array of coordinates to focus a map region on said coordinates.
 
 #### My map is blank
 
-* Make sure that you have [properly installed](docs/installation.md) react-native-maps.
-* Check in the logs if there is more informations about the issue.
-* Try setting the style of the MapView to an absolute position with top, left, right and bottom  values set.
-*   Make sure you have enabled Google Maps API in [Google developer console](https://console.developers.google.com/apis/library)
+- Make sure that you have [properly installed](docs/installation.md) react-native-maps.
+- Check in the logs if there is more informations about the issue.
+- Try setting the style of the MapView to an absolute position with top, left, right and bottom values set.
+- Make sure you have enabled Google Maps API in [Google developer console](https://console.developers.google.com/apis/library)
 
 ```javascript
 const styles = StyleSheet.create({
@@ -580,14 +556,14 @@ const styles = StyleSheet.create({
 
 #### Inputs don't focus
 
-* When inputs don't focus or elements don't respond to tap, look at the order of the view hierarchy, sometimes the issue could be due to ordering of rendered components, prefer putting MapView as the first component.
+- When inputs don't focus or elements don't respond to tap, look at the order of the view hierarchy, sometimes the issue could be due to ordering of rendered components, prefer putting MapView as the first component.
 
 Bad:
 
 ```jsx
 <View>
-  <TextInput/>
-  <MapView/>
+  <TextInput />
+  <MapView />
 </View>
 ```
 
@@ -595,31 +571,32 @@ Good:
 
 ```jsx
 <View>
-  <MapView/>
-  <TextInput/>
+  <MapView />
+  <TextInput />
 </View>
 ```
 
 #### Children Components Not Re-Rendering
+
 Components that aren't declared by this library (Ex: Markers, Polyline) must not be children of the MapView component due to MapView's unique rendering methodology. Have your custom components / views outside the MapView component and position absolute to ensure they only re-render as needed.
 Example:
 Bad:
 
 ```jsx
-  <View style={StyleSheet.absoluteFillObject}>
-    <MapView style={StyleSheet.absoluteFillObject}>
-      <View style={{ position: 'absolute', top: 100, left: 50 }}/>
-    </MapView>
-  </View>
+<View style={StyleSheet.absoluteFillObject}>
+  <MapView style={StyleSheet.absoluteFillObject}>
+    <View style={{position: 'absolute', top: 100, left: 50}} />
+  </MapView>
+</View>
 ```
 
 Good:
 
 ```jsx
-  <View style={StyleSheet.absoluteFillObject}>
-    <MapView style={StyleSheet.absoluteFillObject} />
-    <View style={{ position: 'absolute', top: 100, left: 50 }}/>
-  </View>
+<View style={StyleSheet.absoluteFillObject}>
+  <MapView style={StyleSheet.absoluteFillObject} />
+  <View style={{position: 'absolute', top: 100, left: 50}} />
+</View>
 ```
 
 Source: https://github.com/react-native-maps/react-native-maps/issues/1901
@@ -630,8 +607,7 @@ Source: https://github.com/react-native-maps/react-native-maps/issues/1901
 
 Source: https://github.com/react-native-maps/react-native-maps/issues/3957#issuecomment-924161121
 
-License
---------
+## License
 
      Copyright (c) 2017 Airbnb
 

package/android/build.gradle

@@ -20,11 +20,11 @@ buildscript {
 apply plugin: 'com.android.library'
 
 android {
-  compileSdkVersion safeExtGet('compileSdkVersion', 30)
+  compileSdkVersion safeExtGet('compileSdkVersion', 31)
 
   defaultConfig {
     minSdkVersion safeExtGet('minSdkVersion', 21)
-    targetSdkVersion safeExtGet('targetSdkVersion', 30)
+    targetSdkVersion safeExtGet('targetSdkVersion', 31)
   }
 }
 
@@ -43,11 +43,10 @@ repositories {
 }
 
 dependencies {
-  def work_version = safeExtGet('targetSdkVersion', 27) < 31 ? "2.5.0" : "2.7.1"
   implementation 'com.facebook.react:react-native:+'
   implementation "com.google.android.gms:play-services-base:${safeExtGet('playServicesVersion', '18.1.0')}"
   implementation "com.google.android.gms:play-services-maps:${safeExtGet('playServicesVersion', '18.0.2')}"
   implementation "com.google.android.gms:play-services-location:20.0.0"
   implementation 'com.google.maps.android:android-maps-utils:0.5'
-  implementation "androidx.work:work-runtime:$work_version"
+  implementation "androidx.work:work-runtime:2.7.1"
 }

package/android/src/main/AndroidManifest.xml

@@ -1,3 +1,3 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="com.airbnb.android.react.maps" >
+    package="com.rnmaps.maps" >
 </manifest>

package/android/src/main/java/com/{airbnb/android/react → rnmaps}/maps/FileUtil.java

@@ -1,4 +1,4 @@
-package com.airbnb.android.react.maps;
+package com.rnmaps.maps;
 
 import android.content.Context;
 import android.net.Uri;

package/android/src/main/java/com/{airbnb/android/react → rnmaps}/maps/FusedLocationSource.java

@@ -1,4 +1,4 @@
-package com.airbnb.android.react.maps;
+package com.rnmaps.maps;
 
 import android.annotation.SuppressLint;
 import android.content.Context;

package/android/src/main/java/com/{airbnb/android/react → rnmaps}/maps/ImageReadable.java

@@ -1,4 +1,4 @@
-package com.airbnb.android.react.maps;
+package com.rnmaps.maps;
 
 
 import android.graphics.Bitmap;

package/android/src/main/java/com/{airbnb/android/react → rnmaps}/maps/ImageReader.java

@@ -1,4 +1,4 @@
-package com.airbnb.android.react.maps;
+package com.rnmaps.maps;
 
 import android.content.Context;
 import android.content.res.Resources;

package/android/src/main/java/com/{airbnb/android/react → rnmaps}/maps/ImageUtil.java

@@ -1,5 +1,4 @@
-package com.airbnb.android.react.maps;
-
+package com.rnmaps.maps;
 
 import android.graphics.Bitmap;
 import android.graphics.BitmapFactory;

package/android/src/main/java/com/{airbnb/android/react → rnmaps}/maps/LatLngBoundsUtils.java

@@ -1,4 +1,4 @@
-package com.airbnb.android.react.maps;
+package com.rnmaps.maps;
 
 import com.google.android.gms.maps.model.LatLng;
 import com.google.android.gms.maps.model.LatLngBounds;

package/android/src/main/java/com/{airbnb/android/react/maps/AirMapCallout.java → rnmaps/maps/MapCallout.java}

@@ -1,15 +1,15 @@
-package com.airbnb.android.react.maps;
+package com.rnmaps.maps;
 
 import android.content.Context;
 
 import com.facebook.react.views.view.ReactViewGroup;
 
-public class AirMapCallout extends ReactViewGroup {
+public class MapCallout extends ReactViewGroup {
   private boolean tooltip = false;
   public int width;
   public int height;
 
-  public AirMapCallout(Context context) {
+  public MapCallout(Context context) {
     super(context);
   }
 

package/android/src/main/java/com/{airbnb/android/react/maps/AirMapCalloutManager.java → rnmaps/maps/MapCalloutManager.java}

@@ -1,4 +1,4 @@
-package com.airbnb.android.react.maps;
+package com.rnmaps.maps;
 
 import androidx.annotation.Nullable;
 
@@ -10,7 +10,7 @@ import com.facebook.react.uimanager.annotations.ReactProp;
 
 import java.util.Map;
 
-public class AirMapCalloutManager extends ViewGroupManager<AirMapCallout> {
+public class MapCalloutManager extends ViewGroupManager<MapCallout> {
 
   @Override
   public String getName() {
@@ -18,12 +18,12 @@ public class AirMapCalloutManager extends ViewGroupManager<AirMapCallout> {
   }
 
   @Override
-  public AirMapCallout createViewInstance(ThemedReactContext context) {
-    return new AirMapCallout(context);
+  public MapCallout createViewInstance(ThemedReactContext context) {
+    return new MapCallout(context);
   }
 
   @ReactProp(name = "tooltip", defaultBoolean = false)
-  public void setTooltip(AirMapCallout view, boolean tooltip) {
+  public void setTooltip(MapCallout view, boolean tooltip) {
     view.setTooltip(tooltip);
   }
 
@@ -42,7 +42,7 @@ public class AirMapCalloutManager extends ViewGroupManager<AirMapCallout> {
   }
 
   @Override
-  public void updateExtraData(AirMapCallout view, Object extraData) {
+  public void updateExtraData(MapCallout view, Object extraData) {
     // This method is called from the shadow node with the width/height of the rendered
     // marker view.
     //noinspection unchecked

package/android/src/main/java/com/{airbnb/android/react/maps/AirMapCircle.java → rnmaps/maps/MapCircle.java}

@@ -1,4 +1,4 @@
-package com.airbnb.android.react.maps;
+package com.rnmaps.maps;
 
 import android.content.Context;
 
@@ -7,7 +7,7 @@ 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 {
+public class MapCircle extends MapFeature {
 
   private CircleOptions circleOptions;
   private Circle circle;
@@ -19,7 +19,7 @@ public class AirMapCircle extends AirMapFeature {
   private float strokeWidth;
   private float zIndex;
 
-  public AirMapCircle(Context context) {
+  public MapCircle(Context context) {
     super(context);
   }
 

package/android/src/main/java/com/{airbnb/android/react/maps/AirMapCircleManager.java → rnmaps/maps/MapCircleManager.java}

@@ -1,4 +1,4 @@
-package com.airbnb.android.react.maps;
+package com.rnmaps.maps;
 
 import android.content.Context;
 import android.graphics.Color;
@@ -12,10 +12,10 @@ 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> {
+public class MapCircleManager extends ViewGroupManager<MapCircle> {
   private final DisplayMetrics metrics;
 
-  public AirMapCircleManager(ReactApplicationContext reactContext) {
+  public MapCircleManager(ReactApplicationContext reactContext) {
     super();
     metrics = new DisplayMetrics();
     ((WindowManager) reactContext.getSystemService(Context.WINDOW_SERVICE))
@@ -29,38 +29,38 @@ public class AirMapCircleManager extends ViewGroupManager<AirMapCircle> {
   }
 
   @Override
-  public AirMapCircle createViewInstance(ThemedReactContext context) {
-    return new AirMapCircle(context);
+  public MapCircle createViewInstance(ThemedReactContext context) {
+    return new MapCircle(context);
   }
 
   @ReactProp(name = "center")
-  public void setCenter(AirMapCircle view, ReadableMap center) {
+  public void setCenter(MapCircle 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) {
+  public void setRadius(MapCircle view, double radius) {
     view.setRadius(radius);
   }
 
   @ReactProp(name = "strokeWidth", defaultFloat = 1f)
-  public void setStrokeWidth(AirMapCircle view, float widthInPoints) {
+  public void setStrokeWidth(MapCircle 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) {
+  public void setFillColor(MapCircle view, int color) {
     view.setFillColor(color);
   }
 
   @ReactProp(name = "strokeColor", defaultInt = Color.RED, customType = "Color")
-  public void setStrokeColor(AirMapCircle view, int color) {
+  public void setStrokeColor(MapCircle view, int color) {
     view.setStrokeColor(color);
   }
 
   @ReactProp(name = "zIndex", defaultFloat = 1.0f)
-  public void setZIndex(AirMapCircle view, float zIndex) {
+  public void setZIndex(MapCircle view, float zIndex) {
     view.setZIndex(zIndex);
   }
 

package/android/src/main/java/com/{airbnb/android/react/maps/AirMapFeature.java → rnmaps/maps/MapFeature.java}

@@ -1,12 +1,12 @@
-package com.airbnb.android.react.maps;
+package com.rnmaps.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) {
+public abstract class MapFeature extends ReactViewGroup {
+  public MapFeature(Context context) {
     super(context);
   }
 

package/android/src/main/java/com/{airbnb/android/react/maps/AirMapGradientPolyline.java → rnmaps/maps/MapGradientPolyline.java}

@@ -1,4 +1,4 @@
-package com.airbnb.android.react.maps;
+package com.rnmaps.maps;
 
 import android.content.Context;
 import android.graphics.Bitmap;
@@ -30,7 +30,7 @@ import java.util.List;
  * from Dagothig/ColoredPolylineOverlay
  * (https://gist.github.com/Dagothig/5f9cf0a4a7a42901a7b2)
  */
-public class AirMapGradientPolyline extends AirMapFeature {
+public class MapGradientPolyline extends MapFeature {
   private List<LatLng> points;
   private int[] colors;
   private float zIndex;
@@ -41,7 +41,7 @@ public class AirMapGradientPolyline extends AirMapFeature {
   private TileOverlay tileOverlay;
   protected final Context context;
 
-  public AirMapGradientPolyline(Context context) {
+  public MapGradientPolyline(Context context) {
     super(context);
     this.context = context;
   }