Skip to content

Instantly share code, notes, and snippets.

Last active August 14, 2021 19:39
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
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'>
<IonToolbar color="primary">
<IonTitle slot="start"> Push Notifications</IonTitle>
<IonToolbar color="light">
<IonTitle slot="start">By Enappd Team</IonTitle>
<IonContent className="ion-padding">
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="" target="_blank">Check documentation</a><br></br>
3. Once your app receives notifications, you'll see the data here in the list
<IonListHeader mode="ios" lines="full">
{notifications.length !== 0 &&
{ any) =>
<IonItem key={}>
<h3 className="notif-title">{notif.title}</h3>
<IonButton color="success" expand="full" >Register for Push</IonButton>
</IonPage >
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment