react native JSX styling issue when using flex - css

Question

I am trying to add form fields validation to several forms on a react native mobile app. I am running into an issue where the View that contains the error message I want to appear seems to take up half of the space to the right of the TextInput control instead of the form control taking up the whole line and the error message appearing on the next line. For example, this is how my form field seems to appear when I add a background color to the error View container:
Here is the css code for this:
import { StyleSheet } from 'react-native';
import EStyleSheet from 'react-native-extended-stylesheet';
const INPUT_HEIGHT = 36;
const BORDER_RADIUS = 4;
export default EStyleSheet.create({
$buttonBackgroundColorBase: '$white',
$buttonBackgroundColorModifier: 0.1,
container: {
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'flex-start',
backgroundColor: '$white',
height: INPUT_HEIGHT,
borderRadius: BORDER_RADIUS,
marginVertical: 11,
borderWidth: 1,
borderColor: 'gray'
},
containerDisabled: {
backgroundColor: '$lightGray',
},
buttonContainer: {
flex: 1,
height: INPUT_HEIGHT,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '$white',
borderTopLeftRadius: BORDER_RADIUS,
borderBottomLeftRadius: BORDER_RADIUS,
},
buttonText: {
fontWeight: '600',
fontSize: 20,
paddingHorizontal: 16,
color: '$primaryBlue',
},
separator: {
height: INPUT_HEIGHT,
width: StyleSheet.hairlineWidth,
backgroundColor: '$border',
},
input: {
height: INPUT_HEIGHT,
flex: 1,
//width: '100%',
borderTopRightRadius: BORDER_RADIUS,
paddingHorizontal: 8,
backgroundColor: '$white',
marginBottom: 0,
paddingBottom: 0,
marginTop: 0,
paddingTop: 0
},
icon: {
flex: 1,
alignSelf: 'flex-start'
},
errorContainer: {
height: INPUT_HEIGHT,
flex: 1,
paddingHorizontal: 8,
backgroundColor: 'transparent'
}
});
The JSX code:
<View style={containerStyles}>
<View style={{flex: 1, flexDirection: 'column', alignSelf: 'stretch'}}><TextInput style={textStyles} underlineColorAndroid="transparent" {...props} /></View>
<View style={{flex: 1, flexDirection: 'column', alignSelf: 'stretch', backgroundColor: '#ff0099'}}>{ error }</View>
</View>
The code that generates the error message:
let error = props.error ? <Text style={{color: '#ff0000'}}>{props.error}</Text> : null;
When the onBlur event fires, it keeps adding the error message in the pink area instead of the text field taking up the entire line and the pink area displaying under the text field? I am setting flex=1 for the all of the containers and the text box. I want to allow for multiple different screen resolutions. Please explain what I am doing wrong and can I fix this issue?

Answer 1

In the style object you're passing into your container view, your flexDirection should be 'column'.