Home / Blog / How to create a screen with Incoming messages

How to create a screen with Incoming messages

30 May 2024 · 5 min read

Ionic Design Kit, built on a design base of Ionic Framework components, simplifies app development by providing designers with a range of pre-made elements. Designers can effortlessly pick and place elements, eliminating the need to create components from scratch. For developers, this means no complex coding – all components are sourced from the Ionic Framework. The result is a speedy, efficient, and collaborative process, making the Ionic Design Kit essential for both designers and developers.

The Chat screen is a central feature within messaging or communication applications, serving as a hub for users to view and interact with their ongoing conversations. This screen displays a list of chats, showing recent messages, contact names, and profile icons.

This article offers a comprehensive guide for designers and developers, making it easy for them to seamlessly integrate a user-friendly Chat screen into their applications. The smooth integration is achieved by employing design components from the Ionic Kit, built upon the robust foundation of the extensive Ionic framework library.

1. Install Ionic CLI with the command

Creating a project with the Ionic CLI

npm i -g @ionic/cli

2. Create a new project

To create a new project, run the following command.

ionic start chats-screen blank --type=react

3. Get inside the project directory

cd chats-screen

4. Create page Chats.tsx inside src/pages and add code

import { IonPage } from '@ionic/react';
const Chats: React.FC = () => {
  return (
    <IonPage></IonPage>
  );
};
export default Chats;

Please make sure that you've added routing in src/App.tsx for the created page. All Ionic framework components that will be used below should be imported similarly to the IonPage component.

5. Add the header to the page

