Home / Blog / How to create a Reviews screen

How to create a Reviews screen

24 Jul 2024 · 7 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 Reviews Screen is a dedicated section within an application that showcases feedback and evaluations provided by users. This screen displays user-generated reviews, ratings, and comments related to the app's features, content, or overall user experience. The Reviews Screen serves as a valuable resource for users to make informed decisions based on the experiences shared by others. Overall, the Reviews Screen plays a significant role in promoting transparency and user-driven improvements within an application.

This article offers a comprehensive guide for designers and developers, making it easy for them to seamlessly integrate a user-friendly Reviews 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 reviews-screen blank --type=react

3. Get inside the project directory

cd reviews-screen

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

import { IonPage } from '@ionic/react';

const Reviews: React.FC = () => {
  return <IonPage></IonPage>;
};

export default Reviews;

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 for our screen. This allows us to add header code and content inside the <IonPage></IonPage>.

<IonPage>
  <IonHeader>
    <IonToolbar>...</IonToolbar>
  </IonHeader>
</IonPage>

6. Add the button at the beginning of the toolbar

Inside the IonToolbar component, add the IonButtons component and set the slot to start. This positions the button at the beginning of the toolbar.

<IonHeader>
  <IonToolbar>
    <IonButtons slot='start'></IonButtons>
  </IonToolbar>
</IonHeader>

7. Create a back button

Within the IonButtons component, include the IonBackButton component, setting the properties defaultHref='#' and text='', to create a back button that navigates back in the app's history upon being clicked.

<IonHeader>
  <IonToolbar>
    <IonButtons slot='start'>
      <IonBackButton defaultHref='#' text=''></IonBackButton>
    </IonButtons>
  </IonToolbar>
</IonHeader>

8. Add a title for this page

After the IonButtons component, place the IonTitle with the text 'Comments' to add a title for this page.

<IonHeader>
  <IonToolbar>
    <IonButtons slot='start'>
      <IonBackButton defaultHref='#' text=''></IonBackButton>
    </IonButtons>
    <IonTitle>Comments</IonTitle>
  </IonToolbar>
</IonHeader>

9. Place the button at the end of the toolbar

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

<IonHeader>
  <IonToolbar>
    <IonButtons slot='start'>
      <IonBackButton defaultHref='#' text=''></IonBackButton>
    </IonButtons>
    <IonTitle>Comments</IonTitle>
    <IonButtons slot='end'>
    </IonButtons>
  </IonToolbar>
</IonHeader>

10. Within the IonButtons add the IonButton component

11. Add the Icon component inside the button

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

<IonHeader>
  <IonToolbar>
    <IonButtons slot='start'>
      <IonBackButton defaultHref='#' text=''></IonBackButton>
    </IonButtons>
    <IonTitle>Comments</IonTitle>
    <IonButtons slot='end'>
      <IonButton>
        <IonIcon slot='icon-only' icon={close}></IonIcon>
      </IonButton>
    </IonButtons>
  </IonToolbar>
</IonHeader>

12. Add the Content component

Following the IonHeader component, add the IonContent component with the class ion-padding to style the content inside.

<IonHeader>
  ...
</IonHeader>
<IonContent className='ion-padding'>
</IonContent>

13. Place the card inside the content

Inside the IonContent component, place the IonCard component with the class ion-no-margin.

<IonContent className='ion-padding'>
  <IonCard className='ion-no-margin'></IonCard>
</IonContent>

14. Add the image to the card

Inside the IonCard add the IonImg component with the property src as img. Remember to import the required image before.

<IonContent className='ion-padding'>
  <IonCard className='ion-no-margin'>
    <IonImg src={img}></IonImg>
  </IonCard>
</IonContent>

15. Add the <br /> tag to create a break line

Add the IonSegment component to display a group of related buttons. Set the value property as popular on the segment to match the value of a button to select that button.

<IonContent className='ion-padding'>
  <IonCard className='ion-no-margin'>
    <IonImg src={img}></IonImg>
  </IonCard>
  <br />
  <IonSegment value='popular'>
  </IonSegment>
</IonContent>

17. Add the Segment button within the segment

Inside the IonSegment add the IonSegmentButton component with the property value='popular'. Set the text 'Popular first' inside.

<IonSegment value='popular'>
  <IonSegmentButton value='popular'>Popular first</IonSegmentButton>
</IonSegment>

18. Add another Segment button

Add another IonSegmentButton with the value='new' and the text 'New ones first'.

