@trycourier/react-native-inbox

@trycourier/react-native-inbox"

a react native library for trycourier integration

Installation

npm install @trycourier/react-native-inbox react-native-linear-gradient

yarn add @trycourier/react-native-inbox react-native-linear-gradient

for ios development, navigate to ios folder in project repository and update pod

pod update

Usage

wrap your parent component using CourierProvider, provide clientKey, userId , brandId as props

import React from 'react';
import { CourierProvider } from '@trycourier/react-native-inbox';

export default function App() {
  return (
    <CourierProvider clientKey={CLIENT_KEY} userId={USER_ID} brandId={BRAND_ID}>
      .....
    </CourierProvider>
  );
}

import and use CourierScreen anywhere in your child component

import { CourierScreen } from '@trycourier/react-native-inbox';

const Demo = () => {
  return (
    <View>
      ...
      <CourierScreen onMessageClick={message => {
          console.log('clicked message data', message);
      }} />
      ...
    </View>
  );
};

the bellIcon

import { BellIcon } from '@trycourier/react-native-inbox';

function BellIconScreen() {
  return (
    <View>
      ...
      <BellIcon showUnreadMessageCount size="md" />
      ...
    </View>
  );
}

CourierProvider props

---

prop	description	default	type
onNewMessage	custom function to execute on getting a new Message	undefined	(message: ICourierMessage) => void

CourierScreen props

---

prop	description	default	type
onMessageClick	custom function to execute on pressing a Message	undefined	(message: MessageType) => void

BellIcon props

---

prop	description	default	type
showUnreadMessageCount	shows number of unread messages as badge	false	boolean
size	sets height and width of the bell icon and badge size	"md"	"md" | "sm" | "lg"
render	renders custom component	undefined	(_numberOfUnreadMessages: number) => JSX.Element

you can find a proper implementation example here.

License

MIT