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

# Quickstart

> Add Novu-powered in-app notifications to your React Native app with the Novu React Native SDK and a fully working example project.

You can build your own Inbox UI with Novu's React Native hooks SDK. Novu will take care of data fetching will help you build a fully custom notification-center UI.

<Note>
  Novu provides hooks to build a custom Inbox UI for react-native applications. Pre built `Inbox` component for react-native is currently not available. View our [React Native Expo Template](https://github.com/novuhq/novu-expo) for a live example on how to use hooks exposed by `@novu/react-native` SDK to build your own Inbox UI.
</Note>

<Steps>
  <Step title="Install the React Native hooks SDK">
    ```bash theme={null}
    npm install @novu/react-native
    ```
  </Step>

  <Step title="Add the Novu provider to your react-native file">
    The `NovuProvider` component is used to provide the Novu context to the inbox hooks. Make sure that the provider is wrapping your Inbox hook usages at the component tree.

    <Tabs>
      <Tab title="US Region">
        ```tsx theme={null}
        import { NovuProvider } from "@novu/react-native";

        function Layout() {
          return (
            <NovuProvider
              subscriber="YOUR_SUBSCRIBER_ID"
              applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
            >
              {/* Your app components where you want to use the hooks */}
            </NovuProvider>
          );
        }
        ```
      </Tab>

      <Tab title="EU Region">
        ```tsx theme={null}
        import { NovuProvider } from "@novu/react-native";

        function Layout() {
          return (
            <NovuProvider
              subscriber="YOUR_SUBSCRIBER_ID"
              applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
              apiUrl="https://eu.api.novu.co"
              socketUrl="wss://eu.socket.novu.co"
            >
              {/* Your app components where you want to use the hooks */}
              <YourCustomInbox />
            </NovuProvider>
          );
        }
        ```
      </Tab>

      <Tab title="HMAC Encryption">
        <Note>
          Read more about [HMAC Encryption](/platform/inbox/prepare-for-production#secure-your-inbox-with-hmac-encryption).
        </Note>

        ```tsx theme={null}

        function App() {
          return (
            <NovuProvider
              subscriber="SUBSCRIBER_ID"
              applicationIdentifier="APPLICATION_IDENTIFIER"
              subscriberHash="SUBSCRIBER_HASH_HMAC_ENCRYPTION"
            >
              {/* Your app components */}
            </NovuProvider>
          );
        }
        ```
      </Tab>
    </Tabs>

    <Note>
      You can find the `applicationIdentifier` in the Novu Dashboard under the [API keys page](https://dashboard.novu.co/api-keys).
      The `subscriberId` is the unique identifier of the user in your application, learn more about subscribers [here](/platform/concepts/subscribers).
    </Note>
  </Step>

  <Step title="Build your own inbox UI">
    ```tsx theme={null}
    import {
      FlatList,
      View,
      Text,
      ActivityIndicator,
      RefreshControl,
    } from "react-native";

    import { useNotifications, Notification } from "@novu/react-native";

    function YourCustomInbox() {
      const { notifications, isLoading, fetchMore, hasMore, refetch } =
        useNotifications();

      const renderItem = ({ item }) => (
        <View>
          <Text>{item.body}</Text>
        </View>
      );

      const renderFooter = () => {
        if (!hasMore) return null;

        return (
          <View>
            <ActivityIndicator size="small" color="#2196F3" />
          </View>
        );
      };

      const renderEmpty = () => (
        <View>
          <Text>No updates available</Text>
        </View>
      );

      if (isLoading) {
        return (
          <View style={styles.loadingContainer}>
            <ActivityIndicator size="large" color="#2196F3" />
          </View>
        );
      }

      return (
        <FlatList
          data={notifications}
          renderItem={renderItem}
          keyExtractor={(item) => item.id}
          contentContainerStyle={styles.listContainer}
          onEndReached={fetchMore}
          onEndReachedThreshold={0.5}
          ListFooterComponent={renderFooter}
          ListEmptyComponent={renderEmpty}
          refreshControl={
            <RefreshControl
              refreshing={isLoading}
              onRefresh={refetch}
              colors={["#2196F3"]}
            />
          }
        />
      );
    }
    ```
  </Step>

  <Step title="Trigger a notification">
    Now that you have the inbox component added to your application, you can trigger an Inbox notification to see it in action.
  </Step>
</Steps>