For convenience, we will be using the layout structure recommended by Ionic (https://ionicframework.com/docs/layout/structure#header) for our screen. This allows us to add header and content inside the <IonPage></IonPage>.

<IonPage>
  <IonHeader>
    ...
  </IonHeader>
  <IonContent>
    ...
  </IonContent>
</IonPage>

6. Add the toolbar

Inside the IonHeader component, add the IonToolbar component to fix title and buttons at the top of the content.

<IonHeader>
  <IonToolbar></IonToolbar>
</IonHeader>

7. Add the title inside the toolbar

Within the IonToolbar component, add the IonTitle component with the text "Messages" inside to set the title for the toolbar.

<IonHeader>
  <IonToolbar>
    <IonTitle>Messages</IonTitle>
  </IonToolbar>
</IonHeader>

8. Add the button at the end of the toolbar

Add another IonButtons component, and set the slot to end. This positions the button at the end of the toolbar.

<IonHeader>
  <IonToolbar>
    <IonTitle>Messages</IonTitle>
    <IonButtons slot='end'></IonButtons>
  </IonToolbar>
</IonHeader>

9. Within the IonButtons add the IonButton component

<IonButtons slot='end'>
  <IonButton></IonButton>
</IonButtons>

10. Place an icon within the button component

Inside the IonButton component, place the IonIcon component with the properties slot='icon-only' and icon={addCircleOutline} to define that this component should be used as an icon in an option that has no text, using the icon from Ionic icons.

<IonButtons slot='end'>
  <IonButton>
    <IonIcon slot='icon-only' icon={addCircleOutline}></IonIcon>
  </IonButton>
</IonButtons>

11. Add another toolbar for the search results

Repeat steps 5 and 6 to add another button in the toolbar of search results. Set the icon={createOutline}.

<IonButtons>
  <IonButton>
    <IonIcon slot='icon-only' icon={addCircleOutline}></IonIcon>
  </IonButton>
  <IonButton>
    <IonIcon slot='icon-only' icon={createOutline}></IonIcon>
  </IonButton>
</IonButtons>

12. Add the Content component

After the IonHeader section, add the IonContent component.

<IonPage>
  <IonHeader>
    <IonToolbar>
      <IonTitle>Messages</IonTitle>
      <IonButtons slot='end'>
        <IonButton>
          <IonIcon slot='icon-only' icon={addCircleOutline}></IonIcon>
        </IonButton>
        <IonButton>
          <IonIcon slot='icon-only' icon={createOutline}></IonIcon>
        </IonButton>
      </IonButtons>
    </IonToolbar>
  </IonHeader>
  <IonContent>
    ...
  </IonContent>
</IonPage>

13. Add the search bar inside the content

Inside the IonContent component, add the IonSearchbar component that can be used to search through a collection.

<IonContent>
  <IonSearchbar></IonSearchbar>
</IonContent>

14. Create a list component

Add the IonList component to organize the chats. Add the class ion-margin-top to style the content inside.

<IonContent>
  <IonSearchbar></IonSearchbar>
  <IonList className='ion-margin-top'></IonList>
</IonContent>

15. Create an item inside the list

Inside the IonList, place the IonItem to display one chat. Add the class ion-margin-bottom to style the content inside.

<IonList className='ion-margin-top'>
  <IonItem className='ion-margin-bottom'></IonItem>
</IonList>

16. Add an avatar inside the item

Inside the IonItem, place the IonAvatar to represent a person's avatar. Set the property slot to start to position the avatar at the beginning of the item.

<IonList className='ion-margin-top'>
  <IonItem className='ion-margin-bottom'>
    <IonAvatar slot='start'></IonAvatar>
  </IonItem>
</IonList>

17. Within the IonAvatar, add the img tag

We used the value https://ionicframework.com/docs/img/demos/avatar.svg for the src attribute according to the Ionic example.

<IonList className='ion-margin-top'>
  <IonItem className='ion-margin-bottom'>
    <IonAvatar slot='start'>
      <img src="https://ionicframework.com/docs/img/demos/avatar.svg" alt="" />
    </IonAvatar>
  </IonItem>
</IonList>

18. Add a label to display the name in the chat

Add the IonLabel component to display the information about the person and the last message in the chat.

<IonList className='ion-margin-top'>
  <IonItem className='ion-margin-bottom'>
    <IonAvatar slot='start'>
      <img src="https://ionicframework.com/docs/img/demos/avatar.svg" alt="" />
    </IonAvatar>
    <IonLabel></IonLabel>
  </IonItem>
</IonList>

19. Place text within the label

Within the IonLabel place the IonText component with the text "Toby Evans" inside to display the information about the person.

<IonList className='ion-margin-top'>
  <IonItem className='ion-margin-bottom'>
    <IonAvatar slot='start'>
      <img src="https://ionicframework.com/docs/img/demos/avatar.svg" alt="" />
    </IonAvatar>
    <IonLabel>
      <IonText>Toby Evans</IonText>
    </IonLabel>
  </IonItem>
</IonList>

20. After the IonText add <br /> tag to add the line break

21. Add the note component to display the message

Place the IonNote component, with the text "Sure!" inside to display the last message. Add the class ion-text-wrap to allow line breaks as necessary to fill line boxes and set the property color as dark to style the color of the text.

<IonList className='ion-margin-top'>
  <IonItem className='ion-margin-bottom'>
    <IonAvatar slot='start'>
      <img src="https://ionicframework.com/docs/img/demos/avatar.svg" alt="" />
    </IonAvatar>
    <IonLabel>
      <IonText>Toby Evans</IonText>
      <br />
      <IonNote color='dark' className="ion-text-wrap">
        Sure!
      </IonNote>
    </IonLabel>
  </IonItem>
</IonList>

22. Repeat steps 11 to 17 to add another chat

Set the text "Scarlet Johnson" inside the IonText, the property color as medium and the text "Have a nice day." inside the IonNote.

23. Repeat steps 11 to 17 to add another chat.

Set the text "Hope Jackson" inside the IonText, the property color as medium and the text "Sure! Let me tell you about what we ..." inside the IonNote.

24. Repeat steps 11 to 17 to add another chat

Set the text "Aldo Smith" inside the IonText, the property color as medium and the text "Great, thanks." inside the IonNote.

25. Repeat steps 11 to 17 to add another chat

Set the text "Hope Jackson" inside the IonText, the property color as dark and the text "Sure! Let me tell you about what we offer" inside the IonNote.

Thank you for joining us on this exciting journey thus far. Stay tuned for more guides in our comprehensive series, where we'll not only delve into various aspects of mobile app development but also showcase how the Ionic Kit can be your game-changer.

Are you prepared to elevate your Ionic experience? Explore the advantages of incorporating the Ionic Design Kit for intuitive designs and seamless development. May your coding journey be marked by continual innovation and triumphant achievements!

Looking for Ionic kit for you platform?
Ionic Sketch
Ionic Figma
Ionic XD
Made in New Zealand 🇳🇿 at  Sliday