KeyboardAvoidingView not working on first load after a reload it working fine

[SourabhKmrSingh]

Describe the bug While using KeyboardAvoidingView at first load TextInput is like not going up but after I reload the application it working fine.

Code snippet Add your code snippet where error has been occurred. `
const behaviors = ["padding", "height", "position"]; const [behavior, setBehavior] = useState(behaviors[2]); const [isPackageImplementation, setPackageImplementation] = useState(true);

useEffect(() => {
        navigation.setOptions({
          headerRight: () => (
            <View style={styles.row}>
              <Text
                style={styles.header}
                onPress={() => setPackageImplementation((value) => !value)}
              >
                {isPackageImplementation ? "Package" : "RN"}
              </Text>
              <Text
                style={styles.header}
                onPress={() => {
                  const index = behaviors.indexOf(behavior);
                  setBehavior(
                    behaviors[index === behaviors.length - 1 ? 0 : index + 1],
                  );
                }}
              >
                {behavior}
              </Text>
            </View>
          ),
        });
      }, [isPackageImplementation, behavior]);

      const Container = isPackageImplementation
        ? KeyboardAvoidingView
        : RNKeyboardAvoidingView;

return (
<Container
            behavior={behavior}
            contentContainerStyle={{flex: 1}}
            enabled={true}
            keyboardVerticalOffset={-(keyboardOffSet(windowHeight))}
            style={{ flex: 1, backgroundColor: colors.background }}
        >
            <View style={styles.header}>
            <Image source={Images.logo} style={styles.headerLogo} />
            </View>
            <View style={styles.mainContainer}>
            <View style={styles.titleContainer}>
                <Text style={styles.title}>Login here</Text>
                <Text style={styles.subtitle}>Login to continue using the app</Text>
            </View>
            <View style={styles.textInputContainer}>
                <Text style={styles.label}>Email</Text>
                <TextInput
                style={styles.input}
                value={inputs.email}
                onChangeText={text => {
                    handleOnchange(text, 'email');
                }}
                />
                <Text style={styles.label}>Password</Text>
                <TextInput
                secureTextEntry={true}
                style={styles.input}
                value={inputs.password}
                onChangeText={text => {
                    handleOnchange(text, 'password');
                }}
                />
            </View>
            <TouchableOpacity style={styles.forgetPasswordCont}>
                <Text style={styles.forgetPasswordText}>Forgot Password?</Text>
            </TouchableOpacity>
            {isLoading ? (
                <TouchableOpacity style={styles.button}>
                    <ActivityIndicator size={'small'} color={"#fff"} />
                </TouchableOpacity>
            ) : (
                <TouchableOpacity style={styles.button} onPress={()=>{handleLogin()}}>
                    <Text style={styles.buttonText}>Sign in</Text>
                </TouchableOpacity>
            )}

            <View style={styles.footerTextContainer}>
                <Text style={styles.footerText}>Don't have an account?</Text>
                <TouchableOpacity
                style={styles.footerAction}
                onPress={() => {
                    navigator.navigate('Register');
                }}
                >
                <Text style={styles.footerActionText}>Sign up</Text>
                </TouchableOpacity>
            </View>
            </View>
        </Container>
)

` Expected behavior Should Work Without reloading the app.

Smartphone (please complete the following information):

• Desktop OS: Windows 10
• Device: Android 13
• OS: 13
• RN version: 0.72.1
• RN architecture: fabric
• JS engine: Hermes
• Library version: 1.12.4

[kirillzyusko]

Hey @SourabhKmrSingh

Can you add more details, please? Are you building release app variant? How do you reload the app? Is it just reloading JS or you kill the app?

Can you share adb logs?

[SourabhKmrSingh]

I am just reloading the JS just by pressing r

I am attaching the adb logs

logcat.txt

[kirillzyusko]

@SourabhKmrSingh were you setting a focus to the input during a run? I don't see any logs from keyboard-controller library...

[kirillzyusko]

Also recommended library version for RN 0.72 + Fabric is 1.9.0 🤔 I haven't tested compatibility of 1.12.4 with RN 0.72

[SourabhKmrSingh]

No I am not setting focus, Also I changed library version to 1.9.0 but now it not working even after reload

[kirillzyusko]

@SourabhKmrSingh okay, can you try to set focus and record logs again? BTW does the problem exist in release builds?

Maybe you can provide a minimal reproduction example (a full project, not just a code snippet)?

[SourabhKmrSingh]

ok I think i found something, i played around with the value of keyboardVerticalOffset like by putting the value in negative i am getting the result that i want and it working without the need of reload in version 1.9.0 I think I will test this more. Anyway thankyou for responding quickly.

[kirillzyusko]

@SourabhKmrSingh okay, thank you for the update. Glad you finally managed to fix the problem and shared you solution! Thank you! 🙌