Getting Started with React Native

Learn how to create a notification inbox for your mobile app

Our @magicbell/react-headless package contains components and hooks that will help you create a notification inbox for your React Native app.


To get started, install the NPM package:

npm install @magicbell/react-headless
# Or
yarn add @magicbell/react-headless


Then, wrap your app with the headless MagicBellProvider component. You can initialize it with either the email or ID of the user.

import { MagicBellProvider } from '@magicbell/react-headless';
import { Text, View } from 'react-native';

export default function App() {
  return (
        Step One

Now you can display notifications using the useNotifications hook. In the following example, you can see how to render a list of notifications.

import { useNotifications } from '@magicbell/react-headless';
import React from 'react';
import { FlatList } from 'react-native';
import Notification from './Notification';

export default function NotificationInbox() {
  const store = useNotifications();

  if (!store) return null;
  return (}
      renderItem={({ item }) => }

Complete example

We created a complete example written in React Native. Feel free to fork it, and contact us if you have any questions.