KeyboardAvoidingView not working on iOS with react navigation header and material bottom tabs?

Question

Update for 2023

The bug is back. I reported it here.

I tested all known fixes and they do not work currently.

Follow these simple steps to reproduce:

• npx expo init <yourReproNameHere>
• `Use the "tabs" template
• Fill any of the two screens with anything (I used <Button/>)
• Add a <TextInput> at the end of the screen
• --> The keyboard hides the <TextInput> and <KeyboardAvoidingView> will not fix it

This old image still shows the bug

[Old Bug which is solved]

Answer 1

I create a wrapping component like this and pass the offset from the screen so that it gets the current context.

import React from 'react'

import { ViewStyle } from 'react-native'

import { KeyboardAvoidingView, Platform, ScrollView } from 'react-native'

type Props = {
    children: any
    keyboardVerticalOffset?: number
    contentContainerStyle?: ViewStyle
}

export default function KeyboardWrapper({
    children,
    keyboardVerticalOffset,
    ...rest
}: Props): JSX.Element {
    return (
        <KeyboardAvoidingView
            style={{ flex: 1 }}
            keyboardVerticalOffset={keyboardVerticalOffset}
            {...(Platform.OS === 'ios' ? { behavior: 'padding' } : {})}>
            <ScrollView
                bounces={false}
                showsVerticalScrollIndicator={false}
                {...rest}>
                {children}
            </ScrollView>
        </KeyboardAvoidingView>
    )
}

Usage in the screen

If you have any sticky elements like topbar or bottom bar you need to add the height so that the keyboard adds the offset correctly.

import { useHeaderHeight } from '@react-navigation/elements'

const height = useHeaderHeight()

<KeyboardWrapper
    keyboardVerticalOffset={height}
    contentContainerStyle={{ flex: 1 }}>
    // ... your elements
</KeyboardWrapper>

This is a working demo https://snack.expo.dev/@raajnadar/fix-keyboardavoidingview-not-working

Answer 2

There is no need to add 64 to the headerHeight. Here is how I would solve this problem.

const flatListRef = createRef()
const [data, setData] = useState()
const headerHeight = useHeaderHeight();

<View style={{ flex: 1 }}>
        <KeyboardAvoidingView
          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
          keyboardVerticalOffset={headerHeight}
          style={{ flex: 1 }}>
          <FlatList
            data={data}
            ref={flatListRef}
            onContentSizeChange={() =>
              flatListRef.current.scrollToEnd({ animated: true })
            }
            onLayout={() => flatListRef.current.scrollToEnd({ animated: true })}
            keyExtractor={(item) => item.id}
            renderItem={({ item }) => (
              <Text style={{ flex: 1, paddingVertical: 20 }}>{item.id}</Text>
            )}
          />
          <View style={{ flex: 1, marginBottom: 40 }}>
            <TextInput
              style={{
                backgroundColor: '#2E2E2E',
                width: '100%',
                borderRadius: 18,
                height: 36,
                paddingLeft: 10,
                paddingRight: 10,
                color: '#FFFFFF',
              }}
            />
          </View>
        </KeyboardAvoidingView>
      </View>

Here is a quick and dirty snack which contains an header from a StackNavigator.