In my app, I have four Inputs as so:
<Input id="name" onInputChanged={inputChangedHandler} autoCapitalize="none" placeholder='Full Name '/>
<Input id="username" onInputChanged={inputChangedHandler} autoCapitalize="none" placeholder='Username '/>
<Input id="email"onInputChanged={inputChangedHandler} autoCapitalize="none" placeholder='Email Address'/>
<Input id="password" onInputChanged={inputChangedHandler} secureTextEntry autoCapitalize="none" placeholder='Password '/>
Each input looks as follows:
return (
<View style={styles.container}>
<View style={styles.inputContainer}>
<TextInput onChangeText={props.onInputChanged && onChangeText} { ...props } placeholder={props.placeholder} placeholderTextColor={colors.lightGrey} style={{...styles.input, ...props.style}} />
</View>
</View>
)
When the inputs are first loaded, the inputs look as follows: Image of inputs before typing in values and clicking return on keyboard
After I type in a value in one of the inputs, and hit the return/enter button on the mobile keyboard, all the inputs lose focus, and a user has to click on the screen again in order to be able to select an input and type something again.
The inputs also change colour whilst they lose focus. Here is what it looks like:
Image of inputs after clicking return button on mobile keyboard for any one of the inputs
Does anyone know how to avoid this? Thanks.
