How to set Two inputs on same row in react native ?
Solution 1
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:
import React, { Component } from "react";
import { Text, View, StyleSheet, TextInput } from "react-native";
export default class App extends Component {
render() {
return (
<View style={styles.row}>
<View style={styles.inputWrap}>
<Text style={styles.label}>Expiration date</Text>
<TextInput style={styles.inputdate} />
</View>
<View style={styles.inputWrap}>
<Text style={styles.label}>CVV</Text>
<TextInput style={styles.inputcvv} maxLength={17} />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
row: {
flex: 1,
flexDirection: "row"
},
inputWrap: {
flex: 1,
borderColor: "#cccccc",
borderBottomWidth: 1,
marginBottom: 10
},
inputdate: {
fontSize: 14,
marginBottom: -12,
color: "#6a4595"
},
inputcvv: {
fontSize: 14,
marginBottom: -12,
color: "#6a4595"
}
});
The important part here is the flexDirection: "row"
on the <View style={styles.row}>
element and the flex: 1
on the <View style={styles.inputWrap}>
elements.
You can edit and run this snippet with Snack (Expo):
https://snack.expo.io/rySUxTKuZ
Solution 2
Divide your overall view as shown in figure.
export default class App extends Component {
render() {
return (
<View style={styles.outerContainer}>
<View style={styles.innerContainer}>
<Text style={styles.fieldName}>
Name1
</Text>
<View style={styles.textInputContainer}>
<TextInput />
</View>
</View>
<View style={styles.innerContainer}>
<Text style={styles.fieldName}>
Name2
</Text>
<View style={styles.textInputContainer}>
<TextInput />
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
},
innerContainer: {
flex: 0.5,
flexDirection: 'row'
},
fieldName: {
flex: 1,
},
textInputContainer: {
flex: 3,
},
});
Give margins wherever necessary.
Solution 3
you can try something like this
render() {
return (
<View style={{
flexDirection: 'row',
alignItems: 'flex-start',
height:100
}}>
<View style={styles.inputWrap}>
<Text style={styles.label} >Expiration date</Text>
<TextInput style={styles.inputDate} />
</View>
<View style={styles.inputWrap}>
<Text style={styles.label}>CVV</Text>
<TextInput style={styles.inputCvv} maxLength={17} />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
label: {
flex: 1,
fontWeight: 'bold'
},
inputWrap: {
flex: 1,
justifyContent: 'space-between',
flexDirection: 'column'
},
inputDate: {
flex: 1,
backgroundColor: '#108c96',
},
inputCvv: {
flex: 1,
backgroundColor: '#6fa511',
}
});
Madhur
I am software developer, love to developing code and help people in problems.** React Js, React-Native, Angular Js, Javasacript, CI, CakePhp, Php, Jquery, MySQl,React Redux I love to explore new technologies. Fond of solving critical problems and issues that seem impossible to resolve in any language or framework Smart work is the Key to Success
Updated on August 23, 2020Comments
-
Madhur over 3 years
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