React Native - useRef warning on function components

Question

I have a simple function component that needs to use input refs in order to set correct focuses on submitting:

import React, { useRef } from 'react'
import { View, TextInput } from 'react-native'

export default function Login() {
  let usernameRef = useRef(null)
  let passwordRef = useRef(null)

  return (
    <View>
      <TextInput ref={usernameRef} />
      <TextInput ref={passwordRef} />
    </View>
  )
}

The problem is that using ref with new Hooks API still alerting a warn:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

I don't want to use classes. Tried using "forwardRef" and the warning still there:

import React, { createRef, forwardRef } from 'react'
import { View, TextInput } from 'react-native'

export default function Login() {
  let usernameRef = createRef()
  let passwordRef = createRef()
  const Input = forwardRef((props, ref) => (
    <TextInput ref={ref} {...props} />
  ))

  return (
    <View>
      <Input ref={usernameRef} />
      <Input ref={passwordRef} />
    </View>
  )
}

What I'm doing wrong?

Answer 1

It seems that unfortunately this is not yet supported on React Native ( link to Github issue ). That was on 2018, and it seems that by May 2019, it was still the same case.

If you are not running the latest version, you could try the latest version of React Native and see if it works, if anyone can confirm that.

Answer 2

I think I solved this problem see the below code

App.js file:

import Input from './component/Input.js'
export default ({navigation}) => {
  const inputEmail = useRef(null);
  const inputPassword = useRef(null);
 const updateRef = ref => {
    inputPassword.current = ref.current;
  };
return (
<View style={[signInScrStyle.container]}>
<Input
              placeholder={'Email Address'}
              onSubmitEditing={() => {
                inputPassword.current.focus();
              }}
              updateRef={e => {
                updateRef(e);
              }}
              ref={inputEmail}
            />
<Input
              placeholder={'Password'}
             onSubmitEditing={() => {
                inputEmail.current.focus();
              }}
              updateRef={e => {
                updateRef(e);
              }}
              ref={inputPassword}
            />
</View>
);
}

input.js file:

export const Input = props => {
  const myRef = useRef(null);

  useEffect(() => {
    console.log(myRef);
    props.updateRef(myRef);

    return () => {};
  }, []);

  return (
  <View style={style.txtInputContainer}>
<TextInput
        style={style.txtInput}
        // onChangeText={text => onChangeText(text)}
        numberOfLines={1}
        autoCorrect={false}
        autoCapitalize={'none'}
        placeholder={props.placeholder}
        placeholderTextColor={'#fff'}
        onSubmitEditing={() => {
          props.onSubmitEditing();
        }}
        ref={myRef}

      />
</View>
);
}

Answer 3

import React from 'react'
import { View, TextInput } from 'react-native'

const usernameRef = React.createRef();
const passwordRef = React.createRef();

export default function Login() {
  return (
    <View style={{flex: 1 , justifyContent: "center", alignItems: "center"}}>
      <TextInput ref={usernameRef} onSubmitEditing={() => passwordRef.current.focus()} placeholder="First" />
      <TextInput ref={passwordRef} placeholder="second" />
    </View>
  )
}

Snack here