PaddingBottom on Camera fitBounds does not work anymore

[fredbralvalex]

Describe the bug
Using this.camera.fitBounds([lng, lat], [lng, lat], [0, 0, bottom, 0], 1000), the bottom padding attribute work as Vertical padding ignoring the 0 for top padding and using the same value as bottom.

To Reproduce
Calling this.camera.fitBounds([lng, lat], [lng, lat], [top, right, bottom, left], 1000) setting the bottom padding by half screen height and 0 (or any other value) for top, right, left.

Example:

	selectRoute = () => {
		...
		this.fitBounds( [highLong, highLat], [lowerLong, lowerLat], [0, 0, height*0.5, 0]);
	}

	fitBounds(northEast: SingleCoordinate, southWest: SingleCoordinate, padding: Array<number> = [50,50,50,50]) {
		this.camera.fitBounds(northEast, southWest, padding, 500);
	}

	render() {
		return (
			<MapboxGL.Camera
				ref={camera => this.camera = camera}
				followUserLocation={false}
				followUserMode={'normal'}
			/>
		)
	}
	

Expected behavior
The center of northEastCoordinates and southWestCoordinates used must be at the center of the upper half of the screen (padding half height). However it is centered in the middle of screen.

Versions (please complete the following information):

Platform: Android, iOS 13.3.1
Device: Iphone XR
react-native-mapbox-gl Version 8.0.0-rc1 (8.0.0)*
React Native Version 0.61.5
Mapbox Version 1.0.0-beta10

• It works fine with react-native-mapbox-gl Version 7.2.0

[mfazekas]

The upstream issue causing it: mapbox/mapbox-gl-native-ios#198

[baijii]

@mfazekas Are you sure, this is causing the problem? The top padding is ignored in iOS as well as on Android devices.

[mfazekas]

@baijii pls check this comment: mapbox/mapbox-gl-native-ios#198 (comment)

I think top padding is not ignored, it's just looks it considered as a minimum padding and it's always made symmetrical.

And sure this issue is likely coming from the C++ layer which is common in ios and android.

[baijii]

@mfazekas My bad, thanks for explaining

[mfazekas]

Example to reproduce the issue:

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

import accessToken from './accesstoken.json';

MapboxGL.setAccessToken(accessToken);

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

class BugReportExample extends React.Component {
  render() {
    return (
      <SafeAreaView style={{flex: 1, flexDirection: 'column'}}>
        <Button
          title="fitBounds"
          onPress={() => {
            this.camera.fitBounds(
              [-74.00597, 40.71427],
              [-74.00697, 40.71527],
              [0, 0, 300, 0],
            );
          }}
        />
        <MapView style={{flex: 1}}>
          <Camera
            centerCoordinate={[-74.00597, 40.71427]}
            zoomLevel={14}
            ref={ref => {
              this.camera = ref;
            }}
          />
          <ShapeSource id="idStreetLayer" shape={aLine}>
            <LineLayer id="idStreetLayer" />
          </ShapeSource>
        </MapView>
      </SafeAreaView>
    );
  }
}

export default BugReportExample;

[mfazekas]

On ios as a workaround, (works on 8.1.0-rc2 and later) add:

ENV['REACT_NATIVE_MAPBOX_MAPBOX_IOS_VERSION'] = '~> 5.6.0'

example Podfile:

platform :ios, '9.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

ENV['REACT_NATIVE_MAPBOX_MAPBOX_IOS_VERSION'] = '~> 5.6.0'
...

[mfazekas]

Also submitted fix to mapbox/mapbox-gl-native-ios#323

[sunny-lirr]

I installed 8.1.0rc2, used the suggested fix on iOS, and tested the example code above. On both platforms, the fit bounds button worked on the first press.

I then pressed the button again without moving the map. On iOS, nothing happened, which seems like the intended behavior. On Android, the map moved up a bit, then an error appeared: Unable to calculate appropriate zoom level for bounds. Vertical or horizontal padding is greater than map's height or width.

[cglacet]

I experience the same bug as @sunny-lirr (only on Android too). I'm not using fitBounds, but I'm updating bounds state that I use as the map's camera bounds props. I also use a constant padding.

On high zooms, for example with the following bounds:

const bounds = {
    sw: [2.310149073600769, 48.85784],
    ne: [2.335765, 48.869005749964536],
    paddingLeft: 10,
    paddingRight: 10,
    paddingTop: 100,
    paddingBottom: 100,
};

On Android, passing this props to the camera give the above mentioned crash:

<Mapbox.Camera
    animationMode={'flyTo'}
    animationDuration={this.state.animationDuration}
    bounds={bounds}
/>

On my side the bug only happens on high zoom values but I can still zoom up to the requested level manually (fitting the input bounds manually). I guess that's the same bug appearing when calling the fitBounds method.

[mfazekas]

@cglacet this should be addressed by #973, can you please verify?!

https://github.com/react-native-mapbox-gl/maps/issues/956#issuecomment-665886930