score:2

Accepted answer

tl. dr. Change the declaration from
const PasscodeTextInput = ({ ref, autoFocus, onSubmitEditing, onChangeText, value}) => {
To:
const PasscodeTextInput = React.forwardRef(({autoFocus, onSubmitEditing, onChangeText, value}, ref) => {
And don't forget to close the new parenthesis

Explanation:
ref is not a normal prop which is handled down to your component. When using the ref prop, react internals will handle that prop, try to get a reference to the actual instance of your component and set it there, and the prop never arrives to your actual component code.
Since your PasswordTextInput component is defined as a function, there is no instace of it so you get null.

What you want to do is forward the ref down to the TextInput component. So you explicitly say to react to please give you the ref prop so you can handle it however you think it suits you. Which in this case is forwarding it to the TextInput component.

For more info see https://reactjs.org/docs/forwarding-refs.html

score:0

May be you can try using custom attributes in JSX.

attribute operator:

let autofocus= {'attribute ': 'value'}

to render:

   {...autofocus}

for example;

Stateful component:

 ......
    <Input
     isAutofocus={true}
     tabindex="1"
    ........
    />

Stateless component:

import React from "react";
const Input = ({isAutofocus,tabindex  .......}) => {
  let autofocus = isAutofocus ? {'autoFocus' : " "}  : ""
  return (
    <div className="form-group">
      <label htmlFor={name}>{label}</label>
      <input
        {...autofocus}
       tabIndex={tabindex}
        ............
      />
    </div>
   )
}
export default Input;

Related Query

More Query from same tag