React Native: Align two TextInputs side by side - react-native

Question

I am just starting out with React Native and I am developing an app using RN ... I am bit stuck here ... I have a form in one of the app's component that have couple of TextInputs aligned side by side like in the image below
Here is the code that I have written trying to achieve the above design.
import React, {Component} from 'react';
import {View, Text, StyleSheet, TextInput, TouchableHighlight} from 'react-native';
export default class AddItems extends Component {
onAdd() {
alert('Hello');
}
render() {
return (
<View style={addItemStyles.wrapper}>
<View>
<Text>Item to give cash credit for:</Text>
<View>
<View>
<TextInput placeholder="Test" style={{justifyContent: 'flex-start',}} />
</View>
<View>
<TextInput placeholder="Test" style={{justifyContent: 'flex-end',}} />
</View>
</View>
</View>
</View>
);
}
}
const addItemStyles = StyleSheet.create({
wrapper: {
padding: 10,
backgroundColor: '#FFFFFF'
},
inputLabels: {
fontSize: 16,
color: '#000000',
marginBottom: 7,
},
inputField: {
backgroundColor: '#EEEEEE',
padding: 10,
color: '#505050',
height: 50
},
inputWrapper: {
paddingBottom: 20,
},
saveBtn: {
backgroundColor: '#003E7D',
alignItems: 'center',
padding: 12,
},
saveBtnText: {
color: '#FFFFFF',
fontSize: 18,
}
});
But instead I am getting the view like this.
I know this could be a minor thing but as I said above that I am just starting with React Native so you can consider me as a noob ... Thanks in advance for your help. Looking forward to your answers.

Answer 1

use "flexDirection" in style
render() {
return (
<View style={addItemStyles.wrapper}>
<View>
<Text>Item to give cash credit for:</Text>
<View style={{flexDirection:"row"}}>
<View style={{flex:1}}>
<TextInput placeholder="Test" style={{justifyContent: 'flex-start',}} />
</View>
<View style={{flex:1}}>
<TextInput placeholder="Test" style={{justifyContent: 'flex-end',}} />
</View>
</View>
</View>
</View>
);
}