title: Progressively focus TextInput react native
body: <p>I am currently creating a 4 digit otp (one time password) view for a react native app and i need the TextInput to progressively focus when i type a number on the previous input. </p>
  
  <p>I have been able to make the style change (without focus) but the focus doesn't change with it and when i enter another digit the app crashes. </p>
  
  <p>I want it such that when i type in on the first input, the focus move to the next TextInput and so on and on the last input, it focuses on submit.</p>
  
  <p>How do i go about this?</p>
  
  <p>Below is my code</p>
  
  <p><strong>the component</strong></p>
  
  <pre><code>import React, { useState, useEffect } from 'react';
  import { StyleSheet, Text, ScrollView, View, Alert, Image } from 'react-native';
  import { SimpleLinearGradientButton } from '../../components/Buttons';
  import { SimpleCard } from '../../components/Cards';
  
  export default function(props) {
    const [otp, setOtp] = useState([]);
    const [isFocused, setIsFocused] = useState({ focused: true, index: 0 });
  
    const inputs = Array(4).fill(0);
  
   function renderInputs() {
      return inputs.map((input, index) =&gt; {
        return (
          &lt;TextInput
            style={
              isFocused.focused &amp;&amp; index === isFocused.index
                ? styles.inputFieldsFocused
                : styles.inputFields
            }
            key={index}
            keyboardType={'numeric'}
            onChange={focus}
          &gt;&lt;/TextInput&gt;
        );
      });
    }
  
    function focus(e) {
      setOtp(otp.concat(this.value));
      setIsFocused({ focused: true, index: isFocused.index + 1 });
      isFocused.index ? e.focus() : null;
    }
  
    return (
      &lt;ScrollView contentContainerStyle={styles.content}&gt;
        &lt;View&gt;
          &lt;Image
            style={styles.image}
            source={require('../../../assets/images/verification.png')}
          /&gt;
        &lt;/View&gt;
        &lt;View&gt;
          &lt;Text&gt;Verification&lt;/Text&gt;
          &lt;Text&gt;
            Enter the 4 digit sent to your email address
          &lt;/Text&gt;
        &lt;/View&gt;
        &lt;View&gt;
          &lt;SimpleCard&gt;
            &lt;&gt;{renderInputs()}&lt;/&gt;
          &lt;/SimpleCard&gt;
          &lt;SimpleLinearGradientButton
                title="Submit"
              /&gt;
            &lt;/View&gt;
          &lt;/ScrollView&gt;
        );
      }
  </code></pre>
  
  <p>The focus function was meant to focus the next input at that index but this doesn't seem to work but the style changes. How do i go about this? Thanks</p>