You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The screen jumps when one of the inputs has the secureTextEntry prop because the keyboard suggests passwords even when typing in a different input that doesn’t have secureTextEntry prop. This happens when focusing on an input placed before the one with secureTextEntry, and as you type, the password suggestion appears and disappears, causing the screen to jump.
secureTextEntry.mov
Steps to reproduce
As you can see in the code, username input doesn't have sceureTextEntry prop set and still suggests passwords above the keyboard, this suggestion appears and disappears as you type causing the app to jump, this only happens when focusing the input just before the one that has the secureTextProp set to true.
Description
The screen jumps when one of the inputs has the secureTextEntry prop because the keyboard suggests passwords even when typing in a different input that doesn’t have secureTextEntry prop. This happens when focusing on an input placed before the one with secureTextEntry, and as you type, the password suggestion appears and disappears, causing the screen to jump.
secureTextEntry.mov
Steps to reproduce
As you can see in the code, username input doesn't have sceureTextEntry prop set and still suggests passwords above the keyboard, this suggestion appears and disappears as you type causing the app to jump, this only happens when focusing the input just before the one that has the secureTextProp set to true.
`export default function HomeScreen() {
const passRef = useRef(null)
const usernameRef = useRef(null)
return (
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={styles.container}
>
Header
<TextInput
placeholder='Email'
keyboardType='email-address'
returnKeyType='next'
blurOnSubmit={false}
onSubmitEditing={() => usernameRef.current?.focus()}
style={styles.textInput}
/>
<TextInput
ref={usernameRef}
placeholder='Username'
returnKeyType='next'
blurOnSubmit={false}
onSubmitEditing={() => passRef.current?.focus()}
style={styles.textInput}
/>
<Button title='Submit' onPress={() => null} />
)
}`
React Native Version
0.74.5
Affected Platforms
Runtime - iOS
Output of
npx react-native infoStacktrace or Logs
Reproducer
https://github.com/avega99/SecureTextEntryJump
Screenshots and Videos
secureTextEntry.mov