Update docs from maps rnmapbox/maps@a83c7f2

Author: github-actions[bot]

docs/components/Camera.md

@@ -349,4 +349,4 @@ camera.zoomTo(16, 100);
 ```
 
 
-
+[Fit](../examples/Camera/Fit)

docs/examples/Camera/Fit.md

@@ -0,0 +1,313 @@
+---
+title: Fit
+tags: [Camera, Camera#zoomTo]
+custom_props:
+  example_rel_path: Camera/Fit.js
+custom_edit_url: https://github.com/rnmapbox/maps/tree/master/example/src/examples/Camera/Fit.js
+---
+
+Change camera via imperative methods
+
+```jsx
+import React from 'react';
+import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
+import { isEqual } from 'lodash';
+import Mapbox from '@rnmapbox/maps';
+
+import sheet from '../../styles/sheet';
+
+const buildPadding = ([top, right, bottom, left] = [0, 0, 0, 0]) => {
+  return {
+    paddingLeft: left,
+    paddingRight: right,
+    paddingTop: top,
+    paddingBottom: bottom,
+  };
+};
+
+const houseBounds = {
+  ne: [-74.135379, 40.795909],
+  sw: [-74.135449, 40.795578],
+};
+
+const townBounds = {
+  ne: [-74.12641, 40.797968],
+  sw: [-74.143727, 40.772177],
+};
+
+const houseCenter = [
+  (houseBounds.ne[0] + houseBounds.sw[0]) / 2,
+  (houseBounds.ne[1] + houseBounds.sw[1]) / 2,
+];
+const townCenter = [
+  (townBounds.ne[0] + townBounds.sw[0]) / 2,
+  (townBounds.ne[1] + townBounds.sw[1]) / 2,
+];
+
+const paddingZero = buildPadding();
+const paddingTop = buildPadding([200, 40, 40, 40]);
+const paddingBottom = buildPadding([40, 40, 200, 40]);
+
+class Fit extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      locationType: 'houseCenter', // houseCenter | houseBounds | townCenter | townBounds
+      zoomLevel: 16, // number
+      followUserLocation: false,
+      padding: paddingZero,
+      animationDuration: 500,
+
+      // For updating the UI in this example.
+      cachedFlyTo: undefined, // house | town
+      cachedZoomLevel: undefined, // number
+    };
+
+    this.camera = null;
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const changed = (stateKey) => {
+      // Checking if final state is `undefined` prevents another round of zeroing out in
+      // second `componentDidUpdate` call.
+      return (
+        !isEqual(prevState[stateKey], this.state[stateKey]) &&
+        this.state[stateKey] !== undefined
+      );
+    };
+
+    if (changed('followUserLocation') && this.state.followUserLocation) {
+      this.setState({
+        locationType: undefined,
+        zoomLevel: undefined,
+        cachedFlyTo: undefined,
+        cachedZoomLevel: undefined,
+      });
+      return;
+    }
+
+    if (changed('locationType') || changed('zoomLevel') || changed('padding')) {
+      this.setState({
+        cachedFlyTo: undefined,
+        cachedZoomLevel: undefined,
+      });
+    } else if (changed('cachedFlyTo') || changed('cachedZoomLevel')) {
+      this.setState({
+        locationType: undefined,
+        zoomLevel: undefined,
+        padding: paddingZero,
+      });
+    }
+  }
+
+  renderSection = (title, buttons, fade = false) => {
+    return (
+      <View style={{ paddingBottom: 5, opacity: fade ? 0.5 : 1 }}>
+        <Text>{title}</Text>
+        <ScrollView
+          horizontal={true}
+          style={{
+            flex: 0,
+            flexDirection: 'row',
+            width: '100%',
+            paddingVertical: 10,
+          }}
+        >
+          {buttons.map((button) => (
+            <TouchableOpacity
+              key={button.title}
+              style={{
+                flex: 0,
+                padding: 5,
+                marginRight: 5,
+                backgroundColor: button.selected ? 'coral' : '#d8d8d8',
+                borderRadius: 5,
+              }}
+              onPress={button.onPress}
+            >
+              <Text>{button.title}</Text>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+      </View>
+    );
+  };
+
+  cameraProps = () => {
+    const {
+      locationType,
+      zoomLevel,
+      followUserLocation,
+      padding,
+      animationDuration,
+    } = this.state;
+
+    let p = {
+      bounds: undefined,
+      centerCoordinate: undefined,
+      zoomLevel: undefined,
+      followUserLocation,
+      padding,
+      animationDuration,
+    };
+
+    if (locationType === 'houseCenter') {
+      p.centerCoordinate = houseCenter;
+    } else if (locationType === 'houseBounds') {
+      p.bounds = houseBounds;
+    } else if (locationType === 'townCenter') {
+      p.centerCoordinate = townCenter;
+    } else if (locationType === 'townBounds') {
+      p.bounds = townBounds;
+    }
+
+    if (zoomLevel !== undefined) {
+      p.zoomLevel = zoomLevel;
+    }
+
+    return p;
+  };
+
+  render() {
+    const {
+      locationType,
+      zoomLevel,
+      followUserLocation,
+      padding,
+      cachedFlyTo,
+      cachedZoomLevel,
+    } = this.state;
+
+    const centerIsSet = locationType?.toLowerCase().includes('center');
+
+    const locationTypeButtons = [
+      ['House (center)', 'houseCenter'],
+      ['House (bounds)', 'houseBounds'],
+      ['Town (center)', 'townCenter'],
+      ['Town (bounds)', 'townBounds'],
+      ['undef', undefined],
+    ].map((o) => {
+      return {
+        title: `${o[0]}`,
+        selected: locationType === o[1],
+        onPress: () => this.setState({ locationType: o[1] }),
+      };
+    });
+
+    const zoomConfigButtons = [14, 15, 16, 17, 18, 19, 20, undefined].map(
+      (n) => {
+        return {
+          title: n ? `${n}` : 'undef',
+          selected: zoomLevel === n,
+          onPress: () => this.setState({ zoomLevel: n }),
+        };
+      },
+    );
+
+    const zoomToButtons = [14, 15, 16, 17, 18, 19, 20].map((n) => {
+      return {
+        title: `${n}`,
+        selected: cachedZoomLevel === n,
+        onPress: () => {
+          this.camera.zoomTo(n, 1000);
+          this.setState({ cachedZoomLevel: n });
+        },
+      };
+    });
+
+    return (
+      <>
+        <Mapbox.MapView
+          styleURL={Mapbox.StyleURL.Satellite}
+          style={sheet.matchParent}
+        >
+          <Mapbox.Camera
+            ref={(ref) => (this.camera = ref)}
+            {...this.cameraProps()}
+          />
+          <View style={{ flex: 1, ...padding }}>
+            <View style={{ flex: 1, borderColor: 'white', borderWidth: 4 }} />
+          </View>
+        </Mapbox.MapView>
+
+        <ScrollView
+          style={{
+            flex: 0,
+            width: '100%',
+            maxHeight: 350,
+            backgroundColor: 'white',
+          }}
+          contentContainerStyle={{
+            padding: 10,
+            paddingBottom: 20,
+          }}
+        >
+          {this.renderSection('Location type', locationTypeButtons)}
+
+          {this.renderSection(
+            'Zoom' +
+              (centerIsSet ? '' : ' (only used if center coordinate is set)'),
+            zoomConfigButtons,
+            !centerIsSet,
+          )}
+
+          {this.renderSection('Follow user location', [
+            {
+              title: followUserLocation ? 'Enabled' : 'Disabled',
+              selected: followUserLocation,
+              onPress: () =>
+                this.setState({ followUserLocation: !followUserLocation }),
+            },
+          ])}
+
+          {this.renderSection('Fly to (imperative)', [
+            {
+              title: 'House',
+              selected: cachedFlyTo === 'house',
+              onPress: () => {
+                this.camera.flyTo(houseCenter);
+                this.setState({ cachedFlyTo: 'house' });
+              },
+            },
+            {
+              title: 'Town',
+              selected: cachedFlyTo === 'town',
+              onPress: () => {
+                this.camera.flyTo(townCenter);
+                this.setState({ cachedFlyTo: 'town' });
+              },
+            },
+          ])}
+
+          {this.renderSection('Zoom to (imperative)', zoomToButtons)}
+
+          {this.renderSection('Padding', [
+            {
+              title: 'None',
+              selected: isEqual(padding, paddingZero),
+              onPress: () => this.setState({ padding: paddingZero }),
+            },
+            {
+              title: 'Top',
+              selected: isEqual(padding, paddingTop),
+              onPress: () => this.setState({ padding: paddingTop }),
+            },
+            {
+              title: 'Bottom',
+              selected: isEqual(padding, paddingBottom),
+              onPress: () => this.setState({ padding: paddingBottom }),
+            },
+          ])}
+        </ScrollView>
+      </>
+    );
+  }
+}
+
+export default Fit;
+
+```
+
+}
+