Pushbase - Push Notification for Expo and React Native

Push notifications are a powerful way to engage your audience. However, in some cases, delivery may fail due to device settings, network issues, or battery optimization. The Pushbase SDK includes an <Inbox/> component that displays a list of past notifications sent to the user’s device. This component is fully customizable to match your app’s branding and design, and supports deep linking to direct users to specific screens when a notification item is tapped.

import { View, Text, ActivityIndicator } from "react-native";
import { Inbox } from "@pushbase/sdk";

export default function NotificationsScreen() {
  return (
    <View>
      <Text> Recent Notifications</Text>
      {/* Add Inbox component*/}
      <Inbox
        contentContainer={{ borderWidth: 0.5, borderColor: "#6366F1" }}
        foregroundColor="#6366F1"
        backgroundColor="#EFF0FE"
        navigationIndicatorColor="#000000"
        showNavigationIndicator
        titleStyle={{ fontSize: 16, fontWeight: "600" }}
        bodyStyle={{ fontSize: 16, fontWeight: "400" }}
        timeStyle={{ fontSize: 12, fontWeight: "400" }}
        emptyListMessage="You’re all caught up! No notifications for now. Check back later."
        lookbackDays={7}
        tier="free" // free, pro, or enterprise
        {/* LoadingIndicatorComponent={<ActivityIndicator />} */}
      />
    </View>
  );
}

Customizing `<Inbox/>` component

The <Inbox> component provides multiple props to help you customize its appearance and behavior to fit your app’s design system. Props

ViewStyle

Item container style.

TextStyle

Notification title text.

TextStyle

Notification body text.

TextStyle

Time since notification was delivered text.

ColorValue

A valid color string used for the read status indicator on notification items.

ColorValue

A valid color string used as the background for notification items that are unread or unopened.

A valid color string used for navigation indicator icon.

A boolean flag to show or hide navigation indicator.

string

Message shown when the user has no notifications.

TextStyle

Style for empty list message text view

React.JSX.Element

A valid React element to render for custom content loading indicator or skeleton. Component use React Native built-in <ActivityIndicator /> component by default.

number

Specifies the number of days from today to filter and match notifications delivered within that period. Defaults to 7 days.

Having trouble setting up or configuring the SDK? Our support team is here to help — feel free to reach out

​Customizing <Inbox/> component

Customizing `<Inbox/>` component