Issue with Flexdirection:'row'

[kamleshchandnani]

When i set flex direction to row and flexWrap to 'wrap' then there is unnecessary height the radio button takes up, also it doesn't grows the parent container to show all the radios css

radioGroup: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginTop: 20,
    marginBottom: 10
  },
  radioView: {
    width: '40%',
    // flexWrap: 'wrap',
    flexGrow: 1,
    alignItems: 'flex-start',
    paddingRight: 2
  },

<View>
 <RadioGroup style={productStyles.radioGroup}
                  selectedIndex={this.state.categoryIndex}
                  onSelect={(index, value) => { this.changeHandler('categoryValue', value, index) }}
                >
                  {
                    this.state.category.map((data, index) => (
                      <RadioButton key={index} value={data.id} style={productStyles.radioView}>
                        <Text style={{ color: '#666666' }}>{data.name}</Text>
                      </RadioButton>
                    ))
                  }
                </RadioGroup>
</View>

[thegamenicorus]

Could you take screenshot or explain more info, please.

Thank you. :)

[ghost]

@kamleshchandnani would you please explain me the mapping concept in your code for index field. I need to make selectedIndex = {this.state.index} so that already saved radio button will appear as selected. Please help me with this. All i want to ask is how did you create your array of "data" with respective index value?

[kamleshchandnani]

@khushboogupta1 Array of Data

[
  {
    "id": 1,
    "name": "Item1"
  },
  {
    "id": 2,
    "name": "Item2"
  },
  {
    "id": 3,
    "name": "Item3"
  }
]

I passed onSelect a function like below

 onSelect={(index, value) => { this.changeHandler('categoryValue', value, index) }} 

so I also pass index to this function along with 'categoryValue' and index, and the 'changeHandler' function is implemented in the following way.

changeHandler = (type, value, index) => {
  if(type = "categoryValue"){
    this.setState({
      categoryValue: value,
      categoryIndex: index
    })
  }
}

So the radio gets selected as because selectedIndex={this.state.categoryIndex} evaluates to the actual index value.

[Swap00Seven]

Were you able to place radio buttons on a single row? Please let me know how can we do that.

[vjazz]

I only placed style={{flexDirection:'row'}} in RadioGroup and my button is in row now.