React-native-gifted-chat: onInputTextChanged behavior

[jaspervanbrian]

Issue Description

I want to cache my textMessage in a Redux store, so I included the text prop in Gifted chat with the value of the textMessage prop in the store, with onInputTextChanged prop on the Gifted Chat, but it clears when it is initially rendered.

Same as Issue #603

[alikazemkhanloo]

Same here. seems like this is an expected behavior.
I found this in the source code

// GiftedChat.js
 notifyInputTextReset() { // <-- this is the function that resets the text
    if (this.props.onInputTextChanged) {
      this.props.onInputTextChanged('');
    }
  }

  onInitialLayoutViewLayout(e) {
    const { layout } = e.nativeEvent;
    if (layout.height <= 0) {
      return;
    }
    this.notifyInputTextReset();  // <- and this is where the above function starts
    this.setMaxHeight(layout.height);
    const newComposerHeight = this.props.minComposerHeight;
    const newMessagesContainerHeight = this.getMessagesContainerHeightWithKeyboard(newComposerHeight);
    this.setState({
      isInitialized: true,
      text: this.getTextFromProp(''),
      composerHeight: newComposerHeight,
      messagesContainerHeight: this.prepareMessagesContainerHeight(newMessagesContainerHeight),
    });
  }

I commented out this.notifyInputTextReset(); and it worked for me.

I think a PR is needed to run this function based on user preference.

[MingFaiYau]

I suggest to write a custom composer view and use redux to control the input text.
Use onInputextChanged & text may increase some dummy render times, need use carefully.

/*
@flow
*/

import React from 'react'
import {
  View,
  Platform,
  StyleSheet,
  Text,
  TextInput,
} from 'react-native'
import type { Message } from '../../FlowType/BaseType'
import type { ReduxState } from '../../FlowType/ReducerType'

import ParsedText from 'react-native-parsed-text'

import { connect } from 'react-redux'
import { updateReplyTextAction } from '../../Redux/Action/MessageAction'

import { color, size } from '../../Common'

type Props = {
  userNamePattern: any,
  placeholder: string,
  placeholderTextColor: string,
  replyText: string,
  textInputStyle: any,
  textInputAutoFocus: boolean,
  composerHeight: number,
  keyboardAppearance: any,
  textInputProps: any,

  onInputSizeChanged: (size: any) => void,
  updateReplyTextAction: (text: string) => Promise<any>,
}

type States = {

}

class CusComposerView extends React.PureComponent<Props, States> {
  contentSize: any

  onContentSizeChange(e) {
    const { contentSize } = e.nativeEvent

    // Support earlier versions of React Native on Android.
    if (!contentSize) return

    if (
      !this.contentSize ||
      this.contentSize.height !== contentSize.height
    ) {
      this.contentSize = contentSize
      this.props.onInputSizeChanged(this.contentSize)
    }
  }

  onChangeText(text: string) {
    this.props.updateReplyTextAction(text)
  }

  render() {
    let parseProp = {}
    if (this.props.userNamePattern) {
      parseProp = { parse: [this.props.userNamePattern] }
    }

    return (
      <TextInput
        testID={this.props.placeholder}
        accessible
        accessibilityLabel={this.props.placeholder}
        placeholder={this.props.placeholder}
        placeholderTextColor={this.props.placeholderTextColor}
        multiline={true}
        onChange={(e) => this.onContentSizeChange(e)}
        onContentSizeChange={(e) => this.onContentSizeChange(e)}
        onChangeText={(text) => this.onChangeText(text)}
        style={[styles.textInput, this.props.textInputStyle, { height: this.props.composerHeight }]}
        autoFocus={this.props.textInputAutoFocus}
        enablesReturnKeyAutomatically
        underlineColorAndroid="transparent"
        keyboardAppearance={this.props.keyboardAppearance}
        {...this.props.textInputProps}
      >
        <ParsedText
          style={styles.text}
          childrenProps={{ allowFontScaling: false }}
          {...parseProp}
        >
          {this.props.replyText}
        </ParsedText>
      </TextInput>
    )
  }
}

const styles = StyleSheet.create({
  textInput: {
    flex: 1,
    marginLeft: size.composerPad,
    fontSize: size.fs_normal,
    lineHeight: size.fs_normal,
    marginTop: Platform.select({
      ios: size.composerPad,
      android: 0,
    }),
    marginBottom: Platform.select({
      ios: size.composerPad,
      android: size.composerPad,
    }),
  }, text: {
    fontSize: size.fs_normal,
  }
})

const mapStateToProps = (state: ReduxState) => {
  return {
    replyText: state.messageReducer.replyText,
  }
}

const mapDispatchToProps = (dispatch, props) => {
  return {
    dispatch: dispatch,
    updateReplyTextAction: (text) => dispatch(updateReplyTextAction(text)),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(CusComposerView)

Here are the custom composer view i am using , just copy original code and did some changes
and you can handle "replyText" in your redux action or send action

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[alikazemkhanloo]

Wouldn't a new prop be nicer? something like clearTextOnInitialLayout.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[danielstreiber]

I'm having this issue as well. I'm not sure why the behavior is to clear the text when the component is initially rendered.

[Vi-dot]

A quick hack

import { GiftedChat } from 'react-native-gifted-chat';

GiftedChat.prototype.notifyInputTextReset = () => {};

or better, if you want to keep notifyInputTextReset() working in resetInputToolbar()

GiftedChat.prototype.notifyInputTextReset = function () {
    if (this.props.onInputTextChanged && this.state.isInitialized === true) {
        this.props.onInputTextChanged('')
    }
};