How to create an Invite friends screen

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.

An Invite Friends Screen is a powerful tool for user growth, allowing existing users to invite their friends to join an app or platform. It includes options to share referral links, send invites via email or messaging apps, and track referral rewards. A well-crafted Invite Friends Screen encourages user engagement, increases app visibility, and drives new user acquisition, making it a valuable growth strategy for modern apps.

This guide will walk you through designing and implementing an Invite Friends Screen using the Ionic Design Kit. By leveraging its pre-built elements and the Ionic Framework, you can create an engaging, user-friendly interface that encourages seamless sharing and boosts app adoption.

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 invite blank --type=react

3. Get inside the project directory

cd invite

4. Create an Invite page

Create page Invite.tsx inside src/pages and add code.

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

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

export default Invite;

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. Select the layout structure

For convenience, we will be using the layout structure recommended by Ionic for all screens. This allows us to add header code and content inside the IonPage.

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

6. Place the Back button component

Inside the IonToolbar component, add an IonButtons component with the slot set to start, positioning the button at the beginning of the toolbar. Also, add className='ion-padding-start' to provide padding at the start.

Within the IonButtons component, include an IonBackButton component with the properties defaultHref='#' and text=''. This creates a back button that navigates back in the app's history when clicked. To customize the default icon, set the icon property to {arrowBack} and color to tertiary. Ensure that {arrowBack} has been imported correctly from Ionic icons.

import { arrowBack } from "ionicons/icons";
...
<IonHeader>
    <IonToolbar>
        <IonButtons slot='start' className='ion-padding-start'>
            <IonBackButton defaultHref='#' text='' icon={arrowBack} color='tertiary' />
        </IonButtons>
    </IonToolbar>
</IonHeader>

7. Put the title on top of the page

Place the IonTitle with the text 'Invite friends' to add a title for this page.

<IonHeader>
    <IonToolbar>
        <IonButtons slot='start' className='ion-padding-start'>
            <IonBackButton defaultHref='#' text='' icon={arrowBack} color='tertiary' />
        </IonButtons>
        <IonTitle>Invite friends</IonTitle>
    </IonToolbar>
</IonHeader>

This concludes our work with IonHeader, and the following sections will cover working with IonContent.

8. Add an image card for referral promotion

To create a simple card component in Ionic that displays an image, use the IonCard element as a container and include an IonImg tag inside it for the image. The src attribute specifies the image source, and the alt attribute provides alternative text for accessibility. Wrap everything inside an IonContent component to ensure proper layout and scrolling.

<IonContent>
    <IonCard>
        <IonImg src='card-1.jpg' alt='image' />
    </IonCard>
</IonContent>

9. Display promotional text and offer details

To display text content in Ionic, use the IonText component. You can include HTML elements like <h1> for headings or plain text directly inside the IonText tags. Apply classes like ion-padding-start to add consistent styling and spacing. For additional line breaks, use the <br /> tag.

<IonContent>
    ...
    <IonText>
        <h1 className='ion-padding-start'>
            Get up to $250 off.
        </h1>
    </IonText>
    <IonText className='ion-padding-start'>
        Get $25 for every friend you invite.
    </IonText>
    <br />
</IonContent>

To create a styled button in Ionic, use the IonButton component. The expand="block" attribute makes the button span the full width of its container, while the color="tertiary" attribute applies a predefined theme color. Use the className attribute, like ion-padding-horizontal, to add custom spacing or other styles. Add text inside the button to define its label.

<IonContent>
    ...
    <IonButton expand='block' color='tertiary' className='ion-padding-horizontal'>
        Share link
    </IonButton>
</IonContent>

11. Display a disclaimer or terms notice

To display a small note or disclaimer, use the IonNote component. You can style it with classes like ion-padding-horizontal for horizontal padding. Inside the note, use additional Ionic components like IonText for styling specific parts of the text, such as adding an underline for emphasis or links. This is ideal for displaying supplementary information or legal disclaimers.

<IonContent>
    ...
    <IonNote className='ion-padding-horizontal'>
        By continuing, I agree to the <IonText className='underline'>Referral Terms and Conditions</IonText>.
    </IonNote>
</IonContent>

12. Create a list item with a label and an icon

Use the IonItem component. Set the lines="none" attribute to remove the default underlines. Inside the item, include an IonLabel for the text content and an IonIcon for the icon. Use the slot='end' attribute on the IonIcon to position it on the right side of the item. This structure is perfect for creating interactive or informative elements.

<IonContent>
    ...
    <IonItem lines='none'>
        <IonLabel>Contacts</IonLabel>
        <IonIcon slot='end' icon={searchOutline} />
    </IonItem>
</IonContent>

13. Build a list with an avatar and text

To create a list item with an avatar and accompanying text, use the IonList component as a container and IonItem for individual list elements. Inside the item, use IonAvatar with slot='start' to display an avatar image on the left. Add IonLabel for the main text content, such as a name, and position supplementary text, like rewards, using IonText with slot='end'. The lines="none" attribute on IonList removes separator lines for a cleaner look. This layout is great for creating user profiles or contact lists with additional details.

<IonContent>
    ...
    <IonList lines='none'>
        <IonItem>
            <IonAvatar slot='start'>
                <img src='i-1.png' alt='avatar' />
            </IonAvatar>
            <IonLabel>Daniel</IonLabel>
            <IonText slot='end' className='chip'>Get $25</IonText>
        </IonItem>
    </IonList>
</IonContent>

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!