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

Photo by Alexander Schimmeck 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.

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…