Skip to content

KeyboardChatScrollView content is hidden behind keyboard when used with refreshControl #1396

@NepeinAV

Description

@NepeinAV

Describe the bug

When the KeyboardChatScrollView component has a refreshControl prop, the bottom indentation of the content is missing when the keyboard is opened.

Code snippet

<KeyboardChatScrollView
  ref={scrollViewRef}
  style={styles.messages}
  contentContainerStyle={styles.content}
  refreshControl={<RefreshControl refreshing={false} />}
  keyboardShouldPersistTaps="handled">
  {...}
</KeyboardChatScrollView>

<KeyboardStickyView>
  <View style={styles.composerContainer}>
    <TextInput
      placeholder="Введите сообщение"
      style={styles.input}
      value={value}
      onChangeText={setValue}
      onSubmitEditing={handleSend}
      returnKeyType="send"
    />
    <Pressable style={styles.sendButton} onPress={handleSend}>
      <Text style={styles.sendButtonText}>Send</Text>
    </Pressable>
  </View>
</KeyboardStickyView>

Repo for reproducing
https://github.com/NepeinAV/ChatIsolation

To Reproduce
Steps to reproduce the behavior:

  1. Add refreshControl prop to KeyboardChatScrollView
  2. Tap the input field to open the keyboard.
  3. Observe that content of KeyboardChatScrollView is behind of keyboard

Expected behavior

The contents of the KeyboardChatScrollView should be above the keyboard

Screenshots

Screen.Recording.2026-03-23.at.23.37.33.mp4

Smartphone (please complete the following information):

  • Desktop OS: MacOS 26.3
  • Device: Pixel 9 emulator
  • OS: Android 15
  • RN version: 0.83.1
  • RN architecture: new
  • JS engine: Hermes
  • Library version: 1.21.2

Metadata

Metadata

Assignees

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions