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:
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):
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',
}
});
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.