"Can't call setState..." warning at first dismissal

[peterh32]

Here is what I am finding in 0.16.4. (I do not know about previous versions; this is the only one I've used). React-native 0.57.4.

• Set dialog visible -> true.
• Click a link/button in the dialog or click outside the dialog to set prop visible -> false.
• Result: "Warning: Can't call setState (or forceUpdate) on an unmounted component..."

Only happens the first time you set visible to false.

code:

	<View style={styles.info}>
		<Dialog visible={this.props.visible} onTouchOutside={this.props.hide}>
			<DialogContent>
				<Text style={styles.closeButton} onPress={this.props.hide}>Close</Text>
			</DialogContent>
		</Dialog>
	</View>			

...and I removed all side effects from the hide() method, so it just sets the visible prop.

[jacklam718]

@peterh32 Thanks for report the issue with a detailed information. Just to confirm, even you removed all side effects from hide method still getting that warning right? If so can you show me the code of hide method?

[peterh32]

hide() is a couple of component levels above this one, and it just sets the visible prop to false.

[kuzdogan]

Same problem here.

I set visible to false, then navigate to another screen. But the Dialog component does not unmount.

[kuzdogan]

Ok found a workaround:

We refer to child component and call handleDismiss() on Dialog.

Set a ReactRef in the constructor:

constructor(props){
    super(props);
    this.dialogRef = React.createRef();
    this.state = {
    ...
    }
  }

Set a reference when rendering the Dialog component:

<Dialog
  visible={this.state.cancelVisible}
  ref={(popupDialog) => { this.dialogRef = popupDialog; }}
> 
</Dialog>

You can dismiss the dialog externally from the parent with:

this.dialogRef.handleDismiss();