Mobile Development with Ionic and React — Toolbars, Text, Headers, and Footers

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.

Toolbars

We can add toolbars with the IonToolbar component.

For example, we can write:

import React from 'react';
import { IonContent, IonTitle, IonToolbar } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonToolbar>
        <IonTitle>Title Only</IonTitle>
      </IonToolbar>
    </IonContent>
  );
};

export default Tab1;

We add the IonTitle into the IonToolbar to add the title into the toolbar.

Also, we can add buttons:

import React from 'react';
import { IonBackButton, IonButtons, IonContent, IonTitle, IonToolbar } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonToolbar>
        <IonButtons slot="start">
          <IonBackButton defaultHref="/" />
        </IonButtons>
        <IonTitle>Back Button</IonTitle>
      </IonToolbar>
    </IonContent>
  );
};

export default Tab1;

The IonButtons component lets us add the buttons.

slot set to start puts the buttons on the left side.

IonBackButton adds a back button.

Also, we can add icons to the buttons:

import React from 'react';
import { IonButton, IonButtons, IonContent, IonIcon, IonTitle, IonToolbar } from '@ionic/react';
import './Tab1.css';
import { helpCircle } from 'ionicons/icons';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonToolbar>
        <IonTitle>Solid Buttons</IonTitle>
        <IonButtons slot="primary">
          <IonButton fill="solid" color="secondary">
            Help
          <IonIcon slot="end" icon={helpCircle} />
          </IonButton>
        </IonButtons>
      </IonToolbar>
    </IonContent>
  );
};

export default Tab1;

Headers

We can ad the IonHeader to add the header.

For example, we can write:

import React from 'react';
import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonBackButton defaultHref="/" />
          </IonButtons>
          <IonTitle>My Navigation Bar</IonTitle>
        </IonToolbar>
        <IonToolbar>
          <IonTitle>Subheader</IonTitle>
        </IonToolbar>
      </IonHeader>
    </IonContent>
  );
};

export default Tab1;

to add 2 toolbars into one IonHeader .

Footer

We can add a footer with the IonFooter component.

For example, we can write:

import React from 'react';
import { IonBackButton, IonButtons, IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonContent>
      </IonContent>
      <IonFooter>
        <IonToolbar>
          <IonButtons slot="start">
            <IonBackButton defaultHref="/" />
          </IonButtons>
          <IonTitle>My Navigation Bar</IonTitle>
        </IonToolbar>
        <IonToolbar>
          <IonTitle>Subheader</IonTitle>
        </IonToolbar>
      </IonFooter>
    </IonContent>
  );
};

export default Tab1;

to show a footer below the IonContent .

Text

We can add text content into our app with the IonText component.

For instance, we can write:

import React from 'react';
import { IonContent, IonText } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonText>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pulvinar fringilla urna,
      </IonText>
    </IonContent>
  );
};

export default Tab1;

We can also change the color with the color prop:

import React from 'react';
import { IonContent, IonText } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonText color="primary">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pulvinar fringilla urna,
      </IonText>
    </IonContent>
  );
};

export default Tab1;

Conclusion

We can add toolbars, text, header and footer with Ionic React.