Click on bottom tab to prompt a modal using React Native-CodePudding

Anyone know how to prompt a modal when press on the bottom tab? In React Native

CodePudding user response：

You can add event listener for tabPress and trigger the modal from the event listener. Like this:

const [showModal, setShowModal] = React.useState(false);

React.useEffect(() => {
  const unsubscribe = navigation.addListener('tabPress', (e) => {
    // Prevent default behavior
    e.preventDefault();
    setShowModal(true);
  });

  return unsubscribe;
}, [navigation]);

and in your return part:

<Modal
  visible={showModal}
  onRequestClose={() => {
    setShowModal(false);
  }}
>
  {/* Your code */}
</Modal>

the e.preventDefault() is optional, if you want to prevent tabPress to navigate to another screen then to that, otherwise don't use it.

CodePudding user response：

Inside the component, use componentDidMount (ClassComponent) / useEffect (FunctionComponent) to set the Modal display.