Learn to Build Mobile Apps With Ionic Framework, ReactJS and Capacitor: Hiding Tabs on Detail Page

Using the components provided by Ionic Framework allow you to very quickly and efficiently build solutions using ReactJS. Sometimes you find that there are modification to the way the UI performs so you need to fix it.

In the use case covered in this quick post, we are trying to hide the IonTabBar when the user is on a detail page in the application.

For those who follow me, you know I am a big fan of the React.Context API so I will be using that API to show on way of potentially solving this problem.

See post on Context.API from #Ioniconf2020 if you are not familiar with it

Here is the Video

Setting up App to Use The Context

// index.tsx
import React, { Component } from "react";
import { render } from "react-dom";
import { UIProvider } from "./src/my-context";
import App from "./src/App";

interface AppProps {}
interface AppState {
  name: string;
}

render(
  <UIProvider>
    <App />
  </UIProvider>,

  document.getElementById("root")
);

Setting up The Context - UIContext Source

We want to be able to set the global/context state for showing the tabs or not; for this we will use showTabs variable that is updated by the setShowTabs method in the context.

// my-context.tsx
import React from "react";

// create the context
export const Context = React.createContext<any>(undefined);

// create the context provider, we are using use state to ensure that
// we get reactive values from the context...

export const UIProvider: React.FC = ({ children }) => {

  // the reactive values
  const [showTabs,setShowTabs]=React.useState(true);


  // the store object
  let state = {
    showTabs,
    setShowTabs,
  };

   // wrap the application in the provider with the initialized context
  return <Context.Provider value={state}>{children}</Context.Provider>;

}

export default Context;

Pages Where You Should Hide the Tabs

What we want to do here is when we are loading the component, call the setShowTabs method from the context to tell the component that is rendering the TabBar to hide the TabBar.

You can use the useEffect hook from the reactjs hooks api. It can handle the setup of the component and the cleanup of the component. This maps to the componentDidMount and the componentWillUnmount lifecycle calls you may have used in the past.

import UIContext from "../my-context";

const Details = ({ match }) => {
  const { setShowTabs } = React.useContext(UIContext);

  useEffect(() => {
    setShowTabs(false);

    // when component is unloaded, call this code
    return () => {
      setShowTabs(true);
    };
  });

// rest of code excluded

Hiding the TabBar

To finish things up, what we do here is access the context value showTabs and if it is set to false, then we change the style of the IonTabBar to display: "none" to remove it from the screen

// App.tsx
import UIContext from "./my-context";

const App: React.FunctionComponent = () => {
  const { showTabs } = React.useContext(UIContext);

  let tabStyle = showTabs ? undefined : { display: "none" };

  return (
    <IonApp>
      <IonReactRouter>
        <IonTabs>
          <IonRouterOutlet>
            // tab routes go here...
          </IonRouterOutlet>
          <IonTabBar slot="bottom" style={tabStyle}>
            // tab bar buttons go here...
          </IonTabBar>
        </IonTabs>
      </IonReactRouter>
    </IonApp>
  );
};

Source Code On Stackblitz