KeyboardAvoidingView keyboardVerticalOffset Inconsistent Across Screens

[ErenKrt]

Describe the bug
I'm using KeyboardAvoidingView with keyboardVerticalOffset to adjust the position of a bottom button when the keyboard is shown.
However, even though I'm using the same offset value on two different screens, the button positions differ significantly between them when the keyboard is open.
I expected consistent behavior across screens since the layout structure is similar.
This issue occurs on both iOS and Android.

Repo for reproducing
Example Repo

Screenshots

[shtefanilie]

Hi, i'm experiencing a very similar issue on my app too, using KAV. I've thought initially it was related to the components i have, but I've isolated the KAV with vanilla RN components, and this is still happening.

I've checked the docs, and it seems I need to add a keyboardVerticalOffset, and you suggest using useHeaderHeight.
Trouble is that I am using expo-router, which I know is based on react-navigation, and I can't figure out how to get hold of that hook.
Any suggestions?

Code:

import React, { useState } from 'react';
import { Platform, View, TextInput, TouchableOpacity, Text, StyleSheet } from 'react-native';
import { KeyboardAvoidingView } from 'react-native-keyboard-controller';

export default function KavScreen() {
  const [inputValue, setInputValue] = useState('');

  const handleButtonPress = () => {
    console.log('Button pressed with value:', inputValue);
  };

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'android' ? 'padding' : 'height'}
      style={styles.container}
    >
      <View style={styles.content}>
        <TextInput
          style={styles.textInput}
          placeholder="Enter some text..."
          placeholderTextColor="#999"
          value={inputValue}
          onChangeText={setInputValue}
          autoFocus
        />
      </View>

      <View style={styles.footerContainer}>
        <TouchableOpacity
          style={[styles.button, !inputValue.length && styles.buttonDisabled]}
          onPress={handleButtonPress}
          disabled={!inputValue.length}
        >
          <Text style={[styles.buttonText, !inputValue.length && styles.buttonTextDisabled]}>
            Submit
          </Text>
        </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F5F5',
  },
  content: {
    flex: 1,
    padding: 8,
  },
  textInput: {
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    padding: 16,
    fontSize: 16,
    color: '#000000',
    borderWidth: 1,
    borderColor: '#E0E0E0',
  },
  footerContainer: {
    marginBottom: Platform.OS === 'android' ? 8 : 0,
    padding: 8,
  },
  button: {
    backgroundColor: 'red',
    padding: 16,
    borderRadius: 12,
    alignItems: 'center' as const,
  },
  buttonDisabled: {
    backgroundColor: 'gray',
  },
  buttonText: {
    color: 'white',
    fontWeight: '600' as const,
    fontSize: 16,
  },
  buttonTextDisabled: {
    color: 'white',
  },
});

screen-20250602-163907.mov

[kirillzyusko]

I've checked the docs, and it seems I need to add a keyboardVerticalOffset, and you suggest using useHeaderHeight.
Trouble is that I am using expo-router, which I know is based on react-navigation, and I can't figure out how to get hold of that hook.
Any suggestions?

@shtefanilie Can you try simply install @react-navigation/elements and use that hook from there? I strongly believe it should work with expo-router too 🙂

[kirillzyusko]

@ErenKrt I ran your example and from what I can see you are hardcoding keyboardVerticalOffset. Instead it should be a dynamic one - the way how it's getting calculated can be found at https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-avoiding-view#keyboardverticaloffset

If I use this code:

  const { bottom, top } = useSafeAreaInsets();
  const { isVisible } = useKeyboardState();

  const bottomMargin = bottom + 24;

  const h = useHeaderHeight();

  console.log(Platform.OS, h);

  return (
    <KeyboardAvoidingView
      style={[styles.page, { backgroundColor: "red" }]}
      behavior="padding"
      keyboardVerticalOffset={h}
      enabled={true}
    >

Then it works identical on both iOS/Android:

iOS	Android

However after second re-render Android reports header height as 123 (on first render it was 56), and looking at screenshots it's obviously incorrect result (the actual height should be somewhere in 56). I don't know, maybe it's a bug in your code, maybe in react-navigation, maybe in react-native-screens, but it's clear that KeyboardAvoidingView works properly if you specify correct offsets 😊

[ErenKrt]

Hi, the issue was caused by a missing headerHeight value. After some testing, we confirmed that the problem stemmed from an incorrect headerHeight being returned on the Android side for some unknown reason.
To resolve this, I used the useHeaderHeight hook from react-navigation for iOS, and implemented a custom hook specifically for Android. Everything is now working as expected.