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

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.

vertical sets the vertical position.

horizontal sets the horizontal position.

Grid

We can add a grid layout with Ionic React.

To do this, we can use the IonRow and IonCol components to add rows and columns for the grid:

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

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonGrid>
        <IonRow>
          <IonCol>ion-col</IonCol>
          <IonCol>ion-col</IonCol>
          <IonCol>ion-col</IonCol>
          <IonCol>ion-col</IonCol>
        </IonRow>
        <IonRow>
          <IonCol size="6">ion-col size="6"</IonCol>
          <IonCol>ion-col</IonCol>
          <IonCol>ion-col</IonCol>
        </IonRow>
      </IonGrid>
    </IonContent>
  );
};

export default Tab1;

We add the IonRow and IonCol to add the rows and columns respectively.

IonGrid is the container for the rows and columns.

Input

Ionic React comes with a text input component.

For example, we can add one by writing:

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

const Tab1: React.FC = () => {
  const [text, setText] = useState<string>();

  return (
    <IonContent>
      <IonList>
        <IonItem>
          <IonInput
            value={text}
            placeholder="Enter Input"
            onIonChange={e => setText(e.detail.value!)} clearInput
          >
          </IonInput>
        </IonItem>
      </IonList>
    </IonContent>
  );
};

export default Tab1;

The IonInput component is the text input component.

We pass a callback as the value of the onIonChange prop to set the text state to the value of the input.

The value prop has the inputted value.

Also, we can make the input read-only with the readonly prop.

We can also add a number input by setting the type prop to 'number' :

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

const Tab1: React.FC = () => {
  const [number, setNumber] = useState<number>();

  return (
    <IonContent>
      <IonList>
        <IonItem>
          <IonInput
            type="number"
            value={number}
            placeholder="Enter Number"
            onIonChange={e => setNumber(parseInt(e.detail.value!, 10))}
          ></IonInput>
        </IonItem>
      </IonList>
    </IonContent>
  );
};

export default Tab1;

Text Area

We can add a text area with the IonTextarea component.

For example, we can write:

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

const Tab1: React.FC = () => {
  const [text, setText] = useState<string>();

  return (
    <IonContent>
      <IonList>
        <IonItem>
          <IonTextarea
            value={text}
            onIonChange={e => setText(e.detail.value!)}>
          </IonTextarea>
        </IonItem>
      </IonList>
    </IonContent>
  );
};

export default Tab1;

to add it.

The props are the same as the IonInput component.

We can add a placeholder with the placeholder prop.

And we can disable interaction with the disabled prop.

The text area can also be made read-only with the readonly prop.

Conclusion

We can add a floating action button and text inputs with Ionic React.