React Native - предупреждение useRef для компонентов функции

Question

У меня есть простой функциональный компонент, который должен использовать входные ссылки для правильной настройки отправки:

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>
  )
}

Проблема в том, что использование ref с новым API-интерфейсом Hooks по-прежнему выдает предупреждение:

Предупреждение: Функциональные компоненты не могут быть указаны как ссылки. Попытки доступа этот реф не получится. Вы хотели использовать React.forwardRef ()?

Я не хочу использовать классы. Пробовал использовать "forwardRef" и предупреждение все еще там:

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>
  )
}

Что я делаю не так?

Answer 1

Можно попробовать

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

export default function Login() {
  let usernameRef = React.createRef();
  let passwordRef = React.createRef();

  return (
    <View>
      <TextInput ref={usernameRef} onNextField={() => passwordRef.current.focus()} />
      <TextInput ref={passwordRef} />
    </View>
  )
}