Bounds padding not applied when using setCamera() on iOS on version 7.2.0

[cristian-calugar]

Describe the bug
When calling setCamera with bounds padding on 7.2.0, the padding is not applied on iOS. The padding is applied in Android and also on iOS on version 7.0.9.

To Reproduce

  fitMapBoundsAndHeading = (
    bounds: Bounds,
    padding: [number, number, number, number],
    heading?: number,
    pitch?: number
  ) => {
    let cameraSettings = {
      animationDuration: 1000
    };

    cameraSettings["bounds"] = {
      ne: bounds.northEast,
      sw: bounds.southWest,
      paddingTop: padding[0],
      paddingRight: padding[1],
      paddingBottom: padding[2],
      paddingLeft: padding[3]
    };

    if (heading !== undefined) {
      cameraSettings["heading"] = heading;
    }

    if (pitch !== undefined) {
      cameraSettings["pitch"] = pitch;
    }

    this.camera?.setCamera(cameraSettings);
  };

  render() {
    const { children } = this.props;
    return (
      <MapboxGL.MapView
        ref={this.map}
        style={styles.mapView}
        attributionEnabled={false}
        logoEnabled={false}
        compassEnabled={false}
      >
        <MapboxGL.Camera
          ref={this.setCamera}
          zoomLevel={MIN_ZOOM}
          minZoomLevel={MIN_ZOOM}
        />
        {children}
      </MapboxGL.MapView>
    );
  }

Expected behavior
Bounds padding should be taken in consideration when setting camera, to be able to arrange the elements we want to display in the specified bounds in a specific area of the screen.

Versions (please complete the following information):

• Platform: iOS
• Device: iPhone7
• Emulator/ Simulator: no
• OS: iOS12.3.1
• SDK Version: 7.2.0
• React Native Version: 0.61.5

Edit ferdicus: used correct code formatting

[cristian-calugar]

Sorry for the code formatting, I really tried to fix it, but this markdown beats me :)

[cristian-calugar]

This issue reproduces on version 8.0.0-beta1 too.

Edit: On 8.0.0-beta1 it stopped working on Android too. Was there any change on native SDKs regarding setting of padding, that is not handled yet?

[cristian-calugar]

On Android the issue appeared after the upgrade to mapbox-android-sdk 9.0.0.
If I downgrade to mapbox-android-sdk 8.6.3 it works fine.

[cristian-calugar]

On iOS the issue appeared after the upgrade to Mapbox-iOS-SDK 5.7.0. It works fine if I downgrade to Mapbox-iOS-SDK 5.6.1.

[mfazekas]

See https://github.com/mapbox/mapbox-gl-native-ios/releases for ios changelog and see https://github.com/mapbox/mapbox-gl-native-android/releases for android changelog

[mfazekas]

Also there is this change but it should be in 5.6.1 and 8.6.3 mapbox/mapbox-gl-native#14664

[cristian-calugar]

I checked all MapBox-android-sdk changes between 8.6.0 and 9.0.0 and there is nothing related to camera padding. Only fi there was a change in mapbox-gl-native library.

[mfazekas]

@cristian-calugar I could not reproduce the issue on Android w mapbox/9.0.0. If you disagree Please attach a complete sample like bellow.

import React from 'react';
import {Button} from 'react-native';
import {
  MapView,
  ShapeSource,
  LineLayer,
  Camera,
} from '@react-native-mapbox-gl/maps';

const dist = 0.002;
const padding = 100;

const aLine = {
  type: 'LineString',
  coordinates: [
    [-74.00597 - dist, 40.71427 - dist],
    [-74.00597 + dist, 40.71427 + dist],
  ],
};

class BugReportExample extends React.Component {
  render() {
    return (
      <>
        <Button
          title="move"
          onPress={() => {
            this.cameraRef.setCamera({
              bounds: {
                ne: [-74.00597 - dist, 40.71427 - dist],
                sw: [-74.00597 + dist, 40.71427 + dist],
                paddingLeft: padding * 1.1,
                paddingRight: padding * 1.1,
                paddingTop: padding * 1.1,
                paddingBottom: padding * 1.1,
              },
            });
          }}
        />
        <MapView style={{flex: 1}}>
          <Camera
            ref={ref => (this.cameraRef = ref)}
            bounds={{
              ne: [-74.00597 - dist, 40.71427 - dist],
              sw: [-74.00597 + dist, 40.71427 + dist],
              paddingLeft: padding,
              paddingRight: padding,
              paddingTop: padding,
              paddingBottom: padding,
            }}
          />
          <ShapeSource id="idStreetLayer" shape={aLine}>
            <LineLayer id="idStreetLayer" style={{lineWidth: 4.0}} />
          </ShapeSource>
        </MapView>
      </>
    );
  }
}

export default BugReportExample;