title: focus next input field in functional component react native
body: <p>I've created a login page where it has 2 input fields (username, password). To generate those input fields i am using &quot;Input&quot; component from nativebase. Now i want to focus password field from username input field when user press next from keyboard. But i am having a hard time finding this solution, can anyone help me out with that? Here is my code:</p>
  <pre class="lang-js prettyprint-override"><code>//packages
  import React, { createRef, useContext, useEffect, useState } from 'react';
  import { Image, Keyboard, ScrollView, StyleSheet, Text, View } from 'react-native';
  import { AuthContext } from './context';
  
  
  // third pirty packages
  import { Button, Item, Input, Root, Spinner } from 'native-base';
  import FontAwesome from &quot;react-native-vector-icons/FontAwesome&quot;;
  import Feather from &quot;react-native-vector-icons/Feather&quot;;
  import {
    widthPercentageToDP as wp,
    heightPercentageToDP as hp,
    listenOrientationChange as lor,
    removeOrientationListener as rol
  } from 'react-native-responsive-screen';
  
  
  //assets and components
  import logoImageSmall from './../android/app/src/main/res/drawable/logo_small.png';
  
  
  export const LoginScreen = ({ route, navigation }) =&gt; {
  
    const [site_url, setSiteUrl] = useState(route.params.site_url);
    const [database_name, setDatabaseName] = useState(route.params.database_name);
    const [institute_name, setInstituteName] = useState(route.params.institute_name);
    const [logo_location, setLogoLocation] = useState(route.params.logo_location);
    const [student_id, setStudentId] = useState('');
    const [password, setPassword] = useState('');
    const [showLogo, setShowLogo] = useState(true);
  
    const { state, signInAction } = useContext(AuthContext);
    let passwordRef = React.createRef();
  
    useEffect(() =&gt; {
      lor();
  
      const keyboardDidShowListener = Keyboard.addListener(
        'keyboardDidShow',
        () =&gt; {
          _keyboardDidShow();
        }
      );
      const keyboardDidHideListener = Keyboard.addListener(
        'keyboardDidHide',
        () =&gt; {
          _keyboardDidHide();
        }
      );
  
      return () =&gt; {
        rol();
  
        keyboardDidHideListener.remove();
        keyboardDidShowListener.remove();
      };
    }, []);
  
    let _keyboardDidHide = () =&gt; {
      setShowLogo(true);
    }
  
    let _keyboardDidShow = () =&gt; {
      setShowLogo(false);
    }
  
    const styles = StyleSheet.create({
          ............
      // my styles
          ............
    });
  
    return (
      &lt;Root&gt;
        &lt;ScrollView contentContainerStyle={styles.loginForm} keyboardShouldPersistTaps=&quot;handled&quot;&gt;
          &lt;Item rounded style={{ borderColor: &quot;#FF3C48&quot; }}&gt;
            &lt;FontAwesome name='user' style={styles.iconStyle} /&gt;
  
            &lt;Input
              style={{ marginLeft: hp(&quot;3%&quot;) }}
              placeholder='Username'
              onChangeText={student_id =&gt; setStudentId(student_id)}
              returnKeyType={&quot;next&quot;}
              blurOnSubmit={false}
              onSubmitEditing={el =&gt; passwordRef.current = el}
              onFocus={() =&gt; setShowLogo(false)} /&gt;
          &lt;/Item&gt;
  
          &lt;Item rounded style={{ borderColor: &quot;#FF3C48&quot;, marginTop: hp(&quot;3%&quot;) }}&gt;
            &lt;FontAwesome name='unlock' style={styles.iconStyle} /&gt;
  
            &lt;Input
              ref={passwordRef}
              style={{ marginLeft: hp(&quot;3%&quot;) }}
              secureTextEntry={true}
              placeholder='Password'
              onChangeText={password =&gt; setPassword(password)}
              returnKeyType={&quot;done&quot;}
              onFocus={() =&gt; setShowLogo(false)} /&gt;
          &lt;/Item&gt;
  
          &lt;Button full danger
            style={{ marginTop: hp(&quot;3%&quot;) }}
            onPress={() =&gt; {
              // check App.js for further process
              signInAction({ student_id, password, site_url, database_name });
            }}&gt;
            {state.sendingRequest ? (&lt;Spinner color='white' /&gt;) : (&lt;Text style={{ color: '#ffffff', fontWeight: 'bold', width: '100%', textAlign: 'center', fontSize: hp(&quot;2.8%&quot;) }}&gt; LOGIN &lt;/Text&gt;)}
          &lt;/Button&gt;
  
        &lt;/ScrollView&gt;
      &lt;/Root&gt;
    )
  }
  </code></pre>