CODEWITHSUNDEEP
javascriptandroidiosreact-nativemobile-development
Maksim
Maksim

Reputation: 2466

How to create TextInputs in one row? (React Native)

I'm trying to create 3 TextInputs in one row, but when I write flexDirection: 'row' it doesn't work (I don't see any text inputs on device).

var SampleApp = React.createClass({
render: function() {
return (
  <View style={styles.container}>
    <View style={styles.textInputWrapper}>
      <TextInput style={styles.textInput}
      placeholder='Month'
      placeholderTextColor="#d3d3d3"
      />
    </View>
    <View style={styles.textInputWrapper}>
      <TextInput style={styles.textInput}
      placeholder='Day'
      placeholderTextColor="#d3d3d3"
      />
    </View>
    <View style={styles.textInputWrapper}>
      <TextInput style={styles.textInput}
      placeholder='Year'
      placeholderTextColor="#d3d3d3"
      />
    </View>
  </View>
  );
  }
 });

var styles = StyleSheet.create({
 container: {
 flex: 1,
 flexDirection: 'row'
}
});

Upvotes: 2

Views: 1810

Answers (1)

Phyo
Phyo

Reputation: 692

You need to add styles for each component. Hope that help. 

 var styles = StyleSheet.create({
 container: {
    flex: 1,
    flexDirection: 'row'
 },
 textInputWrapper: {
     flex:1,
     height: 50,
     borderColor:'red',
     borderWidth: 2,
 },
 textInput:{
  flex:1,
 }

});

Upvotes: 2

Related Questions