Skip to content

Instantly share code, notes, and snippets.

@enappd
Last active Aug 14, 2021
Embed
What would you like to do?
Ionic React Capacitor Push Example - Layout
import React, { useEffect, useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton, IonFooter, IonList, IonCard, IonCardContent, IonItem, IonLabel, IonListHeader, IonText, IonButtons, IonMenuButton } from '@ionic/react';
export default function PushNotificationsContainer() {
const nullEntry: any[] = []
const [notifications, setnotifications] = useState(nullEntry);
return (
<IonPage id='main'>
<IonHeader>
<IonToolbar color="primary">
<IonTitle slot="start"> Push Notifications</IonTitle>
</IonToolbar>
<IonToolbar color="light">
<IonTitle slot="start">By Enappd Team</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent className="ion-padding">
<div>
<IonList>
<IonCard>
<IonCardContent>
1. Register for Push by clicking the footer button.<br></br>
2. Once registered, you can send push from the Firebase console. <br></br>
<a href="https://enappd.gitbook.io/ionic-5-react-capacitor-full-app/features/push-notifications" target="_blank">Check documentation</a><br></br>
3. Once your app receives notifications, you'll see the data here in the list
</IonCardContent>
</IonCard>
</IonList>
</div>
<IonListHeader mode="ios" lines="full">
<IonLabel>Notifications</IonLabel>
</IonListHeader>
{notifications.length !== 0 &&
<IonList>
{notifications.map((notif: any) =>
<IonItem key={notif.id}>
<IonLabel>
<IonText>
<h3 className="notif-title">{notif.title}</h3>
</IonText>
<p>{notif.body}</p>
</IonLabel>
</IonItem>
)}
</IonList>}
</IonContent>
<IonFooter>
<IonToolbar>
<IonButton color="success" expand="full" >Register for Push</IonButton>
</IonToolbar>
</IonFooter>
</IonPage >
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment