unable to create ref in react-native

Question

I want to set focus on next TextInput using createRef(). I am getting error in createRef(). What am I doing wrong? Thanks in advance.

constructor(props) {
        super(props);
            this.r2Ref = React.createRef();
            this.r3Ref = React.createRef();
            this.r4Ref = React.createRef();
            this.r5Ref = React.createRef();
    }

render() {
        return (
            <View style={SetStyle.settingsCont}>
            <ScrollView>

                <View style={SetStyle.contRate}>

                    <View style={SetStyle.rView}>
                        <Text style={SetStyle.rText}>Rate1</Text>
                        <TextInput style={SetStyle.rInput} keyboardType='numeric'
                            returnKeyType="next" onSubmitEditing={() => this.refs.r2Ref.focus()}></TextInput>
                    </View>
                    <View style={SetStyle.rView}>
                        <Text style={SetStyle.rText}>Rate2</Text>
                        <TextInput style={SetStyle.rInput} keyboardType='numeric'
                            ref={r2Ref => this.r2Ref = r2Ref}
                            returnKeyType="next" onSubimitEditing={() => this.refs.r3Ref.focus()}></TextInput>
                    </View>
                    <View style={SetStyle.rView}>
                        <Text style={SetStyle.rText}>Rate3</Text>
                        <TextInput style={SetStyle.rInput} keyboardType='numeric'
                        ref={r3Ref => this.r3Ref = r3Ref}
                        returnKeyType="next" onSubmitEditing={() => this.refs.r4Ref.focus()}></TextInput>
                    </View>
                    <View style={SetStyle.rView}>
                        <Text style={SetStyle.rText}>Rate4</Text>
                        <TextInput style={SetStyle.rInput} keyboardType='numeric'
                            ref={r4Ref => this.r4Ref = r4Ref}
                            returnKeyType="next" onSubmitEditing={() => this.refs.r5Ref.focus()}></TextInput>
                    </View>
                    <View style={SetStyle.rView}>
                        <Text style={SetStyle.rText}>Rate5</Text>
                        <TextInput style={SetStyle.rInput} keyboardType='numeric'
                            ref={r5Ref => this.r5Ref = r5Ref}></TextInput>
                    </View>
                </View>

            </ScrollView>
            </View>
        );
    }
}

I am getting following error :

Undefined is not an object (evaluating this2.refs.r2Refs.focus)

Answer 1

I solved the problem by removing createRef() from the constructor and removing ref from onSubmitEditing

Then I wrote the following way:

<TextInput ref={r2Ref => this.r2Ref = r2Ref}></TextInput>

and used it the following way:

<TextInput onSubmitEditing={() => this.r2Ref.focus()}></TextInput>