Footer hidden by React Native Navigation bottom tabs

[kevgrig]

Hi, thank you very much for this project! However, I have an issue that the footer is hidden if AmazingCropper is within a screen with React Native Navigation bottom tabs.

Here is a standalone reproduction along with a video: on the first screen, there are no bottom tabs and it works fine. Then, click on the arrow in the top right to go to the second screen which has tabs and now the footer is missing. Is there a way to add marginBottom to AmazingCropper or another way to fix this?

Source: https://github.com/kevgrig/amazingcroppertabs/blob/master/App.js Snack: https://snack.expo.io/@git/github.com/kevgrig/amazingcroppertabs

[ggunti]

@kevgrig Thanks for reproducing it so accurately. I will check it and I'll try to solve this problem.

[ggunti]

Now, in v0.1.4, you can control the height of the entire component by using the COMPONENT_HEIGHT prop, so if you want to make your bottom tabs visible, you can do something similar to this:

import React, { Component } from 'react';
import { View, Dimensions } from 'react-native';
import AmazingCropper from 'react-native-amazing-cropper';

class AmazingCropperPage extends Component {
  onDone = (croppedImageUri: string): void => {
    console.log('croppedImageUri = ', croppedImageUri);
    // send image to server
  };

  onError = (err: Error) => {
    console.log('Error', err);
  };

  onCancel = (): void => {
    // navigate back
  };

  render() {
    return (
      <>
        <AmazingCropper
          onDone={this.onDone}
          onError={this.onError}
          onCancel={this.onCancel}
          imageUri='https://www.lifeofpix.com/wp-content/uploads/2018/09/manhattan_-11-1600x2396.jpg'
          imageWidth={1600}
          imageHeight={2396}
          NOT_SELECTED_AREA_OPACITY={0.3}
          BORDER_WIDTH={20}
          COMPONENT_HEIGHT={Dimensions.get('window').height - 100}
        />
        <View style={{ backgroundColor: 'red', height: 100 }} />
      </>
    );
  }
}

export default AmazingCropperPage;

The result is that the footer is visible:

[kevgrig]

The fix works. Thank you very much!