[Bug]: Info button appears above Mapbox logo when using logoPosition and attributionPosition #4182
Description
Mapbox Version
11.16.2
React Native Version
0.81.5
Platform
iOS
@rnmapbox/maps version
10.2.10
Standalone component to reproduce
import React from 'react';
import { MapView, Camera } from '@rnmapbox/maps';
export default class BugReportExample extends React.Component {
render() {
return (
<MapView
style={{ flex: 1 }}
logoEnabled={true}
attributionEnabled={true}
logoPosition={{ bottom: 0, left: 0 }}
attributionPosition={{ bottom: 0, left: 0 }}
>
<Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
);
}
}
Observed behavior and steps to reproduce
Observed behavior and steps to reproduce:
Set up MapView with logoEnabled and attributionEnabled.
Set logoPosition={{ bottom: 0, left: 0 }} and attributionPosition={{ bottom: 0, left: 0 }}.
Run the app on any device.
Observed:
The info button of the attribution control renders above the logo instead of to its right. On some devices, it appears in the top-right corner of the Mapbox ornament container.
Expected behavior
Expected behavior:
The info button should render horizontally to the right of the logo, aligned properly, and consistent across all devices, screen sizes, and resolutions.
Notes / preliminary analysis
Notes / preliminary analysis:
Hardcoding offsets with left/top values does not reliably fix this issue.
The React Native wrapper seems to not fully respect logoPosition + attributionPosition when rendering the internal info button.
Wrapping the logo and attribution button in a flexDirection: 'row' container manually fixes the layout, but the native props themselves are insufficient.
Additional links and references
Additional links and references:
Screenshot/GIF of the info button appearing above the logo:
