@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