Getting Started with React Native

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

Installation

To get started, install the NPM package:

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

Usage

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

React
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.

React
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 (
     notification.id}
      renderItem={({ item }) => }
    />
  );
}

Troubleshooting

The SDK makes internal use of URL paramameter parsing via the URL API. Depending on your apps setup you might need to add a polyfill like react-native-url-polyfill.

npm install react-native-url-polyfill
# Or
yarn add react-native-url-polyfill

Also make sure to load the polyfill, early on in your applications lifecycle (i.e. the root index.tsx or App.tsx).

React
import 'react-native-url-polyfill/auto';

Complete example

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