feat(example): update vertical alignment example (#1579)

* feat(example): update vertical alignment example * update CHANGELOG
rnmapbox · Oct 15, 2021 · 22df62c · 22df62c
1 parent 148c659
commit 22df62c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@ PR Title ([#123](link to my pr))
 Update ShapeSource methods to make it usable with any cluster ( Use cluster itself instead of cluster_id as first argument for getClusterExpansionZoom/getClusterLeaves/getClusterChildren methods. Version < 9 methods still supports passing cluster_id as a first argument but a deprecation warning will be shown. ) ([#1499](https://github.com/react-native-mapbox-gl/maps/pull/1499))
 ```
 
+feat(example): update vertical alignment example ([#1579](https://github.com/react-native-mapbox-gl/maps/pull/1550))  
 build(android): add telemetry dependency to default build setup ([#1550](https://github.com/react-native-mapbox-gl/maps/pull/1550))  
 fix: revert pinned mapLibre version to `5.11.0` ([8a2b00e67ba6398f3f6e6f52e98b0f0cea437e4d](https://github.com/react-native-mapbox-gl/maps/commit/8a2b00e67ba6398f3f6e6f52e98b0f0cea437e4d))
 

diff --git a/example/src/examples/UserLocation/SetUserLocationVerticalAlignment.js b/example/src/examples/UserLocation/SetUserLocationVerticalAlignment.js
@@ -7,6 +7,12 @@ import {onSortOptions} from '../../utils';
 import BaseExamplePropTypes from '../common/BaseExamplePropTypes';
 import TabBarPage from '../common/TabBarPage';
 
+const Alignments = {
+  Center: [0, 0, 0, 0],
+  Bottom: [300, 0, 0, 0],
+  Top: [0, 0, 300, 0],
+};
+
 class SetUserLocationVerticalAlignment extends React.Component {
   static propTypes = {
     ...BaseExamplePropTypes,
@@ -15,24 +21,26 @@ class SetUserLocationVerticalAlignment extends React.Component {
   constructor(props) {
     super(props);
 
-    this._alignmentOptions = Object.keys(MapboxGL.UserLocationVerticalAlignment)
-      .map(key => {
-        return {
-          label: key,
-          data: MapboxGL.UserLocationVerticalAlignment[key],
-        };
-      })
-      .sort(onSortOptions);
+    this._alignmentOptions = Object.keys(Alignments).map(key => {
+      console.log('key: ', key);
+
+      return {
+        label: key,
+        data: key,
+      };
+    });
 
     this.state = {
-      currentAlignmentMode: this._alignmentOptions[0].data,
+      currentAlignmentMode: Alignments['Center'],
     };
 
     this.onAlignmentChange = this.onAlignmentChange.bind(this);
   }
 
   onAlignmentChange(index, userLocationVerticalAlignment) {
-    this.setState({currentAlignmentMode: userLocationVerticalAlignment});
+    this.setState({
+      currentAlignmentMode: Alignments[userLocationVerticalAlignment],
+    });
   }
 
   render() {
@@ -41,7 +49,9 @@ class SetUserLocationVerticalAlignment extends React.Component {
         {...this.props}
         options={this._alignmentOptions}
         onOptionPress={this.onAlignmentChange}>
-        <MapboxGL.MapView style={sheet.matchParent}>
+        <MapboxGL.MapView
+          contentInset={this.state.currentAlignmentMode}
+          style={sheet.matchParent}>
           <MapboxGL.Camera followUserLocation />
           <MapboxGL.UserLocation />
         </MapboxGL.MapView>