FlatList Sticky Header blocking touches

[mrousavy]

Description

When using a Sticky Header (like a search bar), the header blocks any touches from passing through. When scrolling, those events get passed through successfully, just no touches.

Demo: https://imgur.com/a/rmkiiNz

Also, when I hide the header by animating it's translateY, the area still does not let any touches pass through.

Demo: https://imgur.com/a/mRY0T02

React Native version:

info Fetching system and libraries information...
System:
    OS: macOS 10.15.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 9.08 GB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.2.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 25, 28, 29
      Build Tools: 28.0.3, 29.0.3, 30.0.0
      System Images: android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_252 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.62.2 => 0.62.2 
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Create FlatList
2. Create ListHeaderComponent
3. Make header sticky (stickyHeaderIndices={[0]})

Expected Results

Touches should get passed through to the list/list's items

Snack, code example, screenshot, or link to a repository:

<FlatList
	keyboardShouldPersistTaps="handled"
	data={this.state.posts}
	refreshControl={<RefreshControl refreshing={this.state.refreshing} onRefresh={this.refresh.bind(this)} />}
	keyboardDismissMode="interactive"
	stickyHeaderIndices={[0]}
	ListHeaderComponent={
		<Animated.View
			style={{
				transform: [
					{
						translateY: this.state.searchBarTranslateY,
					},
				],
				backgroundColor: 'red',
			}}>
			{this.renderSearchbar()}
		</Animated.View>
	}
	keyExtractor={(item, index) => `post${index}`}

[fabOnReact]

does this reproduce on Android? Thanks

[mrousavy]

@fabriziobertoglio1987 Yes it does. Here's a demo for android.

[mrousavy]

Scrolling works, touching doesn't. Any updates on this?

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.