Mobile Development with Ionic and React — Loading Spinner, Radio Buttons, and Range 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.

Loading Spinner

We can add a loading spinner with the IonSpinner component.

For instance, we can write:

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

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonSpinner />
    </IonContent>
  );
};

export default Tab1;

We can set the name property to change the loading spinner type:

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

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonSpinner name="lines-small" />
    </IonContent>
  );
};

export default Tab1;

Radio Button

We can add a group of radio buttons with the IonRadioGroup and the IonRadio components.

For example, we can write:

import React, { useState } from 'react';
import { IonContent, IonItem, IonLabel, IonListHeader, IonRadio, IonRadioGroup } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  const [selected, setSelected] = useState<string>('biff');
  return (
    <IonContent>
      <IonRadioGroup value={selected} onIonChange={e => setSelected(e.detail.value)}>
        <IonListHeader>
          <IonLabel>Name</IonLabel>
        </IonListHeader>
        <IonItem>
          <IonLabel>Biff</IonLabel>
          <IonRadio slot="start" value="biff" />
        </IonItem>
        <IonItem>
          <IonLabel>Griff</IonLabel>
          <IonRadio slot="start" value="griff" />
        </IonItem>
        <IonItem>
          <IonLabel>Cliff</IonLabel>
          <IonRadio slot="start" value="cliff" />
        </IonItem>
      </IonRadioGroup>
    </IonContent>
  );
};

export default Tab1;

to add a group of radio buttons.

The IonRadioGroup component surrounds the group of radio buttons.

IonRadio lets us add radio buttons.

value has the radio button values.

onIonChange prop has a function that gets the selected radio button and calls setSelected to set the selected radio button.

Range Input

We can add a range input with the IonRange component.

For instance, we can write:

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

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonList>
        <IonItem>
          <IonRange min={-200} max={200} color="secondary">
            <IonLabel slot="start">-200</IonLabel>
            <IonLabel slot="end">200</IonLabel>
          </IonRange>
        </IonItem>
      </IonList>
    </IonContent>
  );
};

export default Tab1;

to add the IonRange component to add the range input.

We can replace the labels with icons by using the IonIcon component:

import React from 'react';
import { IonContent, IonIcon, IonItem, IonList, IonRange } from '@ionic/react';
import './Tab1.css';
import { sunny } from 'ionicons/icons';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonList>
        <IonItem>
          <IonRange min={-200} max={200} color="secondary">
            <IonIcon size="small" slot="start" icon={sunny} />
            <IonIcon slot="end" icon={sunny} />
          </IonRange>
        </IonItem>
      </IonList>
    </IonContent>
  );
};

export default Tab1;

We can add the snaps and steps props to snap to values.

For example, we can write:

import React from 'react';
import { IonContent, IonIcon, IonItem, IonList, IonRange } from '@ionic/react';
import './Tab1.css';
import { sunny } from 'ionicons/icons';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonList>
        <IonItem>
          <IonRange min={-200} max={200} step={20} snaps color="secondary">
            <IonIcon size="small" slot="start" icon={sunny} />
            <IonIcon slot="end" icon={sunny} />
          </IonRange>
        </IonItem>
      </IonList>
    </IonContent>
  );
};

export default Tab1;

Conclusion

We can add a loading spinner, radio buttons, and a range input with Ionic React.