Package Exports

react-native-chatbox

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-chatbox) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-chatbox

a multifunctional input box

you must place this component last which in a flexbox container

Install

    npm install react-native-chatbox

    or

    yarn add react-native-chatbox

Demo


import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import Chatbox from 'react-native-chatbox';

export default class App extends Component{
  render() {
    const extras = [
        {
          extraStyle: {

          },
          onExtraClick: () => {console.log('click extra1')},
          icon: require('./images/11.png'),
          extraIconStyle: {
            width: 40,
            height: 40
          },
          textStyle: {
            color: 'red'
          },
          text: 'extra条目1'
        },
        {
          extraStyle: {

          },
          onExtraClick: () => {console.log('click extra2')},
          icon: require('./images/12.png'),
          extraIconStyle: {
              width: 40,
              height: 40
          },
          textStyle: {
              color: 'blue'
          },
          text: 'extra条目2'
        }
    ]

    const emojis = new Map(
        ["grinning", "😀"],
        ["grin", "😁"],
        ["joy", "😂"],
        ["smiley", "😃"],
        ["smile", "😄"],
        ["sweat_smile", "😅"],
        ["laughing", "😆"])

    return (
      <View style={styles.container}>
        <View style={{flex: 1}}>
          <Text>Chatbox Component Demo</Text>
        </View>
        <Chatbox
          containerStyle={{

          }}
          extraContainerStyle={{

          }}
          emojiContainerStyle={{

          }}
          onStartRecord={() => {console.log('start record')}}
          onStopRecord={() => {console.log('stop record')}}
          onSendTextMessage={message => {console.log(message)}}
          extras={extras}
          emojis={emojis}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

Props

Prop name	Desciption	Type	Default
emojis	render the emoji icon	PropTypes.Object
containerStyle	chatbox container style	ViewPropTypes.style	{}
extraContainerStyle	extra panel container style	ViewPropTypes.style	{}
emojiContainerStyle	emoji panel container style	ViewPropTypes.style	{}
onStartRecord	record start call the function	PropTypes.func.isRequired
onStopRecord	record stop call the function	PropTypes.func.isRequired
onSendTextMessage	click send button call the function(pattern: message => {})	PropTypes.func.isRequired
extras	pass this props will expand when you toggle the extra button	PropTypes.array(PropTypes.object)	[]

    extras param pattern:
        [
            {
              extraStyle: {

              },
              onExtraClick: () => {console.log('click extra1')},
              icon: require('./images/11.png'),
              extraIconStyle: {
                width: 40,
                height: 40
              },
              textStyle: {
                color: 'red'
              },
              text: 'extra条目1'
            }
        ]