react-native-maps 0.29.2 → 0.30.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/README.md +10 -3
  3. package/__tests__/AnimatedRegion.test.js +62 -0
  4. package/docs/geojson.md +6 -3
  5. package/docs/installation.md +1 -1
  6. package/docs/marker.md +3 -2
  7. package/docs/tiles.md +35 -0
  8. package/index.d.ts +27 -9
  9. package/index.js +1 -3
  10. package/lib/android/build.gradle +3 -1
  11. package/lib/android/src/main/java/com/airbnb/android/react/maps/AirMapTileProvider.java +515 -0
  12. package/lib/android/src/main/java/com/airbnb/android/react/maps/AirMapTileWorker.java +122 -0
  13. package/lib/android/src/main/java/com/airbnb/android/react/maps/AirMapUrlTile.java +124 -55
  14. package/lib/android/src/main/java/com/airbnb/android/react/maps/AirMapUrlTileManager.java +34 -0
  15. package/lib/android/src/main/java/com/airbnb/android/react/maps/AirMapView.java +6 -1
  16. package/lib/android/src/main/java/com/airbnb/android/react/maps/AirMapWMSTile.java +31 -87
  17. package/lib/android/src/main/java/com/airbnb/android/react/maps/AirMapWMSTileManager.java +22 -2
  18. package/lib/components/AnimatedRegion.js +67 -101
  19. package/lib/components/Geojson.js +214 -84
  20. package/lib/components/MapCircle.js +1 -1
  21. package/lib/components/MapHeatmap.js +2 -2
  22. package/lib/components/MapMarker.js +4 -2
  23. package/lib/components/MapPolygon.js +1 -1
  24. package/lib/components/MapPolyline.js +1 -1
  25. package/lib/components/MapUrlTile.js +54 -2
  26. package/lib/components/MapView.js +4 -4
  27. package/lib/components/MapWMSTile.js +49 -2
  28. package/lib/components/decorateMapComponent.js +1 -1
  29. package/lib/ios/AirGoogleMaps/AIRGoogleMapMarker.h +1 -0
  30. package/lib/ios/AirGoogleMaps/AIRGoogleMapMarker.m +8 -0
  31. package/lib/ios/AirGoogleMaps/AIRGoogleMapMarkerManager.m +1 -0
  32. package/lib/ios/AirMaps/AIRMapManager.m +6 -1
  33. package/lib/ios/AirMaps/AIRMapMarkerManager.m +1 -0
  34. package/lib/ios/AirMaps/AIRMapUrlTile.h +22 -4
  35. package/lib/ios/AirMaps/AIRMapUrlTile.m +124 -34
  36. package/lib/ios/AirMaps/AIRMapUrlTileCachedOverlay.h +17 -0
  37. package/lib/ios/AirMaps/AIRMapUrlTileCachedOverlay.m +235 -0
  38. package/lib/ios/AirMaps/AIRMapUrlTileManager.m +6 -1
  39. package/lib/ios/AirMaps/AIRMapWMSTile.h +10 -16
  40. package/lib/ios/AirMaps/AIRMapWMSTile.m +68 -101
  41. package/lib/ios/AirMaps/AIRMapWMSTileManager.m +6 -1
  42. package/lib/ios/AirMaps.xcodeproj/project.pbxproj +7 -1
  43. package/package.json +24 -5
  44. package/react-native-google-maps.podspec +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,31 @@
1
1
  # Change Log
2
2
 
