Allow legalLabelInsets to be changed and animated (#873)

* Allow legalLabelInsets to be changed and animated Updated example to include a button to animate the legal label. * Docs for legalLabelInsets prop While structurally identical to EdgePadding, they serve completely different purposes. Default left empty since it's an OS default (around {left: 10, bottom: 10}) * Spacing / linting
react-native-maps · Dec 8, 2016 · 7869dfd · 7869dfd
1 parent 8d654fb
commit 7869dfd
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 2 deletions.
diff --git a/docs/mapview.md b/docs/mapview.md
@@ -28,6 +28,7 @@
 | `loadingIndicatorColor` | `Color` | `#606060` | Sets loading indicator color, default to `#606060`.
 | `loadingBackgroundColor` | `Color` | `#FFFFFF` | Sets loading background color, default to `#FFFFFF`.
 | `moveOnMarkerPress` | `Boolean` | `true` | `Android only` If `false` the map won't move when a marker is pressed.
+| `legalLabelInsets` | `EdgeInsets` | | If set, changes the position of the "Legal" label link from the OS default. **Note:** iOS only.
 
 
 ## Events
@@ -103,3 +104,12 @@ type EdgePadding {
   left: Number
 }
 ```
+
+```
+type EdgeInsets {
+  top: Number,
+  left: Number,
+  bottom: Number,
+  right: Number
+}
+```
diff --git a/example/examples/LegalLabel.js b/example/examples/LegalLabel.js
@@ -3,7 +3,9 @@ import {
   StyleSheet,
   View,
   Text,
+  Animated,
   Dimensions,
+  TouchableOpacity,
 } from 'react-native';
 
 import MapView from 'react-native-maps';
@@ -15,6 +17,34 @@ class LegalLabel extends React.Component {
     provider: MapView.ProviderPropType,
   }
 
+  state = {
+    _legalLabelPositionY: new Animated.Value(10),
+    legalLabelPositionY: 10,
+  }
+
+  componentDidMount() {
+    this.state._legalLabelPositionY.addListener(({ value }) => {
+      this.setState({
+        legalLabelPositionY: value,
+      });
+    });
+  }
+
+  componentWillUnmount() {
+    this.state._legalLabelPositionY.removeAllListeners();
+  }
+
+  onPressAnimate = () => {
+    Animated.sequence([
+      Animated.spring(this.state._legalLabelPositionY, {
+        toValue: 100,
+      }),
+      Animated.spring(this.state._legalLabelPositionY, {
+        toValue: 10,
+      }),
+    ]).start();
+  }
+
   render() {
     const latlng = {
       latitude: 37.78825,
@@ -30,7 +60,7 @@ class LegalLabel extends React.Component {
         <MapView
           provider={this.props.provider}
           style={styles.map}
-          legalLabelInsets={{ bottom: 10, right: 10 }}
+          legalLabelInsets={{ bottom: this.state.legalLabelPositionY, right: 10 }}
           initialRegion={{
             ...latlng,
             latitudeDelta: LATITUDE_DELTA,
@@ -41,7 +71,9 @@ class LegalLabel extends React.Component {
         </MapView>
 
         <View style={styles.username}>
-          <Text style={styles.usernameText}>Username</Text>
+          <TouchableOpacity onPress={this.onPressAnimate}>
+            <Text style={styles.usernameText}>Animate</Text>
+          </TouchableOpacity>
         </View>
 
         <View style={styles.bio}>
@@ -84,6 +116,8 @@ const styles = StyleSheet.create({
   usernameText: {
     fontSize: 36,
     lineHeight: 36,
+    color: 'blue',
+    textDecorationLine: 'underline',
   },
   photo: {
     padding: 2,

diff --git a/ios/AirMaps/AIRMap.m b/ios/AirMaps/AIRMap.m
@@ -404,6 +404,12 @@ - (void)updateLegalLabelInsets {
     }
 }
 
+
+- (void)setLegalLabelInsets:(UIEdgeInsets)legalLabelInsets {
+  _legalLabelInsets = legalLabelInsets;
+  [self updateLegalLabelInsets];
+}
+
 - (void)beginLoading {
     if ((!self.hasShownInitialLoading && self.loadingEnabled) || (self.cacheEnabled && self.cacheImageView.image == nil)) {
         self.loadingView.hidden = NO;