CODEWITHSUNDEEP
cssreactjsreact-native
user8385437
user8385437

Reputation:

How to align Textinput inputs on same flex row in react native ? (dynamically)

I want to set two textInputs on same row , named set 1 and set 2

<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>

Please send me the css paticulat, Thanks in Advance

Upvotes: 1

Views: 2212

Answers (1)

Vahid Boreiri
Vahid Boreiri

Reputation: 3438

If you want your labels and TextInputs in the same line the code will be like this:

      <View style={{flexDirection: 'row'}}>
        <View  style={{flex: 1, flexDirection: 'row'}}>
          <Text style={{flex: 0}}>Expiration date</Text>
          <TextInput style={{flex: 1}} />  
        </View>

        <View  style={{flex: 1, flexDirection: 'row'}}>
          <Text style={{flex: 0}}>CVV</Text>
          <TextInput  style={{flex: 1}} maxLength={17} />
        </View>
      </View>

Upvotes: 5

Related Questions