Cannot apply current.focus() to button using useRef() in React Native

Question

What I'm trying to do in my app is for a login form.

When the user inputs something in a token input field:

      <Input
        secureTextEntry
        ref={token1}
        maxLength={1}
        onChange={(e) => this.tokenChange(e, token2)}
      />

And the function tokenChange is this:

tokenChange = (e, nextToken) => {
    if (nextToken) {
      if (nextToken.current) {
        if (e.target.value != '') {
          nextToken.current.focus();
        }
        setToken(token1.current.value + token2.current.value + token3.current.value + token4.current.value);
      }
    }
  }

The next input will be selected. Everything works fine, I apply useRef() to know which token I'm currently focusing on and I'm also trying to apply that to a Button element.

  const token1 = useRef();
  const token2 = useRef();
  const token3 = useRef();
  const token4 = useRef();
  const submitBtn = useRef();

The problem arises when I'm trying to focuse on the Button. I'm using ref={} in both, the inputs and the button, but I don't know what I'm doing incorrectly as I haven't found anything in the documentation. Just like the inputs, I'm linking the reference to the button like this:

  <Button
    raised
    title={tituloBtn}
    ref={submitBtn}
    onPress={() => onSubmit(email, password)}
  />

So, I'm running my app, I can pass from one input to another but when passing from the fourth token to the submit button, I get this error:

Here's the general code of my functional component:

const FormLogin = ({ titulo, tituloBtn, onSubmit, estadoApp }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [token, setToken] = useState('');

  const token1 = useRef();
  const token2 = useRef();
  const token3 = useRef();
  const token4 = useRef();
  const submitBtn = useRef();

  tokenChange = (e, nextToken) => {
    if (nextToken) {
      if (nextToken.current) {
        if (e.target.value != '') {
          nextToken.current.focus();
        }
        setToken(token1.current.value + token2.current.value + token3.current.value + token4.current.value);
      }
    }
  }

  return (
    <View style={estilos.contenedor}>
      <Text style={estilos.titulo} h3>{titulo}</Text>
      <Espaciador />
      <Input
        placeholder="correo@ejemplo.com"
        value={email}
        onChangeText={setEmail}
        keyboardType='email-address'
        autoCapitalize="none"
        autoFocus
        label="Ingresa tu correo"
        leftIcon={
          <MaterialIcons
            style={estilos.icon}
            name="email"
          />
        }
      />
      <Espaciador />
      <Input
        placeholder="******"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
        clearTextOnFocus
        autoCapitalize="none"
        label="Ingresa tu contraseña"
        leftIcon={
          <Ionicons
            style={[estilos.icon, {fontSize: 35}]}
            name="md-lock"
          />
        }
      />
      <View style={estilos.tokenGroup}>
        <Input
          style={estilos.token}
          secureTextEntry
          keyboardType='numeric'
          ref={token1}
          maxLength={1}
          onChange={(e) => this.tokenChange(e, token2)}
        />
        <Input
          style={estilos.token}
          secureTextEntry
          keyboardType='numeric'
          ref={token2}
          maxLength={1}
          onChange={(e) => this.tokenChange(e, token3)}
        />
        <Input
          style={estilos.token}
          secureTextEntry
          keyboardType='numeric'
          ref={token3}
          maxLength={1}
          onChange={(e) => this.tokenChange(e, token4)}
        />
        <Input
          style={estilos.token}
          secureTextEntry
          keyboardType='numeric'
          ref={token4}
          maxLength={1}
          onChange={(e) => this.tokenChange(e, submitBtn)}
        />
      </View>
      {estadoApp.errorMensaje
        ? <Text style={estilos.error}>{estadoApp.errorMensaje}</Text>
        : null}
      <Espaciador />
      <Button
        raised
        title={tituloBtn}
        ref={submitBtn}
        onPress={() => onSubmit(email, password)}
      />
    </View>
  );
};

Answer 1

Assuming you are using react-native-elements , the Button component has no focus method.

See the docs: https://react-native-elements.github.io/react-native-elements/docs/button.html

and the source: https://github.com/react-native-elements/react-native-elements/blob/next/src/buttons/Button.js

What behavior are you hoping to happen when calling focus on a button?