Author: John Au-Yeung

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.

Search Bar

We can add a search bar with the IonSearchbar component.

For example, we can write:

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

const Tab1: React.FC = () => {
  const [searchText, setSearchText] = useState('');

  return (
    <IonContent>
      <IonSearchbar value={searchText} onIonChange={e => setSearchText(e.detail.value!)}></IonSearchbar>
    </IonContent>
  );
};

export default Tab1;

We add the IonSearchbar component to add the search bar.

onIonChange has the function to get the inputted value and we can use it to set a state’s value.

e.detail.value has the inputted value.

searchText has has the inputted value after we call setSearchText in the onIonChange callback.

value is set to the input value.

Also, we can show a cancel button to clear the search text:

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

const Tab1: React.FC = () => {
  const [searchText, setSearchText] = useState('');

  return (
    <IonContent>
      <IonSearchbar
        showCancelButton="focus"
        cancelButtonText="Custom Cancel"
        value={searchText}
        onIonChange={e => setSearchText(e.detail.value!)}
      >
      </IonSearchbar>
    </IonContent>
  );
};

export default Tab1;

Segment

We can add a segment display with the IonSegment component.

For example, we can write:

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

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonSegment onIonChange={e => console.log('Segment selected', e.detail.value)}>
        <IonSegmentButton value="friends">
          <IonLabel>Friends</IonLabel>
        </IonSegmentButton>
        <IonSegmentButton value="enemies">
          <IonLabel>Enemies</IonLabel>
        </IonSegmentButton>
      </IonSegment>
    </IonContent>
  );
};

export default Tab1;

We can add the IonSegment to add the segment.

The IonSegmentButton component adds a button into the segment display.

Then the buttons will be sized automatically to fit the segment display.

Select Dropdown

We can add a select dropdown into our app with the IonSelect component.

For example, we can write:

import React, { useState } from 'react';
import { IonContent, IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  const [hairColor, setHairColor] = useState<string>('brown');

  return (
    <IonContent>
      <IonItem>
        <IonLabel>Hair Color</IonLabel>
        <IonSelect value={hairColor} okText="Okay" cancelText="Dismiss" onIonChange={e => setHairColor(e.detail.value)}>
          <IonSelectOption value="brown">Brown</IonSelectOption>
          <IonSelectOption value="blonde">Blonde</IonSelectOption>
          <IonSelectOption value="black">Black</IonSelectOption>
          <IonSelectOption value="red">Red</IonSelectOption>
        </IonSelect>
      </IonItem>
    </IonContent>
  );
};

export default Tab1;

to add a dropdown to let us select the hair color.

We put it in the IonItem component so that we get the label on the left side and the dropdown on the right side.

The IonSelect component has the value to get the value.

okText has the text to display for the OK button.

cancelText has the text to display for the cancel button.

IonSelectOption has the select options.

onIonChange ‘s callback is run when we select a dropdown item.

e.detail.value has the selected value of the dropdown.

Conclusion

We can add a search bar, segment display, and select dropdown with Ionic React.

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.

Pull to Refresh

We can add the IonRefresher component to add pull to refresh functionality on a content component.

For example, we can write:

import React from 'react';
import { IonContent, IonRefresher, IonRefresherContent } from '@ionic/react';
import './Tab1.css';
import { RefresherEventDetail } from '@ionic/core';
import { chevronDownCircleOutline } from 'ionicons/icons';

function doRefresh(event: CustomEvent<RefresherEventDetail>) {
  console.log('begin');

  setTimeout(() => {
    console.log('end');
    event.detail.complete();
  }, 2000);
}

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonRefresher slot="fixed" onIonRefresh={doRefresh}>
        <IonRefresherContent
          pullingIcon={chevronDownCircleOutline}
          pullingText="Pull to refresh"
          refreshingSpinner="circles"
          refreshingText="Refreshing...">
        </IonRefresherContent>
      </IonRefresher>
    </IonContent>
  );
};

export default Tab1;

We add the IonRefresher component with the refresher component.

The IonRefreshContent component lets us add the content for the refresh loading indicator.

