react-native-lifetime-livechat/LiveChat/components/InputField.js

LiveChat implementation for LifeTime application

import React, { Component } from 'react';
import { View, TextInput, StyleSheet, TouchableOpacity } from 'react-native';
import SendButton from "./SendButton";

export default class InputField extends Component {
  state = {
    value: ''
  };

  changeValue = value => this.setState({value});

  onSendClicked = () => {
    const { value } = this.state;
    const {onSend} = this.props;

    onSend(value);

    this.setState({
      value: null,
    })
  };

  render() {
    const { value } = this.state;
    const {openChat, chatState} = this.props;
    const { container, input } = styles;

    return (
      <View style={container}>
        <TextInput
          onFocus={openChat}
          onChangeText={this.changeValue}
          placeholder={chatState > 0 ? 'Start typing your question...' : 'How can I help you today?'}
          placeholderTextColor="rgb(102, 102, 102)"
          openChat={openChat}
          returnKeyType="send"
          onSubmitEditing={this.onSendClicked}
          value={value}
          style={input}
        />
        <SendButton onPress={this.onSendClicked}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
  },
  input: {
    flex: 1,
    backgroundColor: '#EEEEEE',
    fontSize: 16,
    padding: 12,
    borderRadius: 14,
    marginHorizontal: 14,
  },
});