Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

KeyboardAwareScrollView keyboard offset not observing dynamic SectionList size for search results list #788

Open
trooperandz opened this issue Jan 29, 2025 · 1 comment
Assignees
Labels
KeyboardAwareScrollView 📜 Anything related to KeyboardAwareScrollView component

Comments

@trooperandz
Copy link

trooperandz commented Jan 29, 2025

Describe the bug
When using KeyboardAwareScrollView for a dynamic-length SectionList, part of the scrollable list area stays behind the keyboard initially on iOS. Upon dismissing the keyboard and bringing it back again, it correctly observes the offset for the dynamic list (including subsequent list searches with dynamic-length content). On Android, the list is not scrollable until the keyboard is first dismissed and then revealed again (and same problem with the scroll offset).

Code snippet

import { SectionList, View } from "react-native";
import React from "react";
import { KeyboardAwareScrollView } from "react-native-keyboard-controller";

import { SearchInput } from "components";

export const SearchList = () => {
  const [data, setData] = React.useState(null);

  return (
    <View style={{ flex: 1 }}>
      <SearchInput />
      <SectionList
        keyboardShouldPersistTaps="never"
        sections={data}
        renderItem={({ item }) => ({})}
        renderScrollComponent={(props) => (
          <KeyboardAwareScrollView {...props} />
        )}
      />
    </View>
  );
};

Repo for reproducing
Not available

To Reproduce
Not available

Expected behavior
I would expect the KeyboardAwareScrollView to correctly observe the dynamic list length offset regardless of dismissing the keyboard first and then bringing it back up.

Screenshots
Image

Smartphone (please complete the following information):

  • Desktop OS: MacOS Sonoma 14.5
  • Device: iPhone 15
  • OS: iOS 17.4
  • RN version: [e.g. 0.73.7]
  • RN architecture: old
  • JS engine: Hermes
  • Library version: 1.16

Additional context
This problem also existed when using the other library this was intended to replace, react-native-keyboard-aware-scroll-view.

@kirillzyusko kirillzyusko added the KeyboardAwareScrollView 📜 Anything related to KeyboardAwareScrollView component label Jan 29, 2025
@kirillzyusko
Copy link
Owner

@trooperandz may I kindly ask you to prepare a reproduction example (for simplicity I think we can simply switch between "large data"/"small data", i. e. no need to implement a real search)/? Does it happen with latest RN version (0.76 for example)?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
KeyboardAwareScrollView 📜 Anything related to KeyboardAwareScrollView component
Projects
None yet
Development

No branches or pull requests

2 participants