pullingText has the text that’s displayed when we pull to refresh.

refreshingSpinner lets sets the name of the spinner to show.

refreshingText shows the text when the loading indicator is showing.

The onIonRefresh prop takes a function that controls when the loading indicator is shown.

The event.detail.complete method lets us stop displaying the refresh indicator.

Reorderable List

We can add a reorderable list with the IonReorderGroup component.

For example, we can write:

import React from 'react';
import { IonContent, IonItem, IonLabel, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup } from '[@ionic/react](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Fionic%2Freact "Twitter profile for @ionic/react")';
import './Tab1.css';
import { RefresherEventDetail } from '[@ionic/core](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Fionic%2Fcore "Twitter profile for @ionic/core")';
import { chevronDownCircleOutline } from 'ionicons/icons';

function doRefresh(event: CustomEvent<RefresherEventDetail>) {
  console.log('begin');

setTimeout(() => {
    console.log('end');
    event.detail.complete();
  }, 2000);
}

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonReorderGroup disabled={false}>
        <IonItem>
          <IonLabel>Item 1</IonLabel>
          <IonReorder slot="end" />
        </IonItem>
        <IonItem>
          <IonLabel>Item 2</IonLabel>
          <IonReorder slot="end" />
        </IonItem>
        <IonItem>
          <IonReorder slot="start" />
          <IonLabel>Item 3</IonLabel>
        </IonItem>
      </IonReorderGroup>
    </IonContent>
  );
};

export default Tab1;

We add IonItem s into the IonReorderGroup to add the reorderable items.

The IonReorder component lets us reorder the item when it’s wrapped around the item.

Also, we can wrap IonReorder around the IonItem .

We can drag the handles to reorder the items.

For instance, we can write:

import React from 'react';
import { IonContent, IonItem, IonLabel, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup } from '@ionic/react';
import './Tab1.css';
import { RefresherEventDetail } from '@ionic/core';
import { chevronDownCircleOutline } from 'ionicons/icons';

function doRefresh(event: CustomEvent<RefresherEventDetail>) {
  console.log('begin');

setTimeout(() => {
    console.log('end');
    event.detail.complete();
  }, 2000);
}

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonReorderGroup disabled={false}>
        <IonReorder>
          <IonItem>
            <IonLabel>Item 1</IonLabel>
          </IonItem>
        </IonReorder>
        <IonReorder>
          <IonItem>
            <IonLabel>Item 2</IonLabel>
          </IonItem>
        </IonReorder>
      </IonReorderGroup>
    </IonContent>
  );
};

export default Tab1;

to do that. And now we can drag anywhere in the item to reorder the items.

Conclusion

We can add reorderable items and pull to refresh with Ionic React.

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.

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.

Popovers

We can add popovers with the IonPopover component.

For example, we can write:

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

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

  return (
    <IonContent>
      <IonPopover
        isOpen={showPopover}
        cssClass='my-custom-class'
        onDidDismiss={e => setShowPopover(false)}
      >
        <IonContent>
          <p>This is popover content</p>
        </IonContent>
      </IonPopover>
      <IonButton onClick={() => setShowPopover(true)}>Show Popover</IonButton>
    </IonContent>
  );
};

export default Tab1;

We add an IonButton to add the Show Popover button.

Then we add the IonPopover component to add the popover.

The isOpen prop controls whether it’s opened or not.

cssClass sets the class for the component.

onDidDismiss is called when we dismiss the popover.

The showPopover state controls the popover.

Loading Indicator

We can add a loading indicator with the IonLoading component.

For example, we can write:

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

const Tab1: React.FC = () => {
  const [showLoading, setShowLoading] = useState(true);

  setTimeout(() => {
    setShowLoading(false);
  }, 2000);

  return (
    <IonContent>
      <IonButton onClick={() => setShowLoading(true)}>Show Loading</IonButton>
      <IonLoading
        cssClass='my-custom-class'
        isOpen={showLoading}
        onDidDismiss={() => setShowLoading(false)}
        message='Please wait...'
        duration={5000}
      />
    </IonContent>
  );
};

