Skip to main content
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. Pushbase Notification <Inbox/> 
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}
        {/* 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
​
contentContainer
ViewStyle
Item container style.
​
titleStyle
TextStyle
Notification title text.
​
bodyStyle
TextStyle
Notification body text.
​
timeStyle
TextStyle
Time since notification was delivered text.
​
foregroundColor
ColorValue
A valid color string used for the read status indicator on notification items.
​
backgroundColor
ColorValue
A valid color string used as the background for notification items that are unread or unopened.
​
navigationIndicatorColor
ColorValue
A valid color string used for navigation indicator icon.
​
showNavigationIndicator
boolean
A boolean flag to show or hide navigation indicator.
​
emptyListMessage
string
Message shown when the user has no notifications.
​
emptyListStyle
TextStyle
Style for empty list message text view
​
LoadingIndicatorComponent
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.
​
lookbackDays
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
⌘I