Empty space between navigator bar and TextInput after keyboard closed when using KeyboardAvoidingView on React Native

Question

I'm using KeyboardAvoidingView on React Native (expo). Everyhing is fine until keyboard closed and there's permanent empty space after keyboard closed. You can see screenshots below.

Code:

export default function ChatPage({ chatId, other, onBack }) {
  return (
    <>
       <KeyboardAvoidingView
          style={styles.container}
          behavior={Platform.select({ ios: 'padding', android: 'height' })}
        >
        {!loaded ? (
          <View style={{ paddingTop: 40 }}><ActivityIndicator color={COLORS.primary} /></View>
        ) : (
          <FlatList
            ref={listRef}
            onLayout={() => listRef.current.scrollToEnd({ animated: true })}
            data={messages}
            keyExtractor={(item) => item.id}
            renderItem={renderItem}
            onScroll={onScroll}
            keyboardShouldPersistTaps="always"
            ListFooterComponent={loadingOlder ? <ActivityIndicator color={COLORS.primary} style={{ marginVertical: 12 }} /> : null}
            onEndReached={onEndReached}
          />
        )}
        {otherTyping && (
          <View style={styles.typingRow}><Text style={styles.typingText}>Typing...</Text></View>
        )}
        <View style={[styles.inputBarWrap, { paddingBottom: 0 }]}>
          <MessageInput chatId={chatId} uid={uid} other={other} disabled={!chatId || !uid} />
        </View>
      </KeyboardAvoidingView>
    </>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: COLORS.backgroundDark },
  header: { paddingHorizontal: 12, paddingVertical: 10, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#1d1f24', flexDirection: 'row', alignItems: 'center', gap: 8 },
  backBtn: { paddingHorizontal: 4, paddingVertical: 4, marginRight: 2 },
  headerAvatar: { width: 34, height: 34, borderRadius: 17, marginRight: 6, backgroundColor: '#333' },
  headerTitle: { color: COLORS.textLight, fontSize: 18, fontWeight: '600', flexShrink: 1 },
  empty: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: COLORS.backgroundDark },
  emptyText: { color: COLORS.textSecondary },
  typingRow: { paddingHorizontal: 16, paddingVertical: 4 },
  typingText: { color: COLORS.textSecondary, fontStyle: 'italic', fontSize: 12 },
  inputBarWrap: { backgroundColor: COLORS.backgroundDark },
});

Screenshots:

State 1 (keyboard not opened): here

State 2 (keyboard opened and closed): here

please add a focused, answerable question to your post

jsotola
– jsotola

2025-11-10 03:40:02 +00:00
Commented Nov 10 at 3:40 — jsotola
– jsotola, Commented Nov 10 at 3:40

Jatin Bhuva · Accepted Answer · 2025-11-10 06:16:45Z

0

I think you are having an issue with Android devices.
I faced the same issue, and this works for me. Try it out

  import { useSafeAreaInsets } from 'react-native-safe-area-context';

  const insets = useSafeAreaInsets();

        <KeyboardAvoidingView
          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
          {...(Platform.OS === 'android'
            ? { keyboardVerticalOffset: keyboardOpen ? insets.top : -200 }
            : { keyboardVerticalOffset: insets.top })}
        >

answered Nov 10 at 6:16

Jatin Bhuva

1,9361 gold badge7 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

takeusback Nov 10 at 21:00

it's worked btw i set it like this { keyboardVerticalOffset: keyboardOpen ? (insets.top-28) : -40 } so when keyboard visible there's not much space between keyboard and input

Collectives™ on Stack Overflow

Empty space between navigator bar and TextInput after keyboard closed when using KeyboardAvoidingView on React Native

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related