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

# Inbox Feed

Headless in-app notification feed, re-exported from [`@suprsend/react-core`](https://github.com/suprsend/suprsend-react-core). Render with React Native primitives.

Mount `SuprSendFeedProvider` inside [`SuprSendExpoProvider`](/docs/expo-integration#suprsendexpoprovider):

<CodeGroup>
  ```tsx App.tsx theme={"system"}
  import { SuprSendExpoProvider, SuprSendFeedProvider } from "@suprsend/expo-sdk";

  export default function App() {
    return (
      <SuprSendExpoProvider {...authProps}>
        <SuprSendFeedProvider>
          <RootNavigator />
        </SuprSendFeedProvider>
      </SuprSendExpoProvider>
    );
  }
  ```
</CodeGroup>

<CodeGroup>
  ```tsx Inbox.tsx theme={"system"}
  import { useFeedData, useFeedClient, useFeed } from "@suprsend/expo-sdk";
  import { FlatList, Text, Pressable } from "react-native";

  function Inbox() {
    const feedData = useFeedData();
    const feedClient = useFeedClient();
    const { refresh } = useFeed(); // used to refresh inbox instance like pull to refresh etc

    return (
      <FlatList
        data={feedData?.notifications ?? []}
        keyExtractor={(n) => n.n_id}
        renderItem={({ item }) => (
          <Pressable onPress={() => feedClient?.markAsInteracted(item.n_id)}>
            <Text>{item.message.header}</Text>
          </Pressable>
        )}
      />
    );
  }
  ```
</CodeGroup>

Read more about available context and hooks:

* [SuprSendFeedProvider](/docs/react-sdk-headless-feed#suprsendfeedprovider)
* [useFeedClient](/docs/react-sdk-headless-feed#usefeedclient)
* [useFeedData](/docs/react-sdk-headless-feed#usefeeddata)

See a full example: [InboxScreen.tsx](https://github.com/suprsend/expo-example/blob/main/screens/InboxScreen.tsx).

***