How to make Radio buttons in row in react native? - react-native

Question

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://imgur.com/a/jJ0GNTz
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.

Answer 1

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%

Answer 2

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