How to trigger submit event on keyboard Enter button hit in React Native?

[dmitryosipow]

Hi, I have a question regarding virtual keyaboard and submitting a form on Android. I have a form and I want it to submit when user hits Enter key after typing. But virtual keyboard has only such button https://c2n.me/3TjN0X8.jpg (with tick icon), after hitting which keyboard just hides and no submit. In some apps I saw such button https://c2n.me/3TjN35e.jpg (with arrow button), after pressing which submit event occurs. What do I have to do to make virtual keyboard have such "submit" button, instead of 'OK' button? Here is the code:

class SearchBenefitsForm extends React.Component<IProps> {
  renderTextInput = ({ input, autoFocus }: { input: any, autoFocus: boolean }) => {
    return (
      <TextInput
        {...input}
        autoFocus={autoFocus}
        underlineColorAndroid="transparent"
      />
    );
  }

  render() {
    const {
      handleSubmit,
      submitting,
      invalid,
      onCancel,
    } = this.props;

    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={handleSubmit} disabled={submitting || invalid}>
          <Image style={styles.searchIcon} source={searchIcon}/>
        </TouchableOpacity>
        <View style={styles.searchExpression}>
          <Field
            name={SEARCH_BENEFITS_EXPRESSION}
            autoFocus={true}
            component={this.renderTextInput}
          />
        </View>
        <TouchableOpacity onPress={onCancel} disabled={submitting || invalid}>
          <Image style={styles.closeIcon} source={closeIcon}/>
        </TouchableOpacity>
      </View>
    );
  }
}

export default reduxForm({
  form: SEARCH_BENEFITS_FORM,
})(SearchBenefitsForm);

[dmitryosipow]

I've found the following solution: onSubmitEditing handler from TextInput handles event when user hits Enter key on mobile, so it is possible to pass function from Field component to TextInput for execution on Enter. One question from me: when TextInput gets input parameter from Field, this input has onFocus, onBlur and other event handlers https://redux-form.com/6.4.3/docs/api/field.md/#meta-props ,but it doesn't have onSubmitEditing prop, so I have to pass it as another parameter. Why so?

class SearchBenefitsForm extends React.Component<IProps> {
  renderTextInput = ({ input, autoFocus, onSubmitEditing }: { input: any, autoFocus: boolean, onSubmitEditing: Function }) => {
    return (
      <TextInput
        {...input}
        autoFocus={autoFocus}
        underlineColorAndroid="transparent"
       onSubmitEditing={onSubmitEditing}
      />
    );
  }

  render() {
    const {
      handleSubmit,
      submitting,
      invalid,
      onCancel,
    } = this.props;

    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={handleSubmit} disabled={submitting || invalid}>
          <Image style={styles.searchIcon} source={searchIcon}/>
        </TouchableOpacity>
        <View style={styles.searchExpression}>
          <Field
            name={SEARCH_BENEFITS_EXPRESSION}
            autoFocus={true}
            component={this.renderTextInput}
            onSubmitEditing={handleSubmit}
          />
        </View>
        <TouchableOpacity onPress={onCancel} disabled={submitting || invalid}>
          <Image style={styles.closeIcon} source={closeIcon}/>
        </TouchableOpacity>
      </View>
    );
  }
}

export default reduxForm({
  form: SEARCH_BENEFITS_FORM,
})(SearchBenefitsForm);

[davidkpiano]

Please use <Control> and not <Field>, and let me know if your problem disappears.

[aymkin]

I did not find Control in RN Components, did you mean TextInput?