Undefined is not an object for TextInput onSubmitEditing Focus

Question

Im trying to focus next field when user press next button on the keyboard. but im keep getting undefined is not an object (_this2.passwordInput.focus).

I was referring this question to implement it. and it didn't work.

I have CustomInputText and this is how i implemented it.

<CustomEditText
    labelText="Email or Phone Number"
    returnKeyType = "next"
    onSubmitEditing={ () => this.passwordInput.focus() }
    onChangeText={text => this.setState({ username: text })}
    blurOnSubmit={false}
    />

<CustomEditText
    ref={(ref) => { this.passwordInput = ref; }}
    labelText="Password"
    secureText={true}
    onChangeText={text => this.setState({ password: text })}
    />

CustomEditText.js

const CustomEditText = props => {
  return (
    <View style={styles.container}>
      <SmallText fontFamily="semi-bold" color={props.darkText? Colors.TEXT_PRIMARY_COLOR : "#fff"}>
        {props.labelText}
      </SmallText>

      <TextInput
        ref = {props.ref}
        blurOnSubmit= {props.blurOnSubmit}
        onSubmitEditing = {props.onSubmitEditing}
        returnKeyType = {props.returnKeyType}
        onFocus = {props.onFocus}
        autoCapitalize="none"
        editable={props.editable}
        onChangeText={props.onChangeText}
        keyboardType={props.keyboardType}
        {...props}
        value={props.value}
      />
      {props.secondaryLabelText ? (
        <ExtraSmallText
          fontFamily="semi-bold"
          color={props.darkText? Colors.TEXT_PRIMARY_COLOR : "#fff"}
          style={styles.secondaryLabelStyle}
        >
          {props.secondaryLabelText}
        </ExtraSmallText>
      ) : null}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    margin: 5
  },
  textInputStyle: {
    backgroundColor: "#fff",
    height: 45,
    borderRadius: 5,
    borderWidth: 1,
    padding: 5,
    marginTop: 5,
    color:"#000"
  },
  secondaryLabelStyle: {
    marginTop: 5
  }
});

CustomEditText.propTypes = {
  labelText: propTypes.string.isRequired,
  secondaryLabelText: propTypes.string,
  keyboardType: propTypes.string,
  secureText: propTypes.bool,
  placeholderText: propTypes.string,
  placeholderTextColor: propTypes.bool,
  onChangeText: propTypes.func,
  darkText: propTypes.bool,
  editable: propTypes.bool,
  onFocus: propTypes.func,
  pointerEvents: propTypes.string,
  returnKeyType : propTypes.string,
  onSubmitEditing: propTypes.func,
  ref: propTypes.func,
  blurOnSubmit: propTypes.bool

};

export default CustomEditText;

score 1 · Accepted Answer · answered Aug 27 '19 at 11:49

Update your CustomTextInput.js file with below code

<TextInput
        ref={input => props.inputRef && props.inputRef(input)}
        blurOnSubmit= {props.blurOnSubmit}
        onSubmitEditing = {props.onSubmitEditing}
        returnKeyType = {props.returnKeyType}
        onFocus = {props.onFocus}
        autoCapitalize="none"
        editable={props.editable}
        onChangeText={props.onChangeText}
        keyboardType={props.keyboardType}
        {...props}
        value={props.value}
      />

and use it like this

<CustomEditText
          inputRef={(ref) => this.passwordInput = ref}
          labelText="Password"
          secureText={true}
          // onChangeText={text => this.setState({ password: text })}
          />

it worked. and could you explain the reason?also its better to use different name than actual property name right? ex: `inputRef` instead of `ref` — Im Batman, Aug 27 '19 at 12:34

Undefined is not an object for TextInput onSubmitEditing Focus

1 Answers1