export default Tab1;

We add the IonButton to set the showLoading state.

Then we pass that into the isOpen prop of the IonLoading component to control when it loads.

The onDidDismiss prop’s function is run when we close the loading indicator.

duration has the duration to show the loading indicator.

Progress Bar

We can add a progress bar by using the IonProgressBar component.

For example, we can write:

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

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonProgressBar color="primary" value={0.5}></IonProgressBar><br />
    </IonContent>
  );
};

export default Tab1;

to add a progress bar with the IonProgressBar component.

The color is set to primary to change the color blue.

value has the progress value.

Also, we can add the buffer prop to add a lighter line to the progress bar:

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

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonProgressBar value={0.25} buffer={0.5}></IonProgressBar><br />
    </IonContent>
  );
};

export default Tab1;

Skeleton Text

We can show skeleton text when we’re loading something in our app.

For instance, we can write:

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

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonList>
        <IonItem>
          <IonSkeletonText animated style={{ width: '27px', height: '27px' }} slot="start" />
          <IonLabel>
            <h3>
              <IonSkeletonText animated style={{ width: '50%' }} />
            </h3>
            <p>
              <IonSkeletonText animated style={{ width: '80%' }} />
            </p>
            <p>
              <IonSkeletonText animated style={{ width: '60%' }} />
            </p>
          </IonLabel>
        </IonItem>
      </IonList>
    </IonContent>
  );
};

export default Tab1;

We add the IonSkeletonText component to add a placeholder bar for the skeleton text.

animated makes it animated.

Conclusion

We can add various loading indicators and popovers with Ionic React.

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.

Avatars

We can add avatars with the IonAvatar component.

For example, we can write:

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

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonAvatar>
        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
      </IonAvatar>
    </IonContent>
  );
};

export default Tab1;

to add an avatar with an image.

Also, we can put the avatar in a chip:

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

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonChip>
        <IonAvatar>
          <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
        </IonAvatar>
        <IonLabel>Chip Avatar</IonLabel>
      </IonChip>
    </IonContent>
  );
};

export default Tab1;

Images

We can add an image with the IonImg component.

For example, we can write:

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

interface Item {
  src: string;
  text: string;
};
const items: Item[] = [{
  src: 'http://placekitten.com/g/200/300',
  text: 'cat'
}];

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonList>
        {items.map((image, i) => (
          <IonItem key={i}>
            <IonThumbnail slot="start">
              <IonImg src={image.src} />
            </IonThumbnail>
            <IonLabel>{image.text}</IonLabel>
          </IonItem>
        ))}
      </IonList>
    </IonContent>
  );
};

export default Tab1;

We add the IonThumbnail component to show the image thumbnail.

Thumbnail

We can also use the IonThumbnail component with an img element.

For example, we can write:

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

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonThumbnail>
        <img src="http://placekitten.com/g/200/300" />
      </IonThumbnail>
    </IonContent>
  );
};

export default Tab1;

to show the img as a thumbnail.

Modal

We can add modals with the IonModal component.

For example, we can write:

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

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

  return (
    <IonContent>
      <IonModal isOpen={showModal} cssClass='my-custom-class'>
        <p>This is modal content</p>
        <IonButton onClick={() => setShowModal(false)}>Close Modal</IonButton>
      </IonModal>
      <IonButton onClick={() => setShowModal(true)}>Show Modal</IonButton>
    </IonContent>
  );
};

export default Tab1;

to add the modal to our app.

isOpen takes the open state of the modal.

cssClass lets us add a class name to make styling easy.

setShowModal sets display state of the modal.

Backdrop

We can add a backdrop with the IonBackdrop component.

For example, we can write:

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

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

export default Tab1;

to add the backdrop.

Also, we can change how the backdrop event is propagated, visibility, and whether it’s tappable with some props:

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

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonBackdrop stopPropagation={false} visible tappable />
    </IonContent>
  );
};

export default Tab1;

Conclusion

We can add avatars, thumbnails, modals, and backdrops with Ionic React.