> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pushbase.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# <Inbox/>

> The Notification Inbox component for your app.

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.

<img src="https://mintcdn.com/pushbase/nkMYcoi9amrb3572/images/notification-inbox.png?fit=max&auto=format&n=nkMYcoi9amrb3572&q=85&s=fb5a0d4a24bac70184f113f978895d2c" alt="Pushbase Notification <Inbox/>" title="The Notification Inbox for your app" data-og-width="2187" width="2187" data-og-height="1401" height="1401" data-path="images/notification-inbox.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/pushbase/nkMYcoi9amrb3572/images/notification-inbox.png?w=280&fit=max&auto=format&n=nkMYcoi9amrb3572&q=85&s=728e9e50dbad7a154769fbaf1cfd0caf 280w, https://mintcdn.com/pushbase/nkMYcoi9amrb3572/images/notification-inbox.png?w=560&fit=max&auto=format&n=nkMYcoi9amrb3572&q=85&s=2fcc0aec5ca0db2e4a82f8d85fd0f477 560w, https://mintcdn.com/pushbase/nkMYcoi9amrb3572/images/notification-inbox.png?w=840&fit=max&auto=format&n=nkMYcoi9amrb3572&q=85&s=2d21e2484d98a90f376e5d5af8f9c222 840w, https://mintcdn.com/pushbase/nkMYcoi9amrb3572/images/notification-inbox.png?w=1100&fit=max&auto=format&n=nkMYcoi9amrb3572&q=85&s=72ac6ff8265b5627601b65f3608d32f4 1100w, https://mintcdn.com/pushbase/nkMYcoi9amrb3572/images/notification-inbox.png?w=1650&fit=max&auto=format&n=nkMYcoi9amrb3572&q=85&s=e0dbeaa04b9b716aeec2cbc984e95f75 1650w, https://mintcdn.com/pushbase/nkMYcoi9amrb3572/images/notification-inbox.png?w=2500&fit=max&auto=format&n=nkMYcoi9amrb3572&q=85&s=6e0dee39e9a8b8559b18c6a8d45da79c 2500w" />

```js theme={null}
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**

<ResponseField name="contentContainer" type="ViewStyle">
  Item container style.
</ResponseField>

<ResponseField name="titleStyle" type="TextStyle">
  Notification title text.
</ResponseField>

<ResponseField name="bodyStyle" type="TextStyle">
  Notification body text.
</ResponseField>

<ResponseField name="timeStyle" type="TextStyle">
  Time since notification was delivered text.
</ResponseField>

<ResponseField name="foregroundColor" type="ColorValue">
  A valid color string used for the read status indicator on notification items.
</ResponseField>

<ResponseField name="backgroundColor" type="ColorValue">
  A valid color string used as the background for notification items that are
  unread or unopened.
</ResponseField>

<ResponseField name="navigationIndicatorColor" type="ColorValue">
  A valid color string used for navigation indicator icon.
</ResponseField>

<ResponseField name="showNavigationIndicator" type="boolean">
  A boolean flag to show or hide navigation indicator.
</ResponseField>

<ResponseField name="emptyListMessage" type="string">
  Message shown when the user has no notifications.
</ResponseField>

<ResponseField name="emptyListStyle" type="TextStyle">
  Style for empty list message text view
</ResponseField>

<ResponseField name="LoadingIndicatorComponent" type="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.
</ResponseField>

<ResponseField name="lookbackDays" type="number">
  Specifies the number of days from today to filter and match notifications
  delivered within that period. Defaults to 7 days.
</ResponseField>

<Tip>
  Having trouble setting up or configuring the SDK? Our support team is here to
  help — [feel free to reach
  out](mailto:hello@pushbase.dev?subject=Pushbase%20Product%20Support)
</Tip>
