Mobile Development with Ionic and React — Pull to Refresh and Reorderable List

Photo by Marvin Meyer 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.

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>…