Unable to update backdropOpacity of an open modal

When reporting a bug, please be sure to check if the issue still persists with react-native original modal:

Since this bug is with the backdrop, which is a custom View being added by this library, I am quite certain the issue is not in the Modal component.

When reporting a bug, please be sure to include the following:

• The outcome of the react-native-modal swap described above
  • No swap was necessary, as described above
• A descriptive title
• An isolated way to reproduce the behavior (example: GitHub repository with code isolated to the issue that anyone can clone to observe the problem)
  • See below for smaple code to reproduce
• What version of react-native-modal you’re using, and the platform(s) you’re running it on (iOS, Android, device)
  • react-native-modal 3.1.0, iOS 10.0 and up, Android API 21 and up
• What packages or other dependencies you’re using
  • Um, a lot, but the only one with any bearing on this issue is react-native v51.0
• The behavior you expect to see, and the actual behavior
  • Expected: Changing the backdropOpacity of a modal results in the opacity of the backdrop changing
  • Actual: The opacity of a modal backdrop never changes once the modal is open

Sample Code

class MyComponent extends React.Component{

  constructor(props) {
    super(props);
    this.state = { opacity: 0.7 };  // Any number other than 0.5 works for this example
  }

  render() {
    return (
      <Modal backdropOpacity={this.state.opacity}>
        <Button title={'update opacity'} onPress={() => this.setState({ opacity: 1 - this.state.opacity })} />
      </Modal>
    );
  }

}

When you open an issue for a feature request, please add as much detail as possible:

• A descriptive title
• A description of the problem you’re trying to solve, including why you think this is a problem
  • The problem is described above. The reason why I believe this is a problem is because without this, modals will be fixed to a certain backdrop opacity once opened. In my particular case, this is a problem because I am nesting modals and want to keep the overall backdrop to a fixed opacity, which is not possible unless I can update the opacity of the “parent” modal to be reduced to accommodate the “child” modal.
• An overview of the suggested solution
• If the feature changes current behavior, reasons why your solution is better
  • This solution allows for more dynamic style behavior of modals, enabling a user of the library to update a modal’s backdrop opacity once the modal has been opened.

Recommended Solutions

Since this problem is ultimately tied to the transitionTo calls overwriting any opacity set on the View with ref backdropRef, the solution is to add a style of opacity: backdropOpacity to that View and then do one of the following to prevent the transition from overwriting it:

1. Add a boolean prop, with some name along the lines of shouldAnimateOpacity, and then in _open and _close wrap the calls to animate this.backdropRef in a check around this new prop.
2. Simply check if backdropTransitionInTiming and backdropTransitionOutTiming are === 0, operating under the assumption that this means the user of this library has explicitly said “Do NOT animate this backdrop” and if so, don’t do the animated calls.
3. Without needing to set the opacity on the View, we can instead check during componentWillReceiveProps if the new opacity is different from the old, and apply a transitionTo there. See comments below for what that code would look like.

Once I get some response as to which approach is the preferred solution, I can whip up a PR pretty quickly, as the changes are quite simple. I have already verified both in my local repo, and they both accomplish the desired behavior without (as far as I can tell) altering the existing behavior of this library in any other ways.

[steveccable]

@mmazzarolo Created a PR at https://github.com/react-native-community/react-native-modal/pull/103

[mmazzarolo]

Merged, thank you!