two inputs in one line? - css

Question

I have created a form in react-native which looks like:
Here is my code:
const Login = (props) => {
const { phoneContainerStyles, loginButtonStyle } = styles;
return (
<View>
<Field id="country" name="country" type="select" mode="dropdown" label="Country:" component={FormInput}>
{
props.countries && props.countries.map(country => <Picker.Item key={country.code} label={country.name} value={country.code} />)
}
</Field>
<Field id="phone" name="phone" type="phone" label="Phone Number:" component={FormInput} />
<Button type="submit" title="Login" buttonStyle={loginButtonStyle} onPress={props.handleSubmit(onLogin)} />
</View>
);
}
const styles = {
loginButtonStyle: {
backgroundColor: '#fc4482'
}
}
Here is the FormInput:
const FormInput = (props) => {
const { touched, error } = props.meta || {};
const { labelStyles, errorStyles } = styles;
return (
<View>
<Text style={[labelStyles, { display: props.label ? 'flex' : 'none', color: `${(touched && error) ? 'red' : 'black'}` }]}>{props.label}</Text>
<View style={{ padding: props.inputWrapperPadding }}>
{returnInput(props)}
<View>
<Text style={errorStyles}>{touched ? (error ? error : '') : ''}</Text>
</View>
</View>
</View>
);
};
const returnInput = (props) => {
const { touched, error } = props.meta || {};
switch (props.type) {
case 'select':
.....
case 'phone':
return (
<View>
<TextBox {...props.input} id={`sel-${props.id}`} value={props.sel} style={styles.phoneSelStyle} />
<TextBox {...props.input} id={props.id} placeholder={props.placeholder} disabled={props.disabled}
style={[ styles.textBoxStyle, { borderColor: `${(touched && error) ? 'red' : 'black'}` }]}
value={props.input.value} onChangeText={value => props.input.onChange(value)} />
</View>
);
default:
.....
}
};
const styles = {
labelStyles: {
paddingLeft: 16,
fontWeight: 'bold'
},
errorStyles: {
color: 'red',
marginLeft: 16,
marginRight: 16,
marginBottom: 8
},
pickerStyles: {
marginLeft: 16,
marginRight: 16
},
textBoxStyle: {
marginBottom: 4,
borderWidth: 1,
}
phoneSelStyle: {
width: 50
}
}
Now, I want the two TextInputs below Phone Number label in 1 line.
So, I added this style to View:
case 'select':
.......
case 'phone':
return (
<View style={styles.phoneContainerStyles}>
<TextBox {...props.input} id={`sel-${props.id}`} value={props.sel} style={styles.phoneSelStyle} />
<TextBox {...props.input} id={props.id} placeholder={props.placeholder} disabled={props.disabled}
style={[ styles.textBoxStyle, { borderColor: `${(touched && error) ? 'red' : 'black'}` }]}
value={props.input.value} onChangeText={value => props.input.onChange(value)} />
</View>
);
default:
.......
Here is the style:
phoneContainerStyles: {
flex: 1,
flexDirection: 'row'
}
Now, If I run my app, then output looks like below:
I don't know why my textbox gets width = 0. Also, why button comes over the textboxes.
After following the answer by #Himanshu

Answer 1

Update your style like this:
//Child view component (<TextBox>) style use flex property
textBoxStyle: {
flex:2
borderWidth: 1,
}
phoneSelStyle: {
//width: 50 don't apply width instead use flex
flex:8
}
//Parent view style
phoneContainerStyles: {
flex: 1,
flexDirection: 'row'
}