focus next input field in functional component react native - react-native

Question

I've created a login page where it has 2 input fields (username, password). To generate those input fields i am using "Input" 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:
//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 "react-native-vector-icons/FontAwesome";
import Feather from "react-native-vector-icons/Feather";
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 }) => {
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(() => {
lor();
const keyboardDidShowListener = Keyboard.addListener(
'keyboardDidShow',
() => {
_keyboardDidShow();
}
);
const keyboardDidHideListener = Keyboard.addListener(
'keyboardDidHide',
() => {
_keyboardDidHide();
}
);
return () => {
rol();
keyboardDidHideListener.remove();
keyboardDidShowListener.remove();
};
}, []);
let _keyboardDidHide = () => {
setShowLogo(true);
}
let _keyboardDidShow = () => {
setShowLogo(false);
}
const styles = StyleSheet.create({
............
// my styles
............
});
return (
<Root>
<ScrollView contentContainerStyle={styles.loginForm} keyboardShouldPersistTaps="handled">
<Item rounded style={{ borderColor: "#FF3C48" }}>
<FontAwesome name='user' style={styles.iconStyle} />
<Input
style={{ marginLeft: hp("3%") }}
placeholder='Username'
onChangeText={student_id => setStudentId(student_id)}
returnKeyType={"next"}
blurOnSubmit={false}
onSubmitEditing={el => passwordRef.current = el}
onFocus={() => setShowLogo(false)} />
</Item>
<Item rounded style={{ borderColor: "#FF3C48", marginTop: hp("3%") }}>
<FontAwesome name='unlock' style={styles.iconStyle} />
<Input
ref={passwordRef}
style={{ marginLeft: hp("3%") }}
secureTextEntry={true}
placeholder='Password'
onChangeText={password => setPassword(password)}
returnKeyType={"done"}
onFocus={() => setShowLogo(false)} />
</Item>
<Button full danger
style={{ marginTop: hp("3%") }}
onPress={() => {
// check App.js for further process
signInAction({ student_id, password, site_url, database_name });
}}>
{state.sendingRequest ? (<Spinner color='white' />) : (<Text style={{ color: '#ffffff', fontWeight: 'bold', width: '100%', textAlign: 'center', fontSize: hp("2.8%") }}> LOGIN </Text>)}
</Button>
</ScrollView>
</Root>
)
}

Answer 1

Use this passwordRef.current.focus()