<IonSegment value='popular'>
  <IonSegmentButton value='popular'>Popular first</IonSegmentButton>
  <IonSegmentButton value='new'>New ones first</IonSegmentButton>
</IonSegment>

19. After the IonSegment, add the <br /> tag to create a break line

20. After the <br /> add the IonList to organize content within

Set the property lines as none.

<IonContent className='ion-padding'>
  <IonCard className='ion-no-margin'>
    <IonImg src={img}></IonImg>
  </IonCard>
  <br />
  <IonSegment value='popular'>
    <IonSegmentButton value='popular'>Popular first</IonSegmentButton>
    <IonSegmentButton value='new'>New ones first</IonSegmentButton>
  </IonSegment>
  <br />
  <IonList lines='none'>
  </IonList>
</IonContent>

21. Place an item within the list

Inside the IonList component, place the IonItem component with the class ion-no-padding to style the item.

<IonList lines='none'>
  <IonItem className='ion-no-padding'>
  </IonItem>
</IonList>

22. 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 lines='none'>
  <IonItem className='ion-no-padding'>
    <IonAvatar slot='start'>
    </IonAvatar>
  </IonItem>
</IonList>

23. Place an image inside the avatar

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 lines='none'>
  <IonItem className='ion-no-padding'>
    <IonAvatar slot='start'>
      <img src="https://ionicframework.com/docs/img/demos/avatar.svg" alt="" />
    </IonAvatar>
  </IonItem>
</IonList>

24. Add the div tag for a block of information

After the IonAvatar add the div tag to add a block of information. Inside the div add the IonLabel component with the text '@genry'.

<IonList lines='none'>
  <IonItem className='ion-no-padding'>
    <IonAvatar slot='start'>
      <img src="https://ionicframework.com/docs/img/demos/avatar.svg" alt="" />
    </IonAvatar>
    <div>
      <IonLabel>@genry</IonLabel>
    </div>
  </IonItem>
</IonList>

25. After the IonLabel add the IonNote with the text '2 weeks ago'

<IonList lines='none'>
  <IonItem className='ion-no-padding'>
    <IonAvatar slot='start'>
      <img src="https://ionicframework.com/docs/img/demos/avatar.svg" alt="" />
    </IonAvatar>
    <div>
      <IonLabel>@genry</IonLabel>
      <IonNote>2 weeks ago</IonNote>
    </div>
  </IonItem>
</IonList>

26. Add the Note component

After the IonItem add the IonNote component with the text 'Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi eleifend faucibus e...'. Use &nbsp; to create a non-breaking space.

<IonList lines='none'>
  <IonItem className='ion-no-padding'>
    ...
  </IonItem>
  <IonNote>
    Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi eleifend faucibus e...&nbsp;
  </IonNote>
</IonList>

27. Add the Text component

After the text, add the IonText component inside IonNote with the property color='primary' and set the text 'Read more' inside.

<IonList lines='none'>
  <IonItem className='ion-no-padding'>
    ...
  </IonItem>
  <IonNote>
    Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi eleifend faucibus e...&nbsp;
    <IonText color='primary'>Read more</IonText>
  </IonNote>
</IonList>

28. Add another Text component

After the IonNote add another IonText component with the property color='primary'. Set the p tag with the style={{ marginTop: '8px' }} inside and place the text '16 answers' within.

<IonList lines='none'>
  <IonNote>
    ...
  </IonNote>
  <IonText color='primary'>
    <p style={{ marginTop: '8px' }}>16 answers</p>
  </IonText>
</IonList>

29. Repeat steps from 21 to 25 to add another IonItem component

Set the text '@victor' inside the IonLabel and '3 weeks ago' inside the IonNote.

30. Repeat step 26 and set the text

Set the following text inside: 'Eget quis mi enim, leo lacinia pharetra, semper. Eget in volutpat mollis at volutpat lectus velit, sed a...'.

31. Repeat step 27

32. Repeat step 28 and set the text '13 answers' inside

33. Repeat steps from 21 to 25 to add another IonItem component

Set the text '@liza' inside the IonLabel and '5 weeks ago' inside the IonNote.

34. Repeat step 26

As you repeat the step 26, set the text 'Dolor enim eu tortor urna sed duis nulla. Aliquam vestibulum, nulla odio nisl vitae. In aliquet pellen...' inside.

35. Repeat step 27

36. Repeat step 28 and set the text '5 answers' inside

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