React Native: Align two TextInputs side by side

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>     ); }