Fixes react-native-maps#470. Support legalLabelInsets on Apple Maps (react-native-maps#840)

* Fixes react-native-maps#470 for iOS and Apple Maps

This will add support for `legalLabelInsets` prop on iOS with Apple Maps. Code is adapted from RN core.

* Pluralize updateLegalLabelInset(s) for consistency

* Removed arrow notation

* Added legalLabelInsets example

Author: scarlac

example/App.js

@@ -32,6 +32,7 @@ import CustomTiles from './examples/CustomTiles';
 import ZIndexMarkers from './examples/ZIndexMarkers';
 import StaticMap from './examples/StaticMap';
 import MapStyle from './examples/MapStyle';
+import LegalLabel from './examples/LegalLabel';
 
 const IOS = Platform.OS === 'ios';
 const ANDROID = Platform.OS === 'android';
@@ -142,6 +143,7 @@ class App extends React.Component {
       [CustomTiles, 'Custom Tiles', true],
       [ZIndexMarkers, 'Position Markers with Z-index', true],
       [MapStyle, 'Customize the style of the map', true],
+      [LegalLabel, 'Reposition the legal label', true],
     ]
     // Filter out examples that are not yet supported for Google Maps on iOS.
     .filter(example => ANDROID || (IOS && (example[2] || !this.state.useGoogleMaps)))

example/examples/LegalLabel.js

@@ -0,0 +1,113 @@
+import React from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  Dimensions,
+} from 'react-native';
+
+import MapView from 'react-native-maps';
+
+const screen = Dimensions.get('window');
+
+class LegalLabel extends React.Component {
+  static propTypes = {
+    provider: MapView.ProviderPropType,
+  }
+
+  render() {
+    const latlng = {
+      latitude: 37.78825,
+      longitude: -122.4324,
+    };
+
+    const ASPECT_RATIO = screen.width / screen.height;
+    const LATITUDE_DELTA = 0.0922;
+    const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
+
+    return (
+      <View style={{ ...StyleSheet.absoluteFillObject }}>
+        <MapView
+          provider={this.props.provider}
+          style={styles.map}
+          legalLabelInsets={{ bottom: 10, right: 10 }}
+          initialRegion={{
+            ...latlng,
+            latitudeDelta: LATITUDE_DELTA,
+            longitudeDelta: LONGITUDE_DELTA,
+          }}
+        >
+          <MapView.Marker coordinate={latlng} />
+        </MapView>
+
+        <View style={styles.username}>
+          <Text style={styles.usernameText}>Username</Text>
+        </View>
+
+        <View style={styles.bio}>
+          <Text style={styles.bioText}>
+            Bio description lorem ipsum Ullamco exercitation
+            aliqua ullamco nostrud dolor et aliquip fugiat do
+            aute fugiat velit in aliqua sit.
+          </Text>
+        </View>
+
+        <View style={styles.photo}>
+          <View style={styles.photoInner}>
+            <Text style={styles.photoText}>
+              Profile Photo
+            </Text>
+          </View>
+        </View>
+      </View>
+    );
+  }
+}
+
+const padding = 10;
+const photoSize = 80;
+const mapHeight = screen.height - 130;
+const styles = StyleSheet.create({
+  bio: {
+    marginHorizontal: padding,
+    marginBottom: 0,
+    paddingVertical: padding / 2,
+  },
+  bioText: {
+    fontSize: 16,
+    lineHeight: 16 * 1.5,
+  },
+  username: {
+    paddingLeft: photoSize + padding + padding,
+    paddingTop: padding,
+  },
+  usernameText: {
+    fontSize: 36,
+    lineHeight: 36,
+  },
+  photo: {
+    padding: 2,
+    position: 'absolute',
+    top: mapHeight - (photoSize / 2),
+    left: padding,
+    borderRadius: 5,
+    borderWidth: StyleSheet.hairlineWidth,
+    backgroundColor: '#ccc',
+    width: photoSize,
+    height: photoSize,
+  },
+  photoInner: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 1,
+  },
+  photoText: {
+    fontSize: 9,
+    textAlign: 'center',
+  },
+  map: {
+    height: mapHeight,
+  },
+});
+
+module.exports = LegalLabel;

ios/AirMaps/AIRMap.m

@@ -381,6 +381,26 @@ - (void)cacheViewIfNeeded {
 
         [self updateScrollEnabled];
         [self updateZoomEnabled];
+        [self updateLegalLabelInsets];
+    }
+}
+
+- (void)updateLegalLabelInsets {
+    if (_legalLabel) {
+        dispatch_async(dispatch_get_main_queue(), ^{
+            CGRect frame = _legalLabel.frame;
+            if (_legalLabelInsets.left) {
+                frame.origin.x = _legalLabelInsets.left;
+            } else if (_legalLabelInsets.right) {
+                frame.origin.x = self.frame.size.width - _legalLabelInsets.right - frame.size.width;
+            }
+            if (_legalLabelInsets.top) {
+                frame.origin.y = _legalLabelInsets.top;
+            } else if (_legalLabelInsets.bottom) {
+                frame.origin.y = self.frame.size.height - _legalLabelInsets.bottom - frame.size.height;
+            }
+            _legalLabel.frame = frame;
+        });
     }
 }