Category: React Ionic

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.

Toolbars

We can add toolbars with the IonToolbar component.

For example, we can write:

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

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonToolbar>
        <IonTitle>Title Only</IonTitle>
      </IonToolbar>
    </IonContent>
  );
};

export default Tab1;

We add the IonTitle into the IonToolbar to add the title into the toolbar.

Also, we can add buttons:

import React from 'react';
import { IonBackButton, IonButtons, IonContent, IonTitle, IonToolbar } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonToolbar>
        <IonButtons slot="start">
          <IonBackButton defaultHref="/" />
        </IonButtons>
        <IonTitle>Back Button</IonTitle>
      </IonToolbar>
    </IonContent>
  );
};

export default Tab1;

The IonButtons component lets us add the buttons.

slot set to start puts the buttons on the left side.

IonBackButton adds a back button.

Also, we can add icons to the buttons:

import React from 'react';
import { IonButton, IonButtons, IonContent, IonIcon, IonTitle, IonToolbar } from '@ionic/react';
import './Tab1.css';
import { helpCircle } from 'ionicons/icons';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonToolbar>
        <IonTitle>Solid Buttons</IonTitle>
        <IonButtons slot="primary">
          <IonButton fill="solid" color="secondary">
            Help
          <IonIcon slot="end" icon={helpCircle} />
          </IonButton>
        </IonButtons>
      </IonToolbar>
    </IonContent>
  );
};

export default Tab1;

Headers

We can ad the IonHeader to add the header.

For example, we can write:

import React from 'react';
import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonBackButton defaultHref="/" />
          </IonButtons>
          <IonTitle>My Navigation Bar</IonTitle>
        </IonToolbar>
        <IonToolbar>
          <IonTitle>Subheader</IonTitle>
        </IonToolbar>
      </IonHeader>
    </IonContent>
  );
};

export default Tab1;

to add 2 toolbars into one IonHeader .

Footer

We can add a footer with the IonFooter component.

For example, we can write:

import React from 'react';
import { IonBackButton, IonButtons, IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonContent>
      </IonContent>
      <IonFooter>
        <IonToolbar>
          <IonButtons slot="start">
            <IonBackButton defaultHref="/" />
          </IonButtons>
          <IonTitle>My Navigation Bar</IonTitle>
        </IonToolbar>
        <IonToolbar>
          <IonTitle>Subheader</IonTitle>
        </IonToolbar>
      </IonFooter>
    </IonContent>
  );
};

export default Tab1;

to show a footer below the IonContent .

Text

We can add text content into our app with the IonText component.

For instance, we can write:

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

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonText>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pulvinar fringilla urna,
      </IonText>
    </IonContent>
  );
};

export default Tab1;

We can also change the color with the color prop:

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

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonText color="primary">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pulvinar fringilla urna,
      </IonText>
    </IonContent>
  );
};

export default Tab1;

Conclusion

We can add toolbars, text, header and footer 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.

Tabs

We can add a tab bar with the IonTabBar and IonTabButton components.

For example, we can write:

import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import {
  IonApp,
  IonIcon,
  IonLabel,
  IonRouterOutlet,
  IonTabBar,
  IonTabButton,
  IonTabs
} from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { triangle } from 'ionicons/icons';
import Tab1 from './pages/Tab1';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Route path="/tab1" component={Tab1} exact={true} />
          <Route path="/" render={() => <Redirect to="/tab1" />} exact={true} />
        </IonRouterOutlet>
        <IonTabBar slot="bottom">
          <IonTabButton tab="tab1" href="/tab1">
            <IonIcon icon={triangle} />
            <IonLabel>Tab 1</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonApp>
);

export default App;

We add the components to the app.

And we can use the IonRouterOutlet to show the tab’s content.

The href has the path of the tab route to show.

Toast

We can add the IonToast component to add toasts into our app.

For example, we can write:

import React, { useState } from 'react';
import { IonButton, IonContent, IonToast } from '[@ionic/react](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Fionic%2Freact "Twitter profile for @ionic/react")';
import './Tab1.css';

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

  return (
    <IonContent>
      <IonButton onClick={() => setShowToast(true)} expand="block">Show Toast</IonButton>
      <IonToast
        isOpen={showToast}
        onDidDismiss={() => setShowToast(false)}
        message="Your settings have been saved."
        duration={200}
      />
    </IonContent>
  );
};

export default Tab1;

We add the IonToast component to add the toast.

The isOpen prop sets when it’s open with a boolean.

onDidDismiss prop’s function is run when we dismiss the toast.

message has the toast message.

duration has the duration of the toast.

Toggles

We can add toggles into our app by using the IonToggle component.

For example, we can write:

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

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

  return (
    <IonContent>
      <IonList>
        <IonItemDivider>Default Toggle</IonItemDivider>
        <IonItem>
          <IonLabel>Checked: {JSON.stringify(checked)}</IonLabel>
          <IonToggle checked={checked} onIonChange={e => setChecked(e.detail.checked)} />
        </IonItem>
        <IonItemDivider>Disabled Toggle</IonItemDivider>
        <IonItem><IonToggle disabled /></IonItem>
        <IonItemDivider>Checked Toggle</IonItemDivider>
        <IonItem><IonToggle checked /></IonItem>
        <IonItemDivider>Toggle Colors</IonItemDivider>
        <IonItem><IonToggle color="primary" /></IonItem>
        <IonItem><IonToggle color="secondary" /></IonItem>
        <IonItem><IonToggle color="danger" /></IonItem>
        <IonItem><IonToggle color="light" /></IonItem>
        <IonItem><IonToggle color="dark" /></IonItem>
        <IonItemDivider>Toggles in a List</IonItemDivider>
        <IonItem>
          <IonLabel>Pepperoni</IonLabel>
          <IonToggle value="pepperoni" />
        </IonItem>
        <IonItem>
          <IonLabel>Sausage</IonLabel>
          <IonToggle value="sausage" disabled={true} />
        </IonItem>
        <IonItem>
          <IonLabel>Mushrooms</IonLabel>
          <IonToggle value="mushrooms" />
        </IonItem>
      </IonList>
    </IonContent>
  );
};

export default Tab1;

We add the Ionitem and add the IonToggle inside.

The IonItemDivider adds the headings for each section.

The color has the color of the toggle.

Conclusion

We can add toggles, toasts, and tabs 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.

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.