CODEWITHSUNDEEP
react-native
Vipin Dubey
Vipin Dubey

Reputation: 409

How to make Radio buttons in row in react native?

I am making a react native application in which i need to make design like this.In the image i have the radio buttons in row.How can i achieve similarly in react native.

https://i.sstatic.net/wHKng.jpg

Currently i am using package react-native-flexi-radio-button

Here is my code.

<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
  <RadioGroup
    size={24}
    thickness={2}
    color='#0A0A0A'
    selectedIndex={0}
    style={{ marginRight: '80%', marginBottom: 10 }}
    onSelect = {(index, value) => this.onSelect(index, value)}>

    <RadioButton value={'cash'} >
      <Text style ={{ width: '100%' }}>COD</Text>
    </RadioButton>

    <RadioButton value={'online'}>
      <Text style ={{ width: '100%' }}>Online</Text>
    </RadioButton>

  </RadioGroup>

</View>

I have tried may possible ways but could not achieve like in design.I have also tried setting the flexDirection to Row but that also does not works.I have also used other packages.I am new to react native application development so kindly make my concepts clear.Thanks in advance.

Upvotes: 0

Views: 3823

Answers (2)

yesIamFaded
yesIamFaded

Reputation: 2068

I dont know if it works with the package you are using but usually you can have it like this:

<View style={{flexDirection: "row", width: "100%" }} >

<View style={{flex:1}} > Your radio button </View>
<View style={{flex:1}} > Your second radio button  </View>

</View>

each view takes 50% in the row. you can add some width to the inner views or play around with justifyContent: "space-between" (for example) in the top View.

Hope this helps!

Also react-native-elements have nice radio buttons too and it works like this with them 100%

Upvotes: 1

kfroemming
kfroemming

Reputation: 321

Looking at the libraries source code, it looks like you need to apply you flex argument to the radio group and not the surrounding container.

Example: 

<RadioGroup
  style={{flexDirection: "row"}}
  size={24}
  thickness={2} 
  color='#0A0A0A'
  selectedIndex={0}
/>

Upvotes: 0

Related Questions