MagicBell

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.

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 (
    <MagicBellProvider apiKey="MAGICBELL_API_KEY" userExternalId="u001">
      <View>
        <Text>Step One</Text>
      </View>
    </MagicBellProvider>
  );
}

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 (
    <FlatList
      data={store.items}
      keyExtractor={(notification) => notification.id}
      renderItem={({ item }) => <Notification notification={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.