Hey I want to set two textInputs on same line , named Expiration date and CVV in android simulator.
<View style={{flex: 1, flexDirection: 'row'}}>
<Text style={styles.label}style= {{width : 100}}>Expiration date</Text>
<View style={styles.inputWrap}>
<TextInput style={styles.inputdate} />
</View>
<Text style={styles.label}>CVV</Text>
<View style={styles.inputWrap}>
<TextInput style={styles.inputcvv } maxLength={17} />
</View>
Here it is including CSS for both textInputs \
inputWrap: {
borderColor: '#cccccc',
borderBottomWidth: 1,
marginBottom: 10,
},
inputdate: {
fontSize: 14,
marginBottom : -12,
color: '#6a4595',
},
inputcvv: {
fontSize: 14,
marginBottom : -12,
color: '#6a4595',
},
Please let me know how can i set this on same line.. thanks in advance
With React Native you need to use Flexbox for laying out your components. Check out the Flexbox docs here.
You want to do something like this:
The important part here is the
flexDirection: "row"
on the<View style={styles.row}>
element and theflex: 1
on the<View style={styles.inputWrap}>
elements.You can edit and run this snippet with Snack (Expo):
https://snack.expo.io/rySUxTKuZ