Mobile Development with Ionic and React — Floating Action Buttons and Text Inputs

Photo by Leo Rivas on Unsplash

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.

Floating Action Button

We can add a floating action button with Ionic React.

For example, we can write:

import React from 'react';
import { IonContent, IonFab, IonFabButton, IonIcon } from '@ionic/react';
import './Tab1.css';
import { add } from 'ionicons/icons';
const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonFab vertical="top" horizontal="end" slot="fixed">
        <IonFabButton>
          <IonIcon icon={add} />
        </IonFabButton>
      </IonFab>
    </IonContent>
  );
};
export default Tab1;

to add it.

IonFab is the floating action button component.

IonFabButton lets us add a button inside the IonFab container.

We can add an IonIcon inside the IonFabButton to show an icon.

We can set the slot to 'fixed' to make its position fixed.