CODEWITHSUNDEEP
reactjsreact-nativetextinput
Neha
Neha

Reputation: 185

unable to create ref in react-native

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)

Upvotes: 0

Views: 10464

Answers (4)

Madhu
Madhu

Reputation: 929

In case if you are using Type Script. I have achieved with below code for implementing OTP.

 import {
   SafeAreaView,
   StyleSheet,
   Text,
   View,
   TouchableOpacity,
   TextInput
 } from 'react-native';

class OtpScreen extends React.Component<IProps, State> {

  input1Ref: React.RefObject<TextInput>;
  input2Ref : React.RefObject<TextInput>;
  input3Ref : React.RefObject<TextInput>;
  input4Ref : React.RefObject<TextInput>;
  input5Ref : React.RefObject<TextInput>;
  input6Ref : React.RefObject<TextInput>;

  constructor(props: any) {
    super(props);
    this.input1Ref = React.createRef();
    this.input2Ref = React.createRef();
    this.input3Ref = React.createRef();
    this.input4Ref = React.createRef();
    this.input5Ref = React.createRef();
    this.input6Ref = React.createRef();
  }

  render() {
     return (
      <SafeAreaView style={Styles.container}>
        <View style={Styles.otpInputContainer}>
        <InputField
          nameRef={this.input1Ref}
          value={this.state.otpFirstNumber}
          onChangeText={(value: any) => {
            this.setState({ otpFirstNumber: value });
            this.input2Ref.current?.focus()
          }}
        />
        <InputField
          nameRef={this.input2Ref}
          value={this.state.otpSecondNumber}
          onChangeText={(value: any) => {
            this.setState({ otpSecondNumber: value });
            this.input3Ref.current?.focus()
          }}
        />
        <InputField
          nameRef={this.input3Ref}
          value={this.state.otpThirdNumber}
          onChangeText={(value: any) => {
            this.setState({ otpThirdNumber: value });
            this.input4Ref.current?.focus()
          }}            />
        <InputField
          nameRef={this.input4Ref}
          value={this.state.otpFourthNumber}
          onChangeText={(value: any) => {
            this.setState({ otpFourthNumber: value });
            this.input5Ref.current?.focus()
          }}          
            />
        <InputField
          nameRef={this.input5Ref}
          value={this.state.otpFifthNumber}
          onChangeText={(value: any) => {
            this.setState({ otpFifthNumber: value });
            this.input6Ref.current?.focus()
          }}               />
        <InputField
          nameRef={this.input6Ref}
          value={this.state.otpFifthNumber}
          onChangeText={(number: number) => this.inputNumber(number, 6)}
        />
       </View>
      </SafeAreaView>

Upvotes: 0

kalyan711987
kalyan711987

Reputation: 476

//Initialise  
this.fieldOne = React.createRef();


<TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Email"
               ref={this.fieldOne}
               onChangeText = {this.xxxxx} />

//To set focus
this.fieldOne.current.focus();

Above code is working for me. Hope, it will hep someone

Upvotes: 1

Neha
Neha

Reputation: 185

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>

Upvotes: 0

ManavM
ManavM

Reputation: 3108

The problem here is that you are mixing Callback Refs with the createRef API. Also you are accessing them wrong. Once you have defined them as variables, you need to use said variables instead.

What you need to do is something like:

class Component extends React.Component {
  r2Ref = React.createRef();

  render() {
    return <Input name="r2" ref={this.r2Ref} />
  }
}

Upvotes: 2

Related Questions