3
+ ## 0.30.1 - (January 3, 2022)
4
+ * Common: [#4011](https://github.com/react-native-maps/react-native-maps/pull/4011) Feature fix AnimatedRegion getAnimatedValue Issue
5
+
6
+ ## 0.30.0 - (November 10, 2021)
7
+ * Common: [#3789](https://github.com/react-native-maps/react-native-maps/pull/3789) URLTile tile caching
8
+ * Common: [#3938](https://github.com/react-native-maps/react-native-maps/pull/3938) Add URLTile & WMSTile opacity property
9
+ * Common: [#3996](https://github.com/react-native-maps/react-native-maps/pull/3996) Allow wider version range for react-native-web peer dependency
10
+ * Common: [#3977](https://github.com/react-native-maps/react-native-maps/pull/3977) Upgrade example app to React Native 0.65.1
11
+ * Common: [#3972](https://github.com/react-native-maps/react-native-maps/pull/3972) Fix default color and stroke width properties for Geojson component
12
+ * Common: [#3965](https://github.com/react-native-maps/react-native-maps/pull/3965) GeoJSON Marker Title Prop & A bit Refactor
13
+ * Common: [#3744](https://github.com/react-native-maps/react-native-maps/pull/3744) Updates AnimatedRegion component
14
+ * Common: [#3966](https://github.com/react-native-maps/react-native-maps/pull/3966) Fix polygon on press wrong coordinates
15
+ * iOS: [#3997](https://github.com/react-native-maps/react-native-maps/pull/3997) Allow markers to be un-tappable on ios gmaps
16
+ * iOS: [#3944](https://github.com/react-native-maps/react-native-maps/pull/3944) Add heading to onUserLocationChange
17
+ * iOS: [#3956](https://github.com/react-native-maps/react-native-maps/pull/3956) Add missing export for AIRMapMarker isPreselected view property
18
+ * iOS: [#3973](https://github.com/react-native-maps/react-native-maps/pull/3973) Version bump googleMaps and Google-Maps-iOS-Utils
19
+ * Android: [#3945](https://github.com/react-native-maps/react-native-maps/pull/3945) Bump minSDKVersion to 21
20
+
21
+ ## 0.29.4 - (November 10, 2021)
22
+ * Common: [#3996](https://github.com/react-native-maps/react-native-maps/pull/3996) Allow wider version range for react-native-web peer dependency
23
+
24
+ ## 0.29.3 - (August 29, 2021)
25
+
26
+ * Common: [#3920](https://github.com/react-native-maps/react-native-maps/pull/3920) GeoJSON onPress Crash Fix and Marker Customization Options
27
+ * Common: [#3930](https://github.com/react-native-maps/react-native-maps/pull/3930) Updated peer deps to maintain compatibility with expo init
28
+
3
29
  ## 0.29.2 - (July 5, 2021)
4
30
 
5
31
  * Android: **Revert** [#3797](https://github.com/react-native-maps/react-native-maps/pull/3797) Allow a previously dashed line to be made solid
@@ -28,6 +54,10 @@
28
54
  * Docs: [#3716](https://github.com/react-native-maps/react-native-maps/pull/3716) Update Mapview docs
29
55
  * Docs: [#3793](https://github.com/react-native-maps/react-native-maps/pull/3793) Update Polygon docs
30
56
 
57
+ ## 0.28.1 - (November 10, 2021)
58
+ * Common: [#3996](https://github.com/react-native-maps/react-native-maps/pull/3996) Allow wider version range for react-native-web peer dependency
59
+
60
+
31
61
  ## 0.28.0 (April 20, 2021)
32
62
 
33
63
  * Common: [#3705](https://github.com/react-native-maps/react-native-maps/pull/3705) Update example project
package/README.md CHANGED
@@ -118,7 +118,7 @@ import { Marker } from 'react-native-maps';
118
118
  ```
119
119
 
120
120
  ### Rendering a Marker with a custom image
121
- 1. You need to generate an `png` image with various resolution (lets call them `custom_pin`) - for more infromation go to [Android](https://developer.android.com/studio/write/image-asset-studio#access), [iOS](https://developer.apple.com/library/archive/documentation/ToolsLanguages/Conceptual/Xcode_Overview/AddingImages.html)
121
+ 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/image-asset-studio#access), [iOS](https://developer.apple.com/library/archive/documentation/ToolsLanguages/Conceptual/Xcode_Overview/AddingImages.html)
122
122
  2. put all images in Android drawables and iOS assets dir
123
123
  3. Now you can use the following code:
124
124
  ```jsx
@@ -236,7 +236,7 @@ See [OSM Wiki](https://wiki.openstreetmap.org/wiki/Category:Tile_downloading) fo
236
236
 
237
237
  ### Overlaying other components on the map
238
238
 
239
- Place components you that wish to overlay `MapView` underneath the `MapView` closing tag. Absolutely position these elements.
239
+ Place components that you wish to overlay `MapView` underneath the `MapView` closing tag. Absolutely position these elements.
240
240
 
241
241
  ```jsx
242
242
  render() {
@@ -482,6 +482,7 @@ componentWillReceiveProps(nextProps) {
482
482
  } else {
483
483
  this.state.coordinate.timing({
484
484
  ...nextProps.coordinate,
485
+ useNativeDriver: true, // defaults to false if not passed explicitly
485
486
  duration
486
487
  }).start();
487
488
  }
@@ -603,7 +604,7 @@ Good:
603
604
  </View>
604
605
  ```
605
606
 
606
- ### Children Components Not Re-Rendering
607
+ #### Children Components Not Re-Rendering
607
608
  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.
608
609
  Example:
609
610
  Bad:
@@ -627,6 +628,12 @@ Good:
627
628
 
628
629
  Source: https://github.com/react-native-maps/react-native-maps/issues/1901
629
630
 
631
+ #### Crashing with EXC_BAD_ACCESS on iOS when switching apps
632
+
633
+ `<MapView>` using Apple Maps in `mapType: "standard"` will sometimes crash when you background the app or switch into another app. This is only an issue in XCode using Metal API Validation, and won't happen in production. To eliminate this problem even while debugging in XCode, go to `Edit Scheme... -> Run (Debug) -> Diagnostics` and uncheck `Metal -> API Validation`. (h/t [@Simon-TechForm](https://github.com/Simon-TechForm)).
634
+
635
+ Source: https://github.com/react-native-maps/react-native-maps/issues/3957#issuecomment-924161121
636
+
630
637
  License
631
638
  --------
632
639
 
@@ -0,0 +1,62 @@
1
+ import { Animated } from 'react-native';
2
+ import AnimatedRegion from '../lib/components/AnimatedRegion';
3
+
4
+ const VALUES = {
5
+ latitude: 5,
6
+ longitude: 5,
7
+ latitudeDelta: 0,
8
+ longitudeDelta: 0,
9
+ };
10
+
11
+ describe('AnimatedRegion', () => {
12
+ it('converts numbers to instances of Animated.Value', () => {
13
+ const animatedRegion = new AnimatedRegion(VALUES);
14
+
15
+ expect(animatedRegion.latitude instanceof Animated.Value).toBe(true);
16
+ expect(animatedRegion.longitude instanceof Animated.Value).toBe(true);
17
+ expect(animatedRegion.latitudeDelta instanceof Animated.Value).toBe(true);
18
+ expect(animatedRegion.longitudeDelta instanceof Animated.Value).toBe(true);
19
+
20
+ const values = animatedRegion.__getValue();
21
+
22
+ expect(values.latitude).toEqual(VALUES.latitude);
23
+ expect(values.longitude).toEqual(VALUES.longitude);
24
+ expect(values.longitudeDelta).toEqual(VALUES.longitudeDelta);
25
+ expect(values.latitudeDelta).toEqual(VALUES.latitudeDelta);
26
+ });
27
+
28
+ it('uses Animated.Value instances', () => {
29
+ const animatedRegion = new AnimatedRegion({
30
+ latitude: new Animated.Value(VALUES.latitude),
31
+ longitude: new Animated.Value(VALUES.longitude),
32
+ });
33
+
34
+ expect(animatedRegion.latitude instanceof Animated.Value).toBe(true);
35
+ expect(animatedRegion.longitude instanceof Animated.Value).toBe(true);
36
+ expect(animatedRegion.latitudeDelta instanceof Animated.Value).toBe(true);
37
+ expect(animatedRegion.longitudeDelta instanceof Animated.Value).toBe(true);
38
+
39
+ const values = animatedRegion.__getValue();
40
+
41
+ expect(values.latitude).toEqual(VALUES.latitude);
42
+ expect(values.longitude).toEqual(VALUES.longitude);
43
+ expect(values.longitudeDelta).toEqual(VALUES.longitudeDelta);
44
+ expect(values.latitudeDelta).toEqual(VALUES.latitudeDelta);
45
+ });
46
+
47
+ it('uses defaults converted to Animated.Value instances when none are supplied', () => {
48
+ const animatedRegion = new AnimatedRegion({});
49
+
50
+ expect(animatedRegion.latitude instanceof Animated.Value).toBe(true);
51
+ expect(animatedRegion.longitude instanceof Animated.Value).toBe(true);
52
+ expect(animatedRegion.latitudeDelta instanceof Animated.Value).toBe(true);
53
+ expect(animatedRegion.longitudeDelta instanceof Animated.Value).toBe(true);
54
+
55
+ const values = animatedRegion.__getValue();
56
+
57
+ expect(values.latitude).toEqual(0);
58
+ expect(values.longitude).toEqual(0);
59
+ expect(values.longitudeDelta).toEqual(VALUES.longitudeDelta);
60
+ expect(values.latitudeDelta).toEqual(VALUES.latitudeDelta);
61
+ });
62
+ });
package/docs/geojson.md CHANGED
@@ -5,9 +5,10 @@
5
5
  | Prop | Type | Default | Note |
6
6
  | --------- | ---- | ------------------------------------------------------ | ---- |
7
7
  | `geojson` | `GeoJSON` | | [Geojson](https://geojson.org/) description of object. |
8
- | `strokeColor` | `String` | stroke color in GeoJson if present else `#000` | The stroke color to use for the path. |
9
- | `fillColor` | `String` | fill color in GeoJson | The fill color to use for the path. |
10
- | `strokeWidth` | `Number` | stroke width in Geojson if present else `1` | The stroke width to use for the path. |
8
+ | `strokeColor` | `String` | `stroke` property in GeoJson if present else `#000` | The stroke color to use for polygons and polylines. |
9
+ | `fillColor` | `String` | `fill` property in GeoJson | The fill color to use for polygons. |
10
+ | `strokeWidth` | `Number` | `stroke-width` property in Geojson if present else `1` | The stroke width to use for polygons and polylines. |
11
+ | `color` | `String` | `marker-color` property in GeoJson | The color to use for points. |
11
12
  | `lineDashPhase` | `Number` | | (iOS only) The offset (in points) at which to start drawing the dash pattern. Use this property to start drawing a dashed line partway through a segment or gap. For example, a phase value of 6 for the patter 5-2-3-2 would cause drawing to begin in the middle of the first gap. |
12
13
  | `lineDashPattern` | `Array<Number>` | | An array of numbers specifying the dash pattern to use for the path. The array contains one or more numbers that indicate the lengths (measured in points) of the line segments and gaps in the pattern. The values in the array alternate, starting with the first line segment length, followed by the first gap length, followed by the second line segment length, and so on. |
13
14
  | `lineCap` | `'butt' | 'round' | 'square'` | | The line cap style to apply to the open ends of the path. Possible values are `butt`, `round` or `square`. Note: lineCap is not yet supported for GoogleMaps provider on iOS. |
@@ -15,6 +16,8 @@
15
16
  | `miterLimit` | `Number` | | The limiting value that helps avoid spikes at junctions between connected line segments. The miter limit helps you avoid spikes in paths that use the `miter` `lineJoin` style. If the ratio of the miter length—that is, the diagonal length of the miter join—to the line thickness exceeds the miter limit, the joint is converted to a bevel join. The default miter limit is 10, which results in the conversion of miters whose angle at the joint is less than 11 degrees. |
16
17
  | `zIndex` | `Number` | | Layer level of the z-index value |
17
18
  | `onPress` | `Function` | | returns the selected overlay value with the onPress functionality |
19
+ | `markerComponent` | `React Node` | | Component to render in place of the default marker when the overlay type is a `point`
20
+ | `title` | `string` | | The title of the marker. This is only used if the <Marker /> component has no children that are a `<Callout />`
18
21
 
19
22
  ## Example
20
23
 
@@ -46,7 +46,7 @@ If you want to enable Google Maps on iOS, obtain the Google API key and edit you
46
46
  @implementation AppDelegate
47
47
  ...
48
48
 
49
- - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
49
+ (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
50
50
  {
51
51
  + [GMSServices provideAPIKey:@"_YOUR_API_KEY_"]; // add this line using the api key obtained from Google Console
52
52
  ...
package/docs/marker.md CHANGED
@@ -7,7 +7,7 @@
7
7
  | `title` | `String` | | The title of the marker. This is only used if the <Marker /> component has no children that are a `<Callout />`, in which case the default callout behavior will be used, which will show both the `title` and the `description`, if provided.
8
8
  | `description` | `String` | | The description of the marker. This is only used if the <Marker /> component has no children that are a `<Callout />`, in which case the default callout behavior will be used, which will show both the `title` and the `description`, if provided.
9
9
  | `image` | `ImageSource`* | | A custom image to be used as the marker's icon. Only local image resources are allowed to be used.
10
- | `icon` | `ImageSource`* | | Marker icon to render (equivalent to `icon` property of GMSMarker Class). **Note:** Google maps only!
10
+ | `icon` | `ImageSource`* | | Marker icon to render (equivalent to `icon` property of GMSMarker Class). Only local image resources are allowed to be used. **Note:** Google maps only!
11
11
  | `pinColor` | `Color` | | If no custom marker view or custom image is provided, the platform default pin will be used, which can be customized by this color. Ignored if a custom marker is being used.<br/><br/> For Android, the set of available colors is limited. Unsupported colors will fall back to red. See [#887](https://github.com/react-community/react-native-maps/issues/887) for more information.
12
12
  | `coordinate` | `LatLng` | | The coordinate for the marker.
13
13
  | `centerOffset` | `Point` | (0, 0) | The offset (in points) at which to display the view.<br/><br/> By default, the center point of an annotation view is placed at the coordinate point of the associated annotation. You can use this property to reposition the annotation view as needed. This x and y offset values are measured in points. Positive offset values move the annotation view down and to the right, while negative values move it up and to the left.<br/><br/> For Google Maps, see the `anchor` prop.
@@ -18,6 +18,7 @@
18
18
  | `identifier` | `String` | | An identifier used to reference this marker at a later date.
19
19
  | `rotation` | `Float` | 0 | A float number indicating marker's rotation angle, in degrees.
20
20
  | `draggable` | `<null>` | | This is a non-value based prop. Adding this allows the marker to be draggable (re-positioned).
21
+ | `tappable` | `Boolean` | true | Sets whether marker should be tappable. If set to false, the marker will not have onPress events. **Note**: iOS Google Maps only.
21
22
  | `tracksViewChanges` | `Boolean` | true | Sets whether this marker should track view changes. It's recommended to turn it off whenever it's possible to improve custom marker performance.
22
23
  | `tracksInfoWindowChanges` | `Boolean` | false | Sets whether this marker should track view changes in info window. Enabling it will let marker change content of info window after first render pass, but will lead to decreased performance, so it's recommended to disable it whenever you don't need it. **Note**: iOS Google Maps only.
23
24
  | `stopPropagation` | `Boolean` | false | Sets whether this marker should propagate `onPress` events. Enabling it will stop the parent `MapView`'s `onPress` from being called. **Note**: iOS only. Android does not propagate `onPress` events. See [#1132](https://github.com/react-community/react-native-maps/issues/1132) for more information.
@@ -72,7 +73,7 @@ type Point {
72
73
 
73
74
  ## Children Components
74
75
 
75
- Children components can be added within a Marker and rendered content will replace the marker symbol. This is a way of creating custom markers and allowing use of native SVGs.
76
+ Children components can be added within a Marker and rendered content will replace the marker symbol. This is a way of creating custom markers and allowing use of native SVGs.
76
77
 
77
78
  Example:
78
79
  ```
package/docs/tiles.md ADDED
@@ -0,0 +1,35 @@
1
+ # `<URLTile />` and `<WMSTile />`Component API
2
+
3
+ ## Props
4
+
5
+ | Prop | Type | Default | Note |
6
+ | ------------------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
7
+ | `urlTemplate` | `String` | | The url template of the map tileserver. <br/><br/> (URLTile) The patterns {x} {y} {z} will be replaced at runtime. For example, http://c.tile.openstreetmap.org/{z}/{x}/{y}.png. It is also possible to refer to tiles in local filesystem with file:///top-level-directory/sub-directory/{z}/{x}/{y}.png URL-format. <br/><br/> (WMSTile) The patterns {minX} {maxX} {minY} {maxY} {width} {height} will be replaced at runtime according to EPSG:900913 specification bounding box. For example, https://demo.geo-solutions.it/geoserver/tiger/wms?service=WMS&version=1.1.0&request=GetMap&layers=tiger:poi&styles=&bbox={minX},{minY},{maxX},{maxY}&width={width}&height={height}&srs=EPSG:900913&format=image/png&transparent=true&format_options=dpi:213. |
8
+ | `minimumZ` | `Number` | | The minimum zoom level for this tile overlay. |
9
+ | `maximumZ` | `Number` | | The maximum zoom level for this tile overlay. |
10
+ | `maximumNativeZ` | `Number` | | (Optional) The maximum native zoom level for this tile overlay i.e. the highest zoom level that the tile server provides. Tiles are auto-scaled for higher zoom levels. |
11
+ | `zIndex` | `Number` | `-1` | (Optional) The order in which this tile overlay is drawn with respect to other overlays. An overlay with a larger z-index is drawn over overlays with smaller z-indices. The order of overlays with the same z-index is arbitrary. |
12
+ | `tileSize` | `Number` | `256` | (Optional) Tile size, default size is 256 (for tiles of 256 _ 256 pixels). High-res (aka 'retina') tiles are 512 (tiles of 512 _ 512 pixels). |
13
+ | `doubleTileSize` | `Boolean` | `false` | (Optional) Doubles tile size from 256 to 512 utilising higher zoom levels i.e loading 4 higher zoom level tiles and combining them for one high-resolution tile. iOS does this automatically, even if it is not desirable always. NB! using this makes text labels smaller than in the original map style. |
14
+ | `shouldReplaceMapContent` | `Boolean` | `false` | (iOS) Corresponds to MKTileOverlay canReplaceMapContent i.e. if true then underlying iOS basemap is not shown. |
15
+ | `flipY` | `Boolean` | `false` | (Optional)Allow tiles using the TMS coordinate system (origin bottom left) to be used, and displayed at their correct coordinates. |
16
+ | `tileCachePath` | `String` | | (Optional) Enable caching of tiles in the specified directory. Directory can be specified either as a normal path or in URL format (`file://`). Tiles are stored in tileCachePath directory as `/{z}/{x}/{y}` i.e. in sub-directories 2-levels deep, filename is tile y-coordinate without any filetype-extension. <br/><br/>NB! All cache management needs to be implemented by client e.g. deleting tiles to manage use of storage space etc. |
17
+ | `tileCacheMaxAge` | `Number` | | (Optional) Defines maximum age in seconds for a cached tile before it's refreshed. NB! Refresh logic is "serve-stale-while-refresh" i.e. to ensure map availability a stale (over max age) tile is served while a tile refresh process is started in the background. |
18
+ | `offlineMode` | `Boolean` | `false` | (Optional) Sets offline-mode. In offline-mode tiles are not fetched from the tile servers, rather only tiles stored in the cache directory are used. Furthermore automated tile scaling is activated: if tile at a desired zoom level is not found from the cache directory, then lower zoom level tile is used (up to 4 levels lower) and scaled. |
19
+ | `opacity` | `Number` | | (Optional) Map layer opacity. Value between 0 - 1, with 0 meaning fully transparent. |
20
+
21
+ ## Using tile components
22
+
23
+ Both `URLTile` and `WMSTile` components require access to a tileserver. Please note that due to overuse OpenStreetMap free tileservers do not work on Android with `URLTile` and are not recommended to be used for iOS either for other than small scale test use.
24
+
25
+ `URLTile` and `WMSTile` components both implement caching and non-caching usage modes. Non-caching is the default and uses Android and iOS default implementations for tile overlays. Non-caching means that there is no caching of map tiles in React Native Maps implementation, however both iOS and Android do some limited caching with their default implementation. Non-caching mode works well when network connectivity is good and is simple to use.
26
+
27
+ Caching mode is activated when `tileCachePath` property is defined as a valid directory where React Native app has read & write access. In caching mode any new tile fetched from the tileserver is also cached in the directory defined by `tileCachePath` property and cached version is used for any future access to the tile, which means tiles can be used also when there is no or limited network connectivity. Caching also allows pre-loading of tiles to the cache directory, enabling offline map loading functionality which is typical feature in many map applications.
28
+
29
+ NB! There is no cache size management in React Native Maps, rather developer needs to implement in JS side code some mechanism to watch the size of tile cache directory and either automatically remove old tiles or allow user to delete the tiles.
30
+
31
+ `tileCacheMaxAge` property enables automatic renewal of cached tiles. Refresh logic is "serve-stale-while-refresh" meaning that when expired (i.e. older than defined `tileCacheMaxAge`) tile is requested the old cached ("stale") tile is served while a background process is started to refresh ("update") the expired tile. Refresh logic is optimised for poor network connectivity situation / app offline-mode use: if tile is cached, user is always served a tile even if it is stale, before a tile refresh is attempted and a failure in tile refresh is not a problem as stale tile remains available. Refresh logic is "lazy" i.e. tile refresh check is only done when tile is accessed. Any other refresh logic needs to be implemented in JS side code e.g. at set time intervals checking through tiles in cache and refreshing tiles as needed.
32
+
33
+ `offlineMode` property enables mode in which only cached tiles are used, tile fetch from tileserver is not even attempted. This is useful for situations when network connectivity is poor and repeated & possibly failed attempts to fetch tiles (even with caching enabled) from tileserver would increase device power consumption. Another benefit of offline-mode is that if a requested tile is missing from the cache then lower zoom level tiles are used if available and served (after scaling). This is especially useful when user has pre-loaded an area of map for certain zoom levels, allowing user to zoom in the map to higher zoom levels than which were pre-loaded.
34
+
35
+ `maximumNativeZ` property works both in caching and non-caching mode, however it is very much recommended to be used in caching mode: it sets the highest zoom level for tiles to be fetched from the tileserver. Any higher zoom levels that `maximumNativeZ` will be created by scaling a lower zoom level tile. This will help to manage the cache size, since an increase in zoom level means 4 times as many tiles are needed as in a previous level. Depending on type of map tiles and their quality a `maximumNativeZ` set at 15 - 17 and `maximumZ` set at 18 - 20 will often give good results, allowing user to zoom in deep into the map with good enough map visual quality.
package/index.d.ts CHANGED
@@ -80,6 +80,7 @@ declare module 'react-native-maps' {
80
80
  easing?: (value: number) => number;
81
81
  duration?: number;
82
82
  delay?: number;
83
+ useNativeDriver?: boolean;
83
84
  }
84
85
 
85
86
  interface AnimatedRegionSpringConfig
@@ -96,13 +97,14 @@ declare module 'react-native-maps' {
96
97
  stiffness?: number;
97
98
  mass?: number;
98
99
  damping?: number;
100
+ useNativeDriver?: boolean;
99
101
  }
100
102
 
101
- export class AnimatedRegion extends RNAnimated.AnimatedWithChildren {
102
- latitude: RNAnimated.Value;
103
- longitude: RNAnimated.Value;
104
- latitudeDelta: RNAnimated.Value;
105
- longitudeDelta: RNAnimated.Value;
103
+ export class AnimatedRegion extends Animated.AnimatedWithChildren {
104
+ latitude: Animated.Value;
105
+ longitude: Animated.Value;
106
+ latitudeDelta: Animated.Value;
107
+ longitudeDelta: Animated.Value;
106
108
 
107
109
  constructor(region?: Region);
108
110
 
@@ -356,6 +358,7 @@ declare module 'react-native-maps' {
356
358
  calloutAnchor?: Point;
357
359
  flat?: boolean;
358
360
  draggable?: boolean;
361
+ tappable?: boolean;
359
362
  tracksViewChanges?: boolean;
360
363
  tracksInfoWindowChanges?: boolean;
361
364
  stopPropagation?: boolean;
@@ -504,10 +507,16 @@ declare module 'react-native-maps' {
504
507
  urlTemplate: string;
505
508
  minimumZ?: number;
506
509
  maximumZ?: number;
510
+ maximumNativeZ?: number;
507
511
  zIndex?: number;
508
512
  tileSize?: number;
513
+ doubleTileSize?: boolean;
509
514
  shouldReplaceMapContent?: boolean;
510
515
  flipY?: boolean;
516
+ tileCachePath?: string;
517
+ tileCacheMaxAge?: number;
518
+ offlineMode?: boolean;
519
+ opacity?: number;
511
520
  }
512
521
 
513
522
  export class UrlTile extends React.Component<MapUrlTileProps, any> {}
@@ -527,12 +536,16 @@ declare module 'react-native-maps' {
527
536
 
528
537
  export interface MapWMSTileProps extends ViewProperties {
529
538
  urlTemplate: string;
530
- maximumZ?: number;
531
539
  minimumZ?: number;
532
- tileSize: number;
533
- opacity: number;
540
+ maximumZ?: number;
541
+ maximumNativeZ?: number;
534
542
  zIndex?: number;
543
+ tileSize?: number;
535
544
  shouldReplaceMapContent?: boolean;
545
+ tileCachePath?: string;
546
+ tileCacheMaxAge?: number;
547
+ offlineMode?: boolean;
548
+ opacity?: number;
536
549
  }
537
550
 
538
551
  export class WMSTile extends React.Component<MapWMSTileProps, any> {}
@@ -584,7 +597,7 @@ declare module 'react-native-maps' {
584
597
  import GeoJSON from 'geojson';
585
598
 
586
599
  export interface GeojsonProps {
587
- geojson: GeoJSON.GeoJSON;
600
+ geojson: GeoJSON.FeatureCollection;
588
601
  strokeColor?: string;
589
602
  fillColor?: string;
590
603
  strokeWidth?: number;
@@ -593,6 +606,11 @@ declare module 'react-native-maps' {
593
606
  lineCap?: 'butt' | 'round' | 'square';
594
607
  lineJoin?: 'miter' | 'round' | 'bevel';
595
608
  miterLimit?: number;
609
+ zIndex?: number;
610
+ tappable?: boolean;
611
+ title?: string;
612
+ onPress?: (event: MapEvent) => void;
613
+ markerComponent?: React.ReactNode;
596
614
  }
597
615
 
598
616
  export class Geojson extends React.Component<GeojsonProps, any> {}
package/index.js CHANGED
@@ -14,9 +14,7 @@ export { default as UrlTile } from './lib/components/MapUrlTile.js';
14
14
  export { default as WMSTile } from './lib/components/MapWMSTile.js';
15
15
  export { default as LocalTile } from './lib/components/MapLocalTile.js';
16
16
  export { default as Callout } from './lib/components/MapCallout.js';
17
- export {
18
- default as CalloutSubview,
19
- } from './lib/components/MapCalloutSubview.js';
17
+ export { default as CalloutSubview } from './lib/components/MapCalloutSubview.js';
20
18
  export { default as AnimatedRegion } from './lib/components/AnimatedRegion.js';
21
19
  export { default as Geojson } from './lib/components/Geojson.js';
22
20
 
@@ -11,12 +11,13 @@ android {
11
11
  compileSdkVersion safeExtGet('compileSdkVersion', 28)
12
12
 
13
13
  defaultConfig {
14
- minSdkVersion safeExtGet('minSdkVersion', 16)
14
+ minSdkVersion safeExtGet('minSdkVersion', 21)
15
15
  targetSdkVersion safeExtGet('targetSdkVersion', 27)
16
16
  }
17
17
  }
18
18
 
19
19
  dependencies {
20
+ def work_version = "2.5.0"
20
21
  def supportLibVersion = safeExtGet('supportLibVersion', '28.0.0')
21
22
  def supportLibMajorVersion = supportLibVersion.split('\\.')[0] as int
22
23
  def appCompatLibName = (supportLibMajorVersion < 20) ? "androidx.appcompat:appcompat" : "com.android.support:appcompat-v7"
@@ -28,4 +29,5 @@ dependencies {
28
29
  implementation "com.google.android.gms:play-services-maps:${safeExtGet('playServicesVersion', '17.0.0')}"
29
30
  implementation "com.google.android.gms:play-services-location:17.0.0"
30
31
  implementation 'com.google.maps.android:android-maps-utils:0.5'
32
+ implementation "androidx.work:work-runtime:$work_version"
31
33
  }