CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-native-ios
John Valdetine
John Valdetine

Reputation: 446

How to control of open/close modal in react-native

I want to control of 'Opening and Closing Modals' without using Redux. If I use Redux, i create a variable as isVisible and control it with setting a value as true or false. But, If I dont use Redux, i cant solve problem that explained below.

It's the code that I call modal function.

<TouchableOpacity onPress={ () => this.setState({ visibleModal: true ])}>
<Text> Press me! </Text> </TouchableOpacity>

<ProfileModals isVisible={this.state.visibleModal} />

Main Modal function:

  export default class ProfileModals extends Component {

      state = {
        visibleModal: this.props.isVisible,
        modal: "changeName"
      };

render() {

    const {visibleModal} = this.state;

    return (
      <Modal
      isVisible={this.state.visibleModal}
      backdropColor="black"
      backdropOpacity={0.5}
      animationOut="fadeOut"
      onBackdropPress={() => this.setState({ visibleModal: false })}
      swipeDirection={"down"}
      onSwipeComplete={() => this.setState({ visibleModal: false })}
    >
    <View>
      <Text>Hello!</Text>
        </View>
    </Modal>
    );
  }
}

When I press the button at the first time, Modal run correctly. After closing the modal, I press the button second time, It doesn't run anymore. Because of this.state.visibleModal value (in ProfileModal Component) is false, not this.props.isVisible.

How can i solve this problem?

Upvotes: 0

Views: 1910

Answers (1)

Abdul Ahmad
Abdul Ahmad

Reputation: 10021

dont store the modal's visibility in the state of the modal component, allow it to flow through props from the parent, follow this approach:

class Parent extends Component {
  state = {
    modalVisible: false,
  };

  openModal = () => this.setState({ modalVisible: true });
  closeModal = () => this.setState({ modalVisible: false });

  render() {
    const { modalVisible } = this.state;
    return (
      <OtherStuff>
        <Button onPress={this.openModal} />
        <MyModal 
          visible={modalVisible}
          closeModal={this.closeModal} 
        />
      </OtherStuff>
    );
  }
}

class MyModal extends Component {
  render() {
    const { visible, closeModal } = this.props;

    return (
      <Modal isVisible={visible}>
        <Button onPress={closeModal} />
      </Modal>
    );
  }
}

Upvotes: 1

Related Questions