How to trigger IonModal from an IonTabBar using Ionic React

Question

I have a specific use-case where I need to trigger a modal to open by clicking a tab from the tab bar. Similar to how Instagram triggers a modal to open when clicking the (+) icon in the tab bar to add a new post.

Given the following Ionic React tabs set up, how should I reconfigure to make this work? I would very much like to avoid having to copy/paste my modal code on to every single page.

App.tsx

const App: React.FC = () => {

  return (
    <IonApp>
      <IonReactRouter>
        <IonTabs>
          <IonRouterOutlet>
            <Route path="/signup" component={SignUp} exact={true} />
            <Route path="/login" component={Login} exact={true} />
            <Route path="/home" component={Home} />
            <Redirect exact from="/" to="/home" />
          </IonRouterOutlet>
          <IonTabBar slot="bottom">
            <IonTabButton tab="home" href="/home">
              <IonIcon icon={triangle} />
              <IonLabel>Explore</IonLabel>
            </IonTabButton>
            <IonTabButton tab="submit" href="/submit">
              <IonIcon icon={addCircle} />
              <IonLabel>Submit</IonLabel>
            </IonTabButton>
            <IonTabButton tab="login" href="/login">
              <IonIcon icon={square} />
              <IonLabel>Log In</IonLabel>
            </IonTabButton>
          </IonTabBar>
        </IonTabs>
      </IonReactRouter>
    </IonApp>
  );
};

Where should I insert the following so that I can trigger this from the tab bar and have it overlay the page content regardless of what tab I am in?

<IonModal isOpen={showModal}>
     <p>This is modal content</p>
     <IonButton onClick={() => setShowModal(false)}>Close Modal</IonButton>
</IonModal>

score 0 · Answer 1 · answered May 16 '20 at 21:59

0

https://ionicframework.com/docs/api/tabs

based on the tabs api you can determine which tab has been selected by the user and the call setShowModal(true)

Under Tab Events - https://ionicframework.com/docs/api/tabs#events There is an event called tabSelected

answered May 16 '20 at 21:59

Aaron Saunders

33,180
5
60
80

right, but where do I place the jsx to display the modal? As a sibling to `IonTabs`? – Jordan Lewallen May 16 '20 at 23:23
in what ever tabe you what the modal to be displayed – Aaron Saunders May 18 '20 at 21:38

score 0 · Answer 2 · answered Mar 08 '23 at 13:14

Since the modal does not need a route of its own, and IonTabBar can only accept IonTabButton as children, if you want to put an IonButton in there that opens the modal, it needs to be placed above IonTabs and absolute styling used to position it over the tab bar. You can place a dummy IonTabButton in the tab bar to ensure space is left for the absolutely-positioned button (making sure to visibly hide it with styling).

To get the modal to open by pressing the button, place your IonModal into its own component, and import it into App.tsx. Use the trigger prop on IonModal making sure to use the same id on the tab bar button as the trigger prop.

App.tsx

const App: React.FC = () => {

  return (
    <IonApp>
      <IonButton fill="clear" id="open-modal">
        <IonIcon icon={addCircleOutline} />
      </IonButton>

      <MyModal />

      <IonReactRouter>
        <IonTabs>
          <IonRouterOutlet>
            <Route path="/signup" component={SignUp} exact={true} />
            <Route path="/login" component={Login} exact={true} />
            <Route path="/home" component={Home} />
            <Redirect exact from="/" to="/home" />
          </IonRouterOutlet>
          <IonTabBar slot="bottom">
            <IonTabButton tab="home" href="/home">
              <IonIcon icon={triangle} />
              <IonLabel>Explore</IonLabel>
            </IonTabButton>
            <IonTabButton tab="submit" href="/submit">
              <IonIcon icon={addCircle} />
              <IonLabel>Submit</IonLabel>
            </IonTabButton>
            {/* Dummy button */}
            <IonTabButton />
            <IonTabButton tab="login" href="/login">
              <IonIcon icon={square} />
              <IonLabel>Log In</IonLabel>
            </IonTabButton>
          </IonTabBar>
        </IonTabs>
      </IonReactRouter>
    </IonApp>
  );
};

MyModal.tsx

<IonModal isOpen={showModal} trigger="open-modal">
     <p>This is modal content</p>
     <IonButton onClick={() => setShowModal(false)}>Close Modal</IonButton>
</IonModal>

It seems a very hacky solution. There should be a better way to achieve it.

How to trigger IonModal from an IonTabBar using Ionic React

2 Answers2