Create Indie Notification Inbox

This guide covers how to use the getIndieNotificationInbox function to get indie push notification data to be used to create your Indie Notification Inbox.

This video walks through the setup guide below:

Indie Notification Inbox Preview

Here's how the Indie Notification Inbox creation process works:

  • Get Indie Notifications Sent: Use the native-notify getIndieNotificationInbox function to get a history of all the indie push notifications you have sent in the past.
  • Use: Use the Indie Notification Inbox data from the getIndieNotificationInbox function to create an Indie Notification Inbox.

Prerequisites

1

Create a free Native Notify account

Create a free NativeNotify.com account to get your Native Notify App ID and App Token.

Setup and Use

1

Import

In your Indie Notification Inbox screen, include these imports:

import React, { useState, useEffect } from 'react-native';
import { getIndieNotificationInbox } from 'native-notify';
2

Check for Hook function

Make sure you are using a Hook function as your Notification Inbox function. Here is an example:

export default function NotificationInbox() {
    ...
}

This link explains Hooks in detail: https://react.dev/reference/react/hooks

3

Create a data Hook

Inside of your Indie Notification Inbox screen, create a useState to store your Indie Notification Inbox data. Here's an example:

const [data, setData] = useState([]);
4

Get notifications

Paste this code into your Notification Inbox function:

const [takeNumber, setTakeNumber] = useState(10);
const [skipNumber, setSkipNumber] = useState(0);

const fetchNotifications = async () => {
    try {
        const notifications = await getIndieNotificationInbox(
            "unique-user-id",
            "app-id-number",
            "app-token-string",
            takeNumber,
            skipNumber
        );
        console.log("notifications: ", notifications);
        setData(notifications);
    } catch (error) {
        console.error("Error fetching notifications: ", error);
    }
};

useEffect(() => {
  fetchNotifications();
}, []);

Notes:

  • Replace "unique-user-id" with the unique user ID you registered with Native Notify.
  • Take count defaults to 10.
  • Skip count defaults to 0.
  • This link explains how 'useEffect' works in detail: https://react.dev/reference/react/useEffect
5
6

Create your Indie Notification Inbox

Create your Indie Notification Inbox using the data received by running your getIndieNotificationInbox function.

Complete example

import React, { useState, useEffect } from 'react';
import { getIndieNotificationInbox } from 'native-notify';

export default function NotificationInbox() {
    const [data, setData] = useState([]);
    const [takeNumber, setTakeNumber] = useState(10);
    const [skipNumber, setSkipNumber] = useState(0);

    const fetchNotifications = async () => {
        try {
            const notifications = await getIndieNotificationInbox(
                "unique-user-id",
                "app-id-number",
                "app-token-string",
                takeNumber,
                skipNumber
            );
            console.log("notifications: ", notifications);
            setData(notifications);
        } catch (error) {
            console.error("Error fetching notifications: ", error);
        }
    };

    useEffect(() => {
      fetchNotifications();
    }, []);

    return (
      ... // create an Indie Notification Inbox using getIndieNotificationInbox data
    )
}