Text component overlapping with the View above it - react-native

Question

I'm practicing some react native code and I'm currently stuck with an overlapping problem.I've got this custom component:
const MobileNumberInput = ({ value, valueChanged, placeholder, valid }) => {
return (
<View style={{ flexDirection: "row", flex: 1 }}>
<TextInput
editable={false}
style={[styles.textBoxCountryCode, !valid ? styles.invalidTextBox : ""]}
value="+90"
/>
<TextInput
style={[styles.textBoxPhoneNumber, !valid ? styles.invalidTextBox : ""]}
placeholder={placeholder}
value={value}
onChangeText={valueChanged}
keyboardType="number-pad"
maxLength={9}
/>
</View>
);
};
export default MobileNumberInput;
onst styles = StyleSheet.create({
container: {
flexDirection: "row",
flex: 1,
height: 40
},
textBoxCountryCode: {
height: 40,
borderColor: "gray",
borderTopWidth: 1,
borderBottomWidth: 1,
borderLeftWidth: 1,
borderTopLeftRadius: 5,
borderBottomLeftRadius: 5,
padding: 5,
flex: 2
},
textBoxPhoneNumber: {
height: 40,
borderColor: "gray",
borderTopWidth: 1,
borderBottomWidth: 1,
borderRightWidth: 1,
borderTopRightRadius: 5,
borderBottomRightRadius: 5,
paddingTop: 5,
paddingRight: 5,
paddingBottom: 5,
marginBottom: 10,
flex: 11
},
invalidTextBox: {
borderColor: "red"
}
});
And here, I'm using that component:
renderError = id => {
const { validationErrors } = this.state;
if (validationErrors[id]) {
return (
<Text style={styles.validationError}>{validationErrors[id][0]}</Text>
);
}
return null;
};
render() {
const keyboardVerticalOffset = Platform.OS === "ios" ? 40 : 0;
return (
<View style={styles.container}>
<KeyboardAvoidingView
behavior="padding"
style={styles.textBoxContainerContainer}
keyboardVerticalOffset={keyboardVerticalOffset}
>
<View style={styles.textBoxContainer}>
<TextBoxMA
style={styles.textBox}
placeholder={Strings.USERNAME_PLACEHOLDER}
value={this.state.userName}
onChangeText={this.handleTextChange("userName")}
valid={this.fieldIsValid("userName")}
/>
{this.renderError("userName")}
</View>
<View style={styles.textBoxContainer}>
<MobileNumberInput
value={this.state.originalMobile}
valueChanged={this.handleTextChange("originalMobile")}
placeholder={Strings.ORIGINAL_MOBILE_PHONE_PLACEHOLDER}
valid={this.fieldIsValid("originalMobile")}
/>
{this.renderError("originalMobile")}
</View>
</KeyboardAvoidingView>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
padding: 20
},
textBoxContainerContainer: {
flex: 4,
justifyContent: "flex-end"
},
textBoxContainer: {
height: 40,
marginBottom: 20
},
validationError: {
fontSize: 12,
color: "red",
fontWeight: "bold",
paddingTop: 3
}
});
The {this.renderError("originalMobile")} portion is responsible for rendering an error text.
I put it there to get a small red warning just under the text box. But the warning stretches to inside mobile number component while the username warning is displayed correctly. Here's the output:
I've tried wrapping the error Text inside another View, didn't help. Wrapped the container View inside the MobileNumberInput component into yet another View with explicit flex-direction ="column". It didn't help either. I even changed the flex-direction of that container View to "column" just to see what would happen. But it didn't have any effect either. As you can see from the screenshot the problem is with the MobileNumberInput component part. The error text for the Username textinput is ok.
And if you wonder what the TextBoxMA looks like, it's just a TextInput component with predefined properties. Here it is:
export const TextBoxMA = props => {
return (
<TextInput
secureTextEntry={props.isPassword || false}
{...props}
style={[
props.style,
styles.textBox,
Platform.OS === "ios" ? styles.textBoxIos : styles.textBoxAndroid,
!props.valid ? styles.invalidTextBox : ""
]}
/>
);
};
const styles = StyleSheet.create({
textBox: {
height: 40,
borderColor: "gray",
borderWidth: 1,
borderRadius: 5,
padding: 5
},
invalidTextBox: {
borderColor: "red"
}
});

Answer 1

You've set your input height to 40, but then the View with style styles.textBoxContainer which wraps both input and error text, is also set to 40 height, squishing MobileNumberInput in half. You can't visually notice this effect because TextInputs inside MobileNumberInput go outside of the parent
To handle cases like this you need to create one container to wrap TextInputs and another container to wrap the first container and the error text. It's best to not set explicit height for containers but rather set their paddings to get desired size