Using KeyboardAvoidingView with IOS causes Flickering whilst changing input

[cSieves]

Describe the bug
I have an input form with multiple inputs and I allow the user to hit enter to move to the next input box. When I do this on IOS the page jumps/flickers. I think this is because the suggestion box above the keyboard momentarily disappears.

Code snippet

        <KeyboardAvoidingView style={{flex: 1}} behavior={"padding"}>
            <ScrollView contentContainerStyle={styles.container}>
                <View style={{width: '70%'}}>
                    <Controller
                        control={control}
                        render={({field: {onChange, value}}) => (
                            <TextField
                                style={CreateAccountStyles.input}
                                ref={emailInputRef}
                                placeholder="Email"
                                placeholderTextColor='lightgrey'
                                onChangeText={onChange}
                                onBlur={() => handleBlur("email")}
                                value={value}
                                error={errors.email?.message}
                                returnKeyType="next"
                                keyboardType="email-address"
                                onSubmitEditing={() => passwordInputRef.current?.focus()}
                            />
                        )}
                        name="email"
                    />

                    <Controller
                        control={control}
                        render={({field: {onChange, value}}) => (
                            <TextField
                                style={CreateAccountStyles.input}
                                ref={passwordInputRef}
                                placeholder="Password"
                                placeholderTextColor='lightgrey'
                                clearsOnBeginEditing={false}
                                secureTextEntry={!showPassword}
                                onChangeText={onChange}
                                onBlur={() => handleBlur("password")}
                                value={value}
                                error={errors.password?.message}
                                returnKeyType="done"
                                onSubmitEditing={() => handleSubmit(handleLogin)}  // Focus next field (email)
                                renderRightAccessory={() => (
                                    Platform.OS !== "ios" ?
                                        <TouchableOpacity
                                            onPress={() => setShowPassword(!showPassword)}>
                                            <Ionicons
                                                size={24}
                                                name={!showPassword ? 'eye-off' : 'eye'}
                                                color="gray"
                                            />
                                        </TouchableOpacity>
                                        : <></>
                                )}
                            />
                        )}
                        name="password"
                    />
                </View>
            </ScrollView>
        </KeyboardAvoidingView>

Repo for reproducing
I would be highly appreciate if you can provide repository for reproducing your issue. It can significantly reduce the time for discovering and fixing the problem.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
Screen not to flicker.

Screenshots

ScreenRecording_06-18-2025.22-18-29_1.MP4

Smartphone (please complete the following information):

• Desktop OS: mac m3
• Device: iphone 13
• OS: IOS 18.5
• RN version: 0.76.2
• RN architecture: new
• JS engine: hermes
• Library version: 1.17.5

Additional context
Add any other context about the problem here.

[cSieves]

Correction on my original comment, I actually think this is caused by the keyboard temporarily closing whilst changing focus

[kirillzyusko]

So far looks very similar to #828

Basically it's not a problem of react-native-keyboard-controller, it's a problem of iOS because suggestion bar appears and disappears for a fraction of a second. Most likely "animated" resizes will fix the problem, because animation will not be able to complete in one frame, so the content will stay in place.

I think I need to make animated keyboard resizes only for KeyboardAvoidingView 🤔

[jondkinney]

I'm experiencing this as well with a sticky ActionBar component that I put above the keyboard. @kirillzyusko are there any props or styles we can use to adjust this behavior currently? Or is it something that will have to get addressed in the core library directly?

[kirillzyusko]

Hey @jondkinney

Could you show a video of how it looks in your app? Are you using KeyboardStickyView?

I think I had what's called "animated transitions" for that component on Android, and when you switch from QWERTY keyboard to numeric keyboard, then the animated transition looks really bad 😅 I will try to find some videos and will post here what I'm talking about

[jondkinney]

@kirillzyusko yep, here is what I'm seeing. I'm using KeyboardStickyView, yes.

CleanShot.2025-06-20.at.18.41.21.mp4

[Tiago-Dev]

@jondkinney @kirillzyusko This problem happens only in the password fields. What I noticed is that it might be related to the "Password" button that appears on the keyboard when it's a password field. But i didn't find a way to solve.

[davram88]

Having the same issue as the video posted above.

[kirillzyusko]

@jondkinney @Tiago-Dev @davram88 well, what I can do is to make "animated" resize transitions for KeyboardAvoidingView. Since this flash happens only for 1 frame, I'll run animation and then will cancel it in next frame, so technically you will not see a jump effect. Will it work for you?

Regarding KeyboardStickyView - I wouldn't like to re-use the same approach, because sometimes when keyboard resizes I need to make an instant transition, for example when I switch between numeric/qwerty keyboards.

Will it work for you guys if I add "animated resize" transitions to KeyboardAvoidingView?

[amakarevich11]

@kirillzyusko I have the same problem and I think these "animated resize" transitions will help, I change KeyboardAvoidingView for Animated.View for test purposes and it helps. It would be nice to have this fix for lib.

[Tiago-Dev]

@kirillzyusko for me, it sounds good. Without the flash, it solves my problem.

[amakarevich11]

@kirillzyusko Hi, is there any updates here? Are u planning to add this fix?