https://github.com/papercups-io/chat-widget-native

Papercups chat widget for React Native/Expo
https://github.com/papercups-io/chat-widget-native

chat chat-widget expo react-native

Last synced: 3 months ago
JSON representation

Papercups chat widget for React Native/Expo

• Host: GitHub
• URL: https://github.com/papercups-io/chat-widget-native
• Owner: papercups-io
• Created: 2020-08-17T00:59:19.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2021-12-02T02:31:53.000Z (over 2 years ago)
• Last Synced: 2024-04-14T17:01:03.912Z (3 months ago)
• Topics: chat, chat-widget, expo, react-native
• Language: TypeScript
• Homepage: https://snack.expo.io/@reichertjalex/papercups
• Size: 302 KB
• Stars: 27
• Watchers: 3
• Forks: 18
• Open Issues: 11
• Metadata Files:
  • Readme: README.md

Lists

• awesome-list - chat-widget-native - io | 20 | (TypeScript)

README

        
# @papercups-io/chat-widget-native

> Papercups chat widget for React Native

[![NPM](https://img.shields.io/npm/v/@papercups-io/chat-widget-native.svg)](https://www.npmjs.com/package/@papercups-io/chat-widget-native) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Demo



Try it out! https://snack.expo.io/@reichertjalex/papercups

## Install

```bash

npm install --save @papercups-io/chat-widget-native

```

## Usage

First, sign up at https://app.papercups.io/register to get your account token. Your account token is what you will use to pass in as the `accountId` prop below.

***NB**: make sure to pass in an `external_id` with the `customer` prop so that we can identify the person you're chatting with and load their message history if you've chatted with them before! (See below for an example)*

You can render the chat widget however you like. Here's how you might do it in a modal:

```tsx

import React from 'react';

import {StyleSheet, Button, View} from 'react-native';

import Modal from 'react-native-modal';

import ChatWidget from '@papercups-io/chat-widget-native';

export default function App() {

  const [isModalVisible, setModalVisible] = React.useState(false);

  return (

    

       setModalVisible(true)} />

       setModalVisible(false)}

      >

        

          

        

      

    

  );

}

const styles = StyleSheet.create({

  modal: {

    flex: 1,

    borderRadius: 4,

    overflow: 'hidden',

  },

});

```

## License

MIT © Papercups