react-native-true-sheet icon indicating copy to clipboard operation
react-native-true-sheet copied to clipboard

How to handle grabber with stickyHeaderIndices

Open Ahmedhamed77 opened this issue 6 months ago • 2 comments

Before submitting a new issue

  • [x] I tested using the latest version of the library, as the bug might be already fixed.
  • [x] I tested using a supported version of react native.
  • [x] I checked for possible duplicate issues, with possible answers.

Bug summary

I have a Flatlist with stickyHeaderIndices but when I try to scroll down there is no enough space between grabber and stickyHeader

<TrueSheet
        sizes={['95%']}
        blurTint="dark"
        edgeToEdge
        cornerRadius={12}
        contentContainerStyle={[
          {marginTop: SHEET_SPACING, backgroundColor: COLORS.dark_1700},
        ]}
        backgroundColor={COLORS.dark_1700}
        scrollRef={flashListRef}
        ref={bottomSheetRef}>
        <FlatList
          ref={flashListRef}
          data={countries}
          nestedScrollEnabled
          renderItem={renderItem}
          keyExtractor={item => item.code}
          stickyHeaderIndices={[0]}
          keyboardShouldPersistTaps="always"
          contentContainerStyle={styles.flatListContainer}
          ListHeaderComponentStyle={styles.listHeaderContainer}
          ListHeaderComponent={
            <>
              <CustomInput
                value={countrySearchValue}
                onClear={onClear}
                hasClear={true}
                placeholder={t.search}
                wrapperStyle={styles.wrapperInput}
                autoCorrect={false}
                placeholderTextColor={COLORS.dark_800}
                onChangeText={onCountrySearch}
                searchIcon={<SearchIcon />}
              />
            </>
          }
          initialNumToRender={50}
          maxToRenderPerBatch={120}
          updateCellsBatchingPeriod={100}
          windowSize={50}
          showsVerticalScrollIndicator={false}
        />

Image

Image

Library version

2.0.3

Environment info

info Fetching system and libraries information... (node:8225) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead. (Use node --trace-deprecation ... to show where the warning was created) System: OS: macOS 15.2 CPU: (12) arm64 Apple M4 Pro Memory: 158.75 MB / 24.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 23.6.0 path: /opt/homebrew/bin/node Yarn: version: 1.22.22 path: /opt/homebrew/bin/yarn npm: version: 10.9.2 path: /opt/homebrew/bin/npm Watchman: version: 2024.12.02.00 path: /opt/homebrew/bin/watchman Managers: CocoaPods: version: 1.16.2 path: /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: - DriverKit 24.2 - iOS 18.2 - macOS 15.2 - tvOS 18.2 - visionOS 2.2 - watchOS 11.2 Android SDK: Not Found IDEs: Android Studio: 2024.2 AI-242.23726.103.2422.12816248 Xcode: version: 16.2/16C5032a path: /usr/bin/xcodebuild Languages: Java: version: 17.0.13 path: /usr/bin/javac Ruby: version: 3.4.1 path: /opt/homebrew/opt/ruby/bin/ruby npmPackages: "@react-native-community/cli": installed: 15.0.1 wanted: 15.0.1 react: installed: 18.3.1 wanted: 18.3.1 react-native: installed: 0.76.7 wanted: 0.76.7 react-native-macos: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: true newArchEnabled: true iOS: hermesEnabled: true newArchEnabled: true

info React Native v0.78.2 is now available (your project is running on v0.76.7). info Changelog: https://github.com/facebook/react-native/releases/tag/v0.78.2 info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.76.7&to=0.78.2 info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".

Steps to reproduce

  1. just create a simple flatList with stickyHeaderIndices and show the grabber of the true-sheet

Reproducible example repository

..

Ahmedhamed77 avatar Apr 02 '25 10:04 Ahmedhamed77