Learn to Build Mobile Apps With Ionic Framework, ReactJS and Capacitor: Hiding Tabs on Detail Page
Tags: react, ionic, tutorial, javascript
Published: 2020-07-08 01:51:18

Using the components provided by [Ionic Framework](https://ionicframework.com/docs/) 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](https://reactjs.org/docs/context.htm) so I will be using that API to show on way of potentially solving this problem.

>See post on [Context.API from #Ioniconf2020](https://dev.to/aaronksaunders/ioniconf2020-slides-code-from-my-talk-on-state-management-in-reactjs-2iok) if you are not familiar with it

### Here is the Video
{% youtube X6I1qX5XtxQ %}

### Setting up App to Use The Context
```react
// 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.

```react
// 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](https://reactjs.org/docs/hooks-effect.html) 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.
```react
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
```react
// 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
{% stackblitz ionic-react-tabs-gvcbpq %}