Mobile Development with Ionic and React — Search Bar, Segment Display, and Dropdowns

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.