Nativebase: how to focus next Input onSubmitEditing using useRef

[theZulqarnain]

unable to focus next input when pressed enter.

const attNameRef = useRef(null);

<Input 
    getRef={input => {
       attNameRef= input;
    }}
   onSubmitEditing={() => {
       attNameRef._root.focus();
    }}
/>

undefined is not obj

how can I use onSubmitEditing with useRef?

[Mohammad-Khalid23]

  //use this function to focus on next field
  focusNextField = (id) => {
   this.inputs[id]._root.focus();
   }


      <Input
            keyboardType="email-address"
            name="email"
            onChangeText={(text) => this.setState({ email: text })}
            onSubmitEditing={() => {
              this.focusNextField('password');
            }}
            returnKeyType={"next"}
            ref={input => {
              this.inputs['email'] = input;
            }}
          />

          <Input
            name="password"
            onSubmitEditing={() => {
              this.loginSubmit()
            }}
            returnKeyType={"done"}
            ref={input => {
              this.inputs['password'] = input;
            }}
          />

[theZulqarnain]

@Mohammad-Khalid23 problem is that i'm using hooks so if I use * getRef* then its not storing in useRef variable then I'm unable to access that variable in focusNextField function.sorry for late replay!

[thehappydinoa]

I think I figured it out:

const passwordInput = useRef(null);

return (
<Container style={styles.container}>
      ...
      <Item rounded style={styles.input}>
        <Input
          onSubmitEditing={() => passwordInput.current._root.focus()}
          returnKeyType={'next'}
        />
      </Item>
      <Item rounded style={styles.input}>
        <Input
          ref={passwordInput}
        />
      </Item>
    ...
    </Container>
)

[hanykumar]

Hi @theZulqarnain , you can follow this Link, it should work.

[thehappydinoa]

@theZulqarnain You have to use ref.current._root with newer version of react-native

[jericopulvera]

I think I figured it out:

const passwordInput = useRef(null);

return (
<Container style={styles.container}>
      ...
      <Item rounded style={styles.input}>
        <Input
          onSubmitEditing={() => passwordInput.current._root.focus()}
          returnKeyType={'next'}
        />
      </Item>
      <Item rounded style={styles.input}>
        <Input
          ref={passwordInput}
        />
      </Item>
    ...
    </Container>
)

this did not work on me using

expo --version
3.20.9

[samipshah100]

working for me

[hanykumar]

I think I figured it out:

const passwordInput = useRef(null);

return (
<Container style={styles.container}>
      ...
      <Item rounded style={styles.input}>
        <Input
          onSubmitEditing={() => passwordInput.current._root.focus()}
          returnKeyType={'next'}
        />
      </Item>
      <Item rounded style={styles.input}>
        <Input
          ref={passwordInput}
        />
      </Item>
    ...
    </Container>
)

this did not work on me using

expo --version
3.20.9

Hi, @jericopulvera , what issue did you face using this code. Because it is working fine. Let us know the issue.

[erickh115]

I think I figured it out:

const passwordInput = useRef(null);

return (
<Container style={styles.container}>
      ...
      <Item rounded style={styles.input}>
        <Input
          onSubmitEditing={() => passwordInput.current._root.focus()}
          returnKeyType={'next'}
        />
      </Item>
      <Item rounded style={styles.input}>
        <Input
          ref={passwordInput}
        />
      </Item>
    ...
    </Container>
)

this did not work on me using
expo --version
3.20.9

Hi, @jericopulvera , what issue did you face using this code. Because it is working fine. Let us know the issue.

I have the same issue , .current is undefine

[quixote15]

I think I figured it out:

const passwordInput = useRef(null);

return (
<Container style={styles.container}>
      ...
      <Item rounded style={styles.input}>
        <Input
          onSubmitEditing={() => passwordInput.current._root.focus()}
          returnKeyType={'next'}
        />
      </Item>
      <Item rounded style={styles.input}>
        <Input
          ref={passwordInput}
        />
      </Item>
    ...
    </Container>
)

Worked like a charm !! The only solution that worked for me. Thanks!!