Mobile Development with Ionic and React — Avatars, Modals, Backdrops, and Images

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.