I am using react-native-phone-input package for entering phone number. I want the password field below to open when the user presses the enter key on the keyboard after entering the phone number. There is no such method in the package. How can I do that? Can I just listen for the enter key when the keyboard is turned on and make it go to password input?
import { TextInput, View } from 'react-native';
import React, { useState } from 'react';
import PhoneInput from 'react-native-phone-input';
export default function SignUp({ navigation }) {
const [password, setPassword] = useState('');
const [phoneNumber, setPhoneNumber] = useState('');
return (
<View >
<PhoneInput
ref={ref => { phone = ref }}
onChangePhoneNumber={setPhoneNumber}
style={{ width: 150, height: 30, backgroundColor: 'grey' }}
/>
<TextInput
onChangeText={setPassword}
value={password}
style={{ width: 150, height: 30, backgroundColor: 'grey', marginTop: 20 }}
/>
</View >
);
}There is a prop in react-native-phone-input that should allow you to handle this as you would with a normal TextInput.
onPressConfirm
func none
handler to be called when taps the confirm button
Thus, you can define a state and use the onPressConfirm function prop to change this state. Then use conditional rendering to hide or show the password input.
import { TextInput, View } from 'react-native';
import React, { useState } from 'react';
import PhoneInput from 'react-native-phone-input';
export default function SignUp({ navigation }) {
const [password, setPassword] = useState('');
const [phoneNumber, setPhoneNumber] = useState('');
const [confirm, setConfirm] = useState(false)
return (
<View >
<PhoneInput
ref={ref => { phone = ref }}
onChangePhoneNumber={setPhoneNumber}
style={{ width: 150, height: 30, backgroundColor: 'grey' }}
onPressConfirm={() => setConfirm(true)}
/>
{ confirm &&
<TextInput
onChangeText={setPassword}
value={password}
style={{ width: 150, height: 30, backgroundColor: 'grey', marginTop: 20 }}
/>}
</View >
);
}