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)
Make sure to install from git
#mainas 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!
@dorthwein see https://github.com/rnmapbox/maps/pull/2630
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.