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>
);
}
