Skip to content

KeyboardChatScrollView content jumps on keyboard open when used with maintainVisibleContentPosition inside TabNavigator #1397

@NepeinAV

Description

@NepeinAV

Describe the bug

When the KeyboardChatScrollView component has maintainVisibleContentPosition prop and is used inside TabNavigator (react-navigation), its content jumps when the keyboard opens.

Code snippet

// Navigator
<NavigationContainer>
  <Tab.Navigator
    screenOptions={{
      headerShown: false,
      tabBarHideOnKeyboard: true,
    }}>
    <Tab.Screen
      name="Chat"
      component={ChatScreen}
      options={{ tabBarLabel: 'Chat' }}
    />
  </Tab.Navigator>
</NavigationContainer>

// ChatScreen
<KeyboardChatScrollView
  ref={scrollViewRef}
  style={styles.messages}
  contentContainerStyle={styles.content}
  maintainVisibleContentPosition={{ minIndexForVisible: 0, autoscrollToTopThreshold: 10 }}
  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 maintainVisibleContentPosition prop to KeyboardChatScrollView
  2. Tap the input field to open the keyboard.
  3. Observe that content of KeyboardChatScrollView jumps unexpectedly

Expected behavior

The content inside KeyboardChatScrollView should keep a stable position and should not jump when used with maintainVisibleContentPosition inside TabNavigator.

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

Labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions