React-native-paper: RadioGroup clicking row with children

[ferrannp]

Current behaviour

RadioGroup will pass onPress to the RadioButton children. That makes not possible to for example have a whole row clickable.

Expected behaviour

Proposed solution:

1. If children are solely RadioButton(s), place the onPress on it
2. If children contain something else, place a TouchableRipple around it with the onPress prop
3. Suggestions?

Code sample

<RadioButton.Group
  onValueChange={value => this.setState({ value })}
  value={this.state.value}
>
  <View style={styles.row}>
    <RadioButton value="first" />
    <Text>First</Text>
  </View>
  <View style={styles.row}>
    <RadioButton value="second" />
  </View>
</RadioButton.Group>

^ in this case, it'd be nice that RadioButton.Group would place a TouchabelRipple around the children and control the onPress.

Snack here.

Your Environment

| software | version
| --------------------- | -------
| react-native-paper | 2.9.1

[sibelius]

any workaround for this one?

[hamidfzm]

@ferrannp Does react native paper 3 support this feature?

[Trancever]

@hamidfzm Unfortunately no, but we will accept a PR that implements this.

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.