text: import React from 'react';
  import {TextInput} from 'react-native';
  import PropTypes from 'prop-types';
  import _ from 'underscore';
  
  /**
   * On native layers we like to have the Text Input not focused so the user can read new chats without they keyboard in
   * the way of the view
   */
  
  const propTypes = {
      // If the input should clear, it actually gets intercepted instead of .clear()
      shouldClear: PropTypes.bool,
  
      // A ref to forward to the text input
      forwardedRef: PropTypes.func.isRequired,
  
      // When the input has cleared whoever owns this input should know about it
      onClear: PropTypes.func,
  
      /* Set focus to this component the first time it renders. Override this in case you need to set focus on one
      * field out of many, or when you want to disable autoFocus */
      autoFocus: PropTypes.bool,
  
      /* Prevent edits and interactions like focus for this input. */
      isDisabled: PropTypes.bool,
  };
  
  const defaultProps = {
      shouldClear: false,
      onClear: () => {},
      autoFocus: false,
      isDisabled: false,
  };
  
  class TextInputFocusable extends React.Component {
      componentDidMount() {
          // This callback prop is used by the parent component using the constructor to
          // get a ref to the inner textInput element e.g. if we do
          // <constructor ref={el => this.textInput = el} /> this will not
          // return a ref to the component, but rather the HTML element by default
          if (this.props.forwardedRef && _.isFunction(this.props.forwardedRef)) {
              this.props.forwardedRef(this.textInput);
          }
      }
  
      componentDidUpdate(prevProps) {
          if (!prevProps.shouldClear && this.props.shouldClear) {
              this.textInput.clear();
              this.props.onClear();
          }
      }
  
      render() {
          return (
              <TextInput
                  ref={el => this.textInput = el}
                  maxHeight={116}
                  rejectResponderTermination={false}
                  editable={!this.props.isDisabled}
                  /* eslint-disable-next-line react/jsx-props-no-spreading */
                  {...this.props}
              />
          );
      }
  }
  
  TextInputFocusable.displayName = 'TextInputFocusable';
  TextInputFocusable.propTypes = propTypes;
  TextInputFocusable.defaultProps = defaultProps;
  
  export default React.forwardRef((props, ref) => (
      /* eslint-disable-next-line react/jsx-props-no-spreading */
      <TextInputFocusable {...props} forwardedRef={ref} />
  ));
  