title: How to get dynamic ref and focus in TextInput component on React Native
body: <p>Hello everyone and thank you in advance.</p>
  <p>I have a screen, where I dynamically generate TextInput (the default number of generated textInput is 4), but from the parent component you can indicate how many inputs you want to have in the view.</p>
  <p>I have managed to dynamize the generation of inputs, but I need to dynamize the references and I can't find a way.</p>
  <p>The way it is at the moment, it works perfect for 4 inputs, but if I create it from the parent component with 2 inputs, it breaks.</p>
  <p>This is the code:</p>
  <pre><code>import React, { useRef } from 'react'
  import { TextInputProps, View, TextInput } from 'react-native'
  
  interface iPinCode extends TextInputProps {
    onComplete: (code: string) =&gt; void
    length?: number
  }
  
  const PinCode: React.FunctionComponent&lt;iPinCode&gt; = ({ onComplete, length }) =&gt; {
    
    const inputStyle = {
      height: 75,
      width: 50,
      fontSize: 26,
      color: '#FFF',
      backgroundColor: '#4B4B4B',
      borderRadius: 15,
      padding: 8,
      margin: 4,
    }
    
    const _getInputs = (length: number) =&gt; {
      let inputs: JSX.Element[] = []
      
      let pin: string[] = []
  
      let refFirstInput = useRef()
      let refSecondInput = useRef()
      let refThirdInput = useRef()
      let refFourthInput = useRef()
      
      for (let i = 0; i &lt; length; i++) {      
        inputs.push(
          &lt;TextInput
            key={i}
            style={[inputStyle, { textAlign: 'center' }]}
            onChangeText={text =&gt; {
              text.length &gt;= 1 ? pin.splice(i, 0, text) : pin.splice(i, 1)
              i === 0
                ? text.length &gt; 0 &amp;&amp; refSecondInput.current.focus()
                : i === 1
                ? text.length &gt; 0 &amp;&amp; refThirdInput.current.focus()
                : i === 2
                &amp;&amp; text.length &gt; 0 &amp;&amp; refFourthInput.current.focus()
                
              console.log('PIN: ', pin)
            }}
            value={pin[i]}
            onKeyPress={({ nativeEvent }) =&gt; {
              nativeEvent.key === 'Backspace' &amp;&amp;
              i === 3 &amp;&amp; refThirdInput.current.focus() ||
              i === 2 &amp;&amp; refSecondInput.current.focus() ||
              i === 1 &amp;&amp; refFirstInput.current.focus()
          }}
            secureTextEntry
            keyboardType=&quot;numeric&quot;
            maxLength={1}
            returnKeyType={i === 3 ? 'done' : 'next'}
            onSubmitEditing={() =&gt; { onComplete(pin.join('')); console.log('PIN TO SEND: ', pin.join(''))}}
            ref={
              i === 0
                ? refFirstInput
                : i === 1
                ? refSecondInput
                : i === 2
                ? refThirdInput
                : i === 3
                &amp;&amp; refFourthInput
            }
            autoFocus={i === 0 &amp;&amp; true}
            /&gt;
        )
      }
  
      return (
        &lt;View style={{ flexDirection: 'row', justifyContent: 'center' }}&gt;
          {inputs}
        &lt;/View&gt;
      )
    }
  
    return &lt;&gt;{_getInputs(length || 4)}&lt;/&gt;
  }
  
  export default PinCode
  
  
  </code></pre>
  <p>Now works perfectly with 4 inputs, but breack with other number of inputs.</p>
  <p>Need dynamic refs to pass inside for loop and use it in onChangeText and onKeyPress of TextInput component.</p>
  <p>Thanks a lot.</p>