leocp / announcekit-react-native

AnnounceKit Widget React Native Wrapper

AnnounceKit react-native sdk

AnnounceKit Widget React Native Wrapper

Example

Live: https://snack.expo.dev/@amiralin/announcekit-widget

Code Sample

function App() {
  return (
    <SafeAreaView style={styles.container}>
      <AnnounceKitProvider widget="https://announcekit.co/widgets/v2/4c6CdO">
        <WidgetButton/>
      </AnnounceKitProvider>
    </SafeAreaView>
  );
}

function WidgetButton() {
  const unread = useUnreadCount();
  const [openWidget] = useWidget();

  if (typeof unread === 'undefined') return null;

  return (
    <Button title={`${unread} unread posts`} onPress={(e) => openWidget()}></Button>
  );
}

##Installation

npm install announcekit-react-native 

Also install react-native-webview because it's a dependency for this package

npm install add react-native-webview

Note: if you are on iOS, you will need this extra step: Install the native dependencies with Cocoapods

cd ios && pod install

Documentation

Props and Methods

//props:
export interface AnnounceKitProps {
  widget: string;
  lang?: string;
  user?: {
    id: string | number;
    name?: string;
    email?: string;
  };
  data?: {
    [key: string]: any;
  };
  user_token?: string;
  labels?: string[];
  children?: React.ReactNode;
}


//methods
useUnreadCount(): number | undefined
useWidget(): [open(), close()]

FAQ

If you have any questions contact https://announcekit.app or use Issues.