Horizontal ScrollView touchables stop responding when nested inside a sticky header (RN 0.79.2)

[Mootzali]

Description

When you nest a horizontal ScrollView with touchable tabs inside a vertical ScrollView (or SectionList) that uses stickyHeaderIndices, the horizontal scroll still works, but the individual tab TouchableOpacity buttons no longer fire their onPress once the header becomes pinned. As soon as you scroll back up and the header unsticks, the buttons work again.

---

Steps to reproduce

1. Create a fresh RN 0.79.2 project (or use your existing app).
2. Copy this component into App.js (or similar):

import React, { useState } from 'react'
import { View, Text, ScrollView, TouchableOpacity, StyleSheet, SafeAreaView } from 'react-native'

const ItemBox = ({ title }) => (
  <View style={styles.itemBox}>
    <Text>{title}</Text>
  </View>
)

export default function NestedScrollTest() {
  const tabs = [
    { key: 'one', title: 'Tab One' },
    { key: 'two', title: 'Tab Two' },
    { key: 'three', title: 'Tab Three' },
    { key: 'four', title: 'Tab Four' },
    { key: 'five', title: 'Tab Five' },
  ]

  // Generate lots of items so it scrolls
  const allItems = Array.from({ length: 50 }, (_, i) => `Item #${i + 1}`)

  const [activeTab, setActiveTab] = useState(tabs[0].key)

  const filteredItems = allItems.filter(
    (_, idx) => idx % tabs.length === tabs.findIndex(t => t.key === activeTab)
  )

  return (
    <SafeAreaView style={styles.container}>
      <TouchableOpacity
        style={styles.submitButton}
        onPress={() => alert(`Submitting on "${activeTab}"`)}
      >
        <Text style={styles.submitText}>Top Submit Button</Text>
      </TouchableOpacity>
      {/* Vertical scroll area with sticky header */}
      <ScrollView
        style={styles.scrollContainer}
        contentContainerStyle={{ paddingBottom: 20 }}
        nestedScrollEnabled
        removeClippedSubviews={false}
        stickyHeaderIndices={[0]}
      >
        {/* Sticky horizontal tab bar */}
        <View style={styles.stickyContainer} pointerEvents="box-none">
          <ScrollView
            horizontal
            showsHorizontalScrollIndicator={false}
            nestedScrollEnabled
            pointerEvents="auto"
            contentContainerStyle={styles.tabBar}
            onStartShouldSetResponder={() => true}
          >
            {tabs.map(tab => (
              <TouchableOpacity
                key={tab.key}
                onPress={() => setActiveTab(tab.key)}
                activeOpacity={0.7}
                style={[
                  styles.tabButton,
                  activeTab === tab.key && styles.activeTab,
                ]}
              >
                <Text style={
                  activeTab === tab.key ? styles.activeTabText : styles.tabText
                }>
                  {tab.title}
                </Text>
              </TouchableOpacity>
            ))}
          </ScrollView>
        </View>

        {filteredItems.map(title => (
          <ItemBox key={title} title={title} />
        ))}
      </ScrollView>

      <TouchableOpacity
        style={styles.submitButton}
        onPress={() => alert(`Submitting on "${activeTab}"`)}
      >
        <Text style={styles.submitText}>Bottom Submit Button</Text>
      </TouchableOpacity>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollContainer: {
    flex: 1,
  },
  stickyContainer: {
    backgroundColor: 'white',
    zIndex: 10,
    elevation: 4,
  },
  tabBar: {
    paddingVertical: 10,
    paddingHorizontal: 8,
  },
  tabButton: {
    paddingHorizontal: 16,
    paddingVertical: 8,
    marginRight: 8,
    borderRadius: 4,
    backgroundColor: '#EEE',
  },
  activeTab: {
    backgroundColor: '#4A90E2',
  },
  tabText: {
    fontSize: 14,
    color: '#333',
  },
  activeTabText: {
    fontSize: 14,
    color: '#FFF',
  },
  itemBox: {
    height: 80,
    marginHorizontal: 16,
    marginVertical: 8,
    backgroundColor: '#F9F9F9',
    borderRadius: 6,
    justifyContent: 'center',
    alignItems: 'center',
    elevation: 2,
  },
  submitButton: {
    padding: 16,
    backgroundColor: '#28A745',
    alignItems: 'center',
  },
  submitText: {
    color: '#FFF',
    fontSize: 16,
  },
})

3. Run on Android.

4. Scroll until the tab bar sticks to the top.

5. Tap any tab button—nothing fires.

6. Scroll up one pixel; tap again—the press now registers.

React Native Version

0.79.2

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info

System:
  OS: Linux 6.8 Ubuntu 24.04.2 LTS 24.04.2 LTS (Noble Numbat)
  CPU: (6) x64 Intel(R) Core(TM) i5-9400F CPU @ 2.90GHz
  Memory: 12.45 GB / 23.38 GB
  Shell:
    version: 5.2.21
    path: /bin/bash
Binaries:
  Node:
    version: 22.11.0
    path: ~/.nvm/versions/node/v22.11.0/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.nvm/versions/node/v22.11.0/bin/yarn
  npm:
    version: 10.9.0
    path: ~/.nvm/versions/node/v22.11.0/bin/npm

npmPackages:
  "@react-native-community/cli":
    installed: 18.0.0
    wanted: 18.0.0
  react:
    installed: 19.0.0
    wanted: 19.0.0
  react-native:
    installed: 0.79.2
    wanted: 0.79.2

MANDATORY Reproducer

https://github.com/Mootzali/NestedScrollIssue/

[react-native-bot]

Tip

Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - 0.79.2. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[react-native-bot]

Tip

Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[ebrahimiali]

I have the exact same issue with ScrollView after migrating to 79.1

[yasinkarimzadehgh]

The exact same problems with ScrollView have also arisen for me after updating to version 79.1.

[shubhamguptadream11]

@Mootzali Is is still happening if we use Pressable instead of TouchableOpacity?
Also is this coming on Old Arch or New Arch?

[Mootzali]

@shubhamguptadream11
They behave the same.
Even I used only one Pressable without any horizontal ScrollView and after it became sticky, it stopped firing touch events.
it is on New Arch.

[HtSpChakradharCholleti]

@shubhamguptadream11 For me, it started happening from new arch(when upgraded to react-native v0.78.2), few touchableopacity fields inside onscroll stops responding to touch events when scrolled.

[liao666brant]

Is there any way to solve this now?

[Mootzali]

Is there any way to solve this now?

@liao666brant
I think we should wait for developers to fix this issue.

[balkrishna-1996]

I am getting same issue with sticky header inside the scrollview in react-native = '0.79.2' and above.