onBlur function of TextInput doesn't call when press a button on the screen itself in React native

Viewed 194

I'm doing a login page. I have component custom TextInput and CustomButton on this. If user press out of TextBox, it will call onBlur and send text, but when I fill full text on TextBox, then press Submit, onBlur function doesn't call.Can you help me a way to fix them?

This is TextBox, custom for TextInput

export const TextBox = (props) => (
  <TextInput
    style={styles.textInput}
    placeholderTextColor={styles.placeholderTextColor}
    placeholder={props.placeholder}
    autoCapitalize={props.autoCapitalize}
    keyboardType={props.keyboardType}
    onBlur={(e) => {
      onEnter(e.nativeEvent.text)
    }}
  />
)

This is Login page, contains TextBox.

renderBoxMessgase = (textBox) => {
  const {
    placeholder,
    errorMessage,
    stylesWrraper,
    type,
    keyboardType
  } = textBox

  return (
    <View
      key={placeholder}
      style={styles[stylesWrraper]}
    >
      <TextBox
        onEnter={(text) => {
          this.checkErrorMessage(text, type)
        }}
        placeholder={placeholder}
        errorMessage={errorMessage}
        keyboardType={keyboardType}
      />
    </View>
  )
}

render() {
  const textBoxes = [this.state.name, this.state.email]
  return (
    <Container style={styles.contentWrapper}>
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <Image
          source={Images.welcomeBg}
          style={styles.container}
        >
          <Logo />
          <KeyboardAvoidingView behavior="padding">
            <View style={styles.textWarpper}>
              <TextView
                content='Hello, please enter your name and email to continue.'
                type='description'
                isUppercase={false}
                textAlign='center'
                size='large'
                numberOfLines={10}
              />
            </View>
            {textBoxes.map(box => this.renderBoxMessgase(box))}
            <CustomButton
              label='Sign in'
              type='small'
              isUpperCase={true}
              onPress={() => this.onPressLogin()}
            />
          </KeyboardAvoidingView>
        </Image>
      </TouchableWithoutFeedback>
    </Container>
  );
}

Submit but onBlur doen't read

0 Answers
Related