Mobile Development with Ionic and React — Chips, Datetime Picker, and Content

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.

Chips

We can add chips to display small pieces of data in our app.

We can use the IonChip component to do this.

For instance, we can write:

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

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

export default Tab1;

to add a chip without any styles.

We can add a background color with the color prop:

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

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonChip color="secondary">
        <IonLabel >Default</IonLabel>
      </IonChip>
    </IonContent>
  );
};

export default Tab1;

Also, we can add an icon besides the label by writing:

import React from 'react';
import { IonChip, IonContent, IonIcon, IonLabel } from '@ionic/react';
import './Tab1.css';
import { pin } from 'ionicons/icons';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonChip>
        <IonIcon icon={pin} />
        <IonLabel>Default</IonLabel>
      </IonChip>
    </IonContent>
  );
};

export default Tab1;

Content

We add our app’s content in an IonContent component.

For example, we can write:

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

const Tab1: React.FC = () => {
  return (
    <IonContent
      scrollEvents={true}
      onIonScrollStart={() => { }}
      onIonScroll={() => { }}
      onIonScrollEnd={() => { }}>
      <h1>Main Content</h1>
    </IonContent>
  );
};

export default Tab1;

to add some text into our IonContent container.

We can listen to scroll events on it by setting the scrollEvents to true .

The onIonScrollStart prop function is run when we start scrolling.

The onIonScroll prop’s function is run when we scroll.

The onIonScrollEnd prop’s function is run when we’re done scrolling.

Datetime Picker

We can set the date and time in our app with the IonDatetime component.

For example, we can write:

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

const Tab1: React.FC = () => {
  const [selectedDate, setSelectedDate] = useState<string>('2012-12-15T13:47:20.789');

  return (
    <IonContent>
      <IonDatetime
        displayFormat="MM-DD-YYYY"
        value={selectedDate}
        onIonChange={e => setSelectedDate(e.detail.value!)}
      >
      </IonDatetime>
    </IonContent>
  );
};

export default Tab1;

We display the selectedDate ‘s formatted value with the IonDatetime component.

The displayFormat prop changes the display format.

value sets the datetime value to display.

onIonChange sets the date and time after we picked them when the date and time picker.

Also, we can set some datetime picker options by writing:

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

const Tab1: React.FC = () => {
  const [selectedDate, setSelectedDate] = useState<string>('2012-12-15T13:47:20.789');

  return (
    <IonContent>
      <IonDatetime pickerOptions={{
        buttons: [
          {
            text: 'Save',
            handler: () => console.log('Clicked Save!')
          }, {
            text: 'Log',
            handler: () => {
              console.log('Clicked Log. Do not Dismiss.');
              return false;
            }
          }
        ]
      }}
        placeholder="Custom Options" displayFormat="YYYY"
        min="1981"
        max="2018"
        value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}>
      </IonDatetime>
    </IonContent>
  );
};

export default Tab1;

We add the pickerOptions prop and set it to an object with the buttons property.

It has an array of options for each button.

The handler property has the function that’s called when we click the button.

Returning false in the handler stops the datetime picker from being dismissed.

Conclusion

We can add chips, content, and a datetime picker with Ionic React.