maps: [Bug]: MapView contentInset is not applied

Mapbox Implementation

Mapbox

Mapbox Version

10.10.0

Platform

iOS, Android

@rnmapbox/maps version

10.0.0-beta.64

Standalone component to reproduce

import React from 'react';
import { Button } from 'react-native';
import {
  MapView,
  ShapeSource,
  SymbolLayer,
  CircleLayer,
  Camera,
} from '@rnmapbox/maps';

const styles = {
  mapView: { flex: 1 },
  circleLayer: {
    circleRadiusTransition: { duration: 5000, delay: 0 },
    circleColor: '#ff0000',
  },
};

const features = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      id: 'a-feature',
      properties: {
        icon: 'example',
        text: 'example-icon-and-label',
      },
      geometry: {
        type: 'Point',
        coordinates: [-74.00597, 40.71427],
      },
    },
  ],
};

class TempMapView extends React.Component {
  state = {
    radius: 20,
  };

  render() {
    const circleLayerStyle = {
      ...styles.circleLayer,
      ...{ circleRadius: this.state.radius },
    };

    return (
      <>
        <Button
          title="Grow"
          onPress={() => this.setState({ radius: this.state.radius + 20 })}
        />
        <MapView style={styles.mapView} contentInset={[0, 0, 200, 0]}>
          <Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
          <ShapeSource id={'shape-source-id-0'} shape={features}>
            <CircleLayer id={'circle-layer'} style={circleLayerStyle} />
            <SymbolLayer
              id="symbol-id"
              style={{
                iconImage: ['get', 'icon'],
              }}
            />
          </ShapeSource>
        </MapView>
      </>
    );
  }
}

export default TempMapView;

Observed behavior and steps to reproduce

Tested in the repo’s example app by simply replacing the component code of example/src/examples/V10/CameraAnimation.tsx with the above and change the conentInset values attribute on MapView. Shots are identical, despite differences in contentInset (hover over shot for values):

Expected behavior

The MapView content should move according to the contentInset values.

Notes / preliminary analysis

Only thing I checked was logging if the contenInset values reach the MapView component: javascript/components/MapView.js Lines 803-813 They do.

First tested with 10.0.0-beta.59, Mapbox 10.10.7. No changes since.

Additional links and references

No response

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 15 (9 by maintainers)

Most upvoted comments

Make sure to install from git #main as it’s not yet released in a beta version.

Thank you @KiwiKilian … 👉 https://github.com/rnmapbox/maps/issues/2554#issuecomment-1450602239!! 🙇‍♀️ Will check it out ASAP

@KiwiKilian - not all heros wear capes - your the man! Thank you! I look forward to giving this a go!

Adding to @KiwiKilian the use case for this seems to be mostly having the user location positioned at the bottom of the map (or side in landscape) for turn by turn navigation. I know in v8 this was a constant battle for a long time.