RadioButton.ref not working?

Environment

Android

Description

I cannot obtain the ref. I wanted to work around issue #1371 for now, by wrapping the RadioButton in a Touchable (Can be a TouchableOpacity too, doesn’t matter). But I cannot obtain the ref to do so.

Reproducible Demo

import React from 'react'; // eslint-disable-next-line no-unused-vars
import { View } from 'react-native';
import { RadioButton, Text } from 'react-native-paper';
import { Styles } from '../constants/Styles';
import Touchable from 'react-native-platform-touchable';

export default class MyRadioButton extends React.Component {
    constructor(props) {
        super(props);

        this._radio = null;
    }

    _onPress() {
        console.log('click!');
        if (this._radio) {
            console.log('radio');
            //this._radio.click();
            this._radio.handlePress();
            //this._radio.onValueChange(true);
        }
    }

    render() {
        return (
            <Touchable onPress={this._onPress}>
                <View style={Styles.radioButton}>
                    <RadioButton value={this.props.value} ref={(ref) => this._radio = ref} />
                    <Text>{this.props.text}</Text>
                </View>
            </Touchable>
        )
    }
}

Above, this._radio is and stays null. I also tried it with React.createRef() but that doesn’t work either:

import React from 'react'; // eslint-disable-next-line no-unused-vars
import { View } from 'react-native';
import { RadioButton, Text } from 'react-native-paper';
import { Styles } from '../constants/Styles';
import Touchable from 'react-native-platform-touchable';

export default class MyRadioButton extends React.Component {
    constructor(props) {
        super(props);

        this._radio = React.createRef();
    }

    _onPress() {
        console.log('click!');
        if (this._radio && this._radio.current) {
            console.log('radio');
            //this._radio.click();
            this._radio.current.handlePress();
            //this._radio.onValueChange(true);
        }
    }

    render() {
        return (
            <Touchable onPress={this._onPress}>
                <View style={Styles.radioButton}>
                    <RadioButton value={this.props.value} ref={this._radio} />
                    <Text>{this.props.text}</Text>
                </View>
            </Touchable>
        )
    }
}

[satya164]

@DianaKoenraadt it should be status. My mistake. Updated the comment.

[DianaKoenraadt]

Found it!! Ended up with this:

function MyRadioButton({ onPress, text, ...rest }) {
    return (
        <Touchable onPress={onPress}>
            <View style={Styles.radioButton}>
                <RadioButton {...rest} />
                <Text>{text}</Text>
            </View>
        </Touchable>
    );
}

<RadioButton.Group
    onValueChange={value => this._setState(value)}
    value={this._getState()} >
        <MyRadioButton value="a" text="a" onPress={() => this._setState({ something: "a"})} />
        <MyRadioButton value="b" text="b" onPress={() => this._setState({ something: "b"})} />
</RadioButton.Group>

Thanks!