CODEWITHSUNDEEP
react-nativereact-navigationreact-native-popup-dialog
Tvvi Xie
Tvvi Xie

Reputation: 11

react-native-popup-dialog cannot dismiss when using in react-navigation header

I am using "react-native-popup-dialog" and "react-navigation" in my RN project. I want to add a button on my header for Search. Clicking the button to open a dialog with input fields to search.

In "react-native-popup-dialog", I need to call show() method to show the popUpDialog,

this.popUpDialogForSearch.show();

In "react-navigation", I need to set the onPress method for my button in static area for the "react-navigation"'s design.

constructor(props) {
    super(props);
    this.state = {
        dialogVisible: false,
    };
}

static navigationOptions = ({ navigation }) => {
    return {
        header: <Header hasSegment>
            <Left>
                <Button transparent onPress={() => navigation.navigate("Home")}>
                    <Icon name="ios-arrow-back" style={styles.icon}/>
                </Button>
            </Left>

            <Body style={{ flex: 1.45 }}>
            <Segment style={styles.segmentStyle}>
                <Button style={styles.leftRoundBorder} first><Text>查看待办列表</Text></Button>
                <Button onPress={() => { navigation.navigate("AddNormalStoreIn"); }} ><Text>添加一般入库单</Text></Button>
                <Button onPress={() => { navigation.navigate("AddConstructionStoreIn"); }} style={styles.rightRoundBorder} last><Text>添加施工入库单</Text></Button>
            </Segment>
            </Body>

            <Right style={styles.iconPosition}>
                <Button transparent>
                    <Icon name="search" onPress={ navigation.getParam("popUpDialog") } style={styles.icon}/>
                </Button>
            </Right>
        </Header>,
    };
};

componentDidMount() {
    this.props.navigation.setParams({ popUpDialog: this._searchPopUpDialog });
    this.fetchFindStoreIn();
}

componentDidUpdate() {
    if (this.state.dialogVisible) {
        this.popUpDialogForSearch.show();
    }
}

_searchPopUpDialog = () => {
    this.setState({ dialogVisible: true });
};
....
<PopupDialog
    ref={ (popUpDialog) => this.popUpDialogForSearch = popUpDialog }
    onDismissed={ () => this.setState({ dialogVisible: false }) }
    width={0.7}
    height={0.7}
    containerStyle={{
        // TODO: dynamic height
        marginTop: -50,
    }}
    dialogTitle={
    <DialogTitle
        title="入库单搜索"
        haveTitleBar={false}
    />
}>
    { <SearchForm /> }
</PopupDialog>

Now my code making the dialog can't dismiss as expected, and if one dialog doesn't close, the other dialog in other pages cannot be opened.

It wired and confusing me for a while.

Any suggestion to call an instance method in the static area? Thanks.

Upvotes: 0

Views: 1002

Answers (1)

Tvvi Xie
Tvvi Xie

Reputation: 11

I have found out that when I triggering "Debug JS Remotely" mode, the issue will occur.

Once I disable this mode, the popUp dialog can be closed expected.

I don't really know the root cause now, I will keep track of it.

Thanks.

Upvotes: 0

Related Questions