Radio Button onPress isn't working react-native-paper

Question

I have two radial buttons I'm using from react-native-paper. I have both the buttons themselves and the text next to them under an onPress function, however only when I press on the text does the function execute, not when I press on the button. When I press on the button, it highlights and shows that it was pressed, but doesn't execute the onPress.

<View style={[s.profile_gender_row]}>
    <Text onPress={() => {this.onDataChange('gender', 'F')}}>Female</Text> // this works just fine
    <RadioButton
        value="F"
        status={this.props.gender === 'F' ? 'checked' : 'unchecked'}
        onPress={() => {this.onDataChange('gender', 'F')}} // this does not work
    />
</View>
<View style={[s.profile_gender_row]}>
    <Text onPress={() => {this.onDataChange('gender', 'M')}}>Male</Text>
    <RadioButton
        value="M"
        status={this.props.gender === 'M' ? 'checked' : 'unchecked'}
        onPress={() => {this.onDataChange('gender', 'M')}}
    />
</View>

There aren't any error messages, I'm just stumped at why it's not executing.

You should wrap the text (and/or any other sibling components) in a view and wrap that view in a touchable (like TouchableHighlight or TouchableOpacity) and add the onPress prop to that container, then u can control the padding for the touchable place — mahmoudafer
@mAhMoUdDaFeR thanks for the comment! But it didn't work :'( though I like the idea, I'll keep that in for the main app. — David
You dont need to wrap the function call with {}. Just call the onPress as this: {() => this.onDataChange('gender', 'M')} and it should work — darkknight
@darkknight didn't work :( I changed the onPress to onPress={() => this.onDataChange('gender', 'M')} — David
This doesn't work for me either, even on the sample snack provided by React Native Paper. I've reported it here: github.com/callstack/react-native-paper/issues/1391 — Kat

Kat Kat · Accepted Answer · 2019-10-22T00:27:07

Unfortunately it sounds like this is a bug with version 2.16.0 which is currently the latest version. It should be fixed in 3.xx so you can upgrade to 3.0.0-alpha.8 for a fix.

Radio Button onPress isn't working react-native-paper

1 Answers