Mobile Development with Ionic and React — Tabs, Toggles, and Toasts

If we know how to create React web apps but want to develop mobile apps, we can use the Ionic framework.

In this article, we’ll look at how to get started with mobile development with the Ionic framework with React.

Tabs

We can add a tab bar with the IonTabBar and IonTabButton components.

For example, we can write:

import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import {
  IonApp,
  IonIcon,
  IonLabel,
  IonRouterOutlet,
  IonTabBar,
  IonTabButton,
  IonTabs
} from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { triangle } from 'ionicons/icons';
import Tab1 from './pages/Tab1';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Route path="/tab1" component={Tab1} exact={true} />
          <Route path="/" render={() => <Redirect to="/tab1" />} exact={true} />
        </IonRouterOutlet>
        <IonTabBar slot="bottom">
          <IonTabButton tab="tab1" href="/tab1">
            <IonIcon icon={triangle} />
            <IonLabel>Tab 1</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonApp>
);

export default App;

We add the components to the app.

And we can use the IonRouterOutlet to show the tab’s content.

The href has the path of the tab route to show.

Toast

We can add the IonToast component to add toasts into our app.

For example, we can write:

import React, { useState } from 'react';
import { IonButton, IonContent, IonToast } from '[@ionic/react](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Fionic%2Freact "Twitter profile for @ionic/react")';
import './Tab1.css';

const Tab1: React.FC = () => {
  const [showToast, setShowToast] = useState(false);

  return (
    <IonContent>
      <IonButton onClick={() => setShowToast(true)} expand="block">Show Toast</IonButton>
      <IonToast
        isOpen={showToast}
        onDidDismiss={() => setShowToast(false)}
        message="Your settings have been saved."
        duration={200}
      />
    </IonContent>
  );
};

export default Tab1;

We add the IonToast component to add the toast.

The isOpen prop sets when it’s open with a boolean.

onDidDismiss prop’s function is run when we dismiss the toast.

message has the toast message.

duration has the duration of the toast.

Toggles

We can add toggles into our app by using the IonToggle component.

For example, we can write:

import React, { useState } from 'react';
import { IonContent, IonItem, IonItemDivider, IonLabel, IonList, IonToggle } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  const [checked, setChecked] = useState(false);

  return (
    <IonContent>
      <IonList>
        <IonItemDivider>Default Toggle</IonItemDivider>
        <IonItem>
          <IonLabel>Checked: {JSON.stringify(checked)}</IonLabel>
          <IonToggle checked={checked} onIonChange={e => setChecked(e.detail.checked)} />
        </IonItem>
        <IonItemDivider>Disabled Toggle</IonItemDivider>
        <IonItem><IonToggle disabled /></IonItem>
        <IonItemDivider>Checked Toggle</IonItemDivider>
        <IonItem><IonToggle checked /></IonItem>
        <IonItemDivider>Toggle Colors</IonItemDivider>
        <IonItem><IonToggle color="primary" /></IonItem>
        <IonItem><IonToggle color="secondary" /></IonItem>
        <IonItem><IonToggle color="danger" /></IonItem>
        <IonItem><IonToggle color="light" /></IonItem>
        <IonItem><IonToggle color="dark" /></IonItem>
        <IonItemDivider>Toggles in a List</IonItemDivider>
        <IonItem>
          <IonLabel>Pepperoni</IonLabel>
          <IonToggle value="pepperoni" />
        </IonItem>
        <IonItem>
          <IonLabel>Sausage</IonLabel>
          <IonToggle value="sausage" disabled={true} />
        </IonItem>
        <IonItem>
          <IonLabel>Mushrooms</IonLabel>
          <IonToggle value="mushrooms" />
        </IonItem>
      </IonList>
    </IonContent>
  );
};

export default Tab1;

We add the Ionitem and add the IonToggle inside.

The IonItemDivider adds the headings for each section.

The color has the color of the toggle.

Conclusion

We can add toggles, toasts, and tabs with Ionic React.