maxs15 / maxs15/react-native-modalbox

`componentWillReceiveProps` does not reflect `isOpen` prop properly.

Open
#120 2 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
2.9k
Forks
496
PR merge metrics
No merged PRs in 30d

Description

The current [componentWillReceiveProps](https://github.com/maxs15/react-native-modalbox/blob/9928297925750e004af77b8e9f1b2cce0d799646/index.js#L106) function does not reflect the new properties accordingly.

If the `isOpen` property is modified, the `handleOpenning` function ends up comparing `nextProps.isOpen` against `this.props.isDisabled` in the open/close functions which shouldn't be the case.

It'd make more sense to pass in the current props and replace stuff like:
```javascript
close: function() {
if (this.props.isDisabled) return;
if (!this.state.isAnimateClose && (this.state.isOpen || this.state.isAnimateOpen)) {
delete this.onViewLayoutCalculated;
this.animateClose();
}
}
```

with
```javascript
close: function(nextProps = null) {
let props = nextProps || this.props;
if (props.isDisabled) return;
if (!this.state.isAnimateClose && (this.state.isOpen || this.state.isAnimateOpen)) {
delete this.onViewLayoutCalculated;
this.animateClose();
}
}
```

Or better yet, just move the `handleOpenning` function into `componentDidUpdate` instead.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in index.js around componentWillReceiveProps and handleOpenning, then trace how isOpen and isDisabled are used by the open and close functions. Reproduce a change to isOpen and verify that opening or closing responds to the new props without comparing isOpen to isDisabled.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.