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

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

Create a fresh RN 0.79.2 project (or use your existing app).
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,
  },
})

Run on Android.
Scroll until the tab bar sticks to the top.
Tap any tab button—nothing fires.
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/

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.

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.

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

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

@Mootzali

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

@shubhamguptadream11

@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.

@shubhamguptadream11

@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.

Is there any way to solve this now?

@liao666brant

Is there any way to solve this now?

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

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

same issue for me in react-native: 0.79.3

a workaround i found is replacing onPress with either onPressIn or onPressOut

Having same issue i fixed it by using Pressable from react-native-gesture-handler

anyone found the solution?

I have face the same issue after upgrading to "react-native": "0.79.6".
But the issue persist on my Google Pixel 5 device . No issue when I try with Google Pixel 3 device.

Note: In this screen it's not horizontally scrolled, but I have use this component in few places in my app. all behave as same as on both devices.

Pixel 5 behaviour

Pixel.5.mp4

Pixel 3 behaviour

Pixel.3.mp4

Main dependencies

 "expo": "^53.0.0",
 "react": "19.0.0",
 "react-native": "0.79.6",

Here I attached the related code too:

Parent.txs: In this the 1st element (HorizontalChipsMenu) of the array works as a sticky header

 <ScrollView
        ref={scrollViewRef}
        contentContainerStyle={styles.scrollView}
        keyboardShouldPersistTaps='always'
        stickyHeaderIndices={[1]}
        showsVerticalScrollIndicator={false}
>
           <React.Fragment>
                  // Some other code here
           </React.Fragment>
           <View style={styles.topOptionsContainer}>
              <HorizontalChipsMenu
                  items={Object.values(JobSections)}
                  getSelectedMenu={getSelectedMenu as (args: string) => void}
                  initialSelectedChip={'Overview'}
               />
           </View>
           <View>
                   // Some other code here
           </View>
 </ScrollView>

HorizontalChipsMenu.txs: The horizontal menu with the scroll view

    <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
      {props.items?.map((item) => {
        return (
          <TouchableWithHaptics
            style={{ marginHorizontal: 6 }}
            key={item}
            onPress={() => {
              setSelectedChip(item);
              props.getSelectedMenu(item);
            }}
          >
            {selectedChip === item ? (
              <CustomChip label={item} backgroundColor={theme.colors.buttonBackgroundColor} color='#fff' />
            ) : (
              <CustomChip
                label={item}
                mode='outlined'
                backgroundColor='transparent'
                color={theme.colors.placeholderTextColor}
              />
            )}
          </TouchableWithHaptics>
        );
      })}
    </ScrollView>

TouchableWithHaptics.txs

import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
import * as Haptics from 'expo-haptics';

export const TouchableWithHaptics = ({ onPress, children, ...props }: TouchableOpacityProps) => {
  return (
    <TouchableOpacity
      {...props}
      onPress={(e) => {
        void Haptics.selectionAsync();
        onPress(e);
      }}
    >
      {children}
    </TouchableOpacity>
  );
};

For now: `onPressIn()` works for me

I have face the same issue after upgrading to "react-native": "0.79.6". But the issue persist on my Google Pixel 5 device . No issue when I try with Google Pixel 3 device.

Note: In this screen it's not horizontally scrolled, but I have use this component in few places in my app. all behave as same as on both devices.

Pixel 5 behaviour

Pixel.5.mp4

Pixel 3 behaviour

Pixel.3.mp4
Main dependencies

 "expo": "^53.0.0",
 "react": "19.0.0",
 "react-native": "0.79.6",

Here I attached the related code too:

Parent.txs: In this the 1st element (HorizontalChipsMenu) of the array works as a sticky header

 <ScrollView
        ref={scrollViewRef}
        contentContainerStyle={styles.scrollView}
        keyboardShouldPersistTaps='always'
        stickyHeaderIndices={[1]}
        showsVerticalScrollIndicator={false}
>
           <React.Fragment>
                  // Some other code here
           </React.Fragment>
           <View style={styles.topOptionsContainer}>
              <HorizontalChipsMenu
                  items={Object.values(JobSections)}
                  getSelectedMenu={getSelectedMenu as (args: string) => void}
                  initialSelectedChip={'Overview'}
               />
           </View>
           <View>
                   // Some other code here
           </View>
 </ScrollView>

HorizontalChipsMenu.txs: The horizontal menu with the scroll view

    <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
      {props.items?.map((item) => {
        return (
          <TouchableWithHaptics
            style={{ marginHorizontal: 6 }}
            key={item}
            onPress={() => {
              setSelectedChip(item);
              props.getSelectedMenu(item);
            }}
          >
            {selectedChip === item ? (
              <CustomChip label={item} backgroundColor={theme.colors.buttonBackgroundColor} color='#fff' />
            ) : (
              <CustomChip
                label={item}
                mode='outlined'
                backgroundColor='transparent'
                color={theme.colors.placeholderTextColor}
              />
            )}
          </TouchableWithHaptics>
        );
      })}
    </ScrollView>

TouchableWithHaptics.txs

import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
import * as Haptics from 'expo-haptics';

export const TouchableWithHaptics = ({ onPress, children, ...props }: TouchableOpacityProps) => {
  return (
    <TouchableOpacity
      {...props}
      onPress={(e) => {
        void Haptics.selectionAsync();
        onPress(e);
      }}
    >
      {children}
    </TouchableOpacity>
  );
};

For now: `onPressIn()` works for me

Maybe can't scroll properly if you use onPressIn.

@Sameed1998

@Sameed1998 Yes, that is the only down side.
Better to go with Pressable from react-native-gesture-handler for the user experience

Same question:
"react-native": "0.79.5",

Pressable from react-native-gesture-handler works for me!

Is there any update on this issue? Still happening on the latest version

+1, same problem with FlatList and Header Component

0.79.5

@zsomborgellerfi

Is there any update on this issue? Still happening on the latest version
@zsomborgellerfi

Yes, I can confirm this is still happening on the version 0.81.5

As a workaround, replacing Touchable / Pressable with the components from react-native-gesture-handler seems to resolve the issue in my case. Not sure if this is the intended approach or just a temporary fix.

Fix Android sticky-header taps with RNGH Pressable swap

fix(android): sticky 헤더 내부 touchable onPress 드롭 수정 (patch-package)

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

Navigation Menu

Repository navigation

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

Description

Steps to reproduce

React Native Version

Affected Platforms

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

MANDATORY Reproducer

For now: `onPressIn()` works for me

For now: `onPressIn()` works for me

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Description

Steps to reproduce

React Native Version

Affected Platforms

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

MANDATORY Reproducer

Activity

react-native-bot commented on May 13, 2025

react-native-bot commented on May 13, 2025

ebrahimiali commented on May 13, 2025

yasinkarimzadehgh commented on May 13, 2025

shubhamguptadream11 commented on May 20, 2025

Mootzali commented on May 20, 2025

HtSpChakradharCholleti commented on May 30, 2025

liao666brant commented on Jun 6, 2025

Mootzali commented on Jun 7, 2025

balkrishna-1996 commented on Jun 18, 2025

julian-dueck commented on Jun 20, 2025

Sameed1998 commented on Jul 18, 2025

zaidmuachrat commented on Jul 20, 2025

IshankaDK commented on Aug 25, 2025

For now: onPressIn() works for me

Sameed1998 commented on Aug 25, 2025

For now: onPressIn() works for me

IshankaDK commented on Aug 25, 2025

shuo-hiwintech commented on Sep 17, 2025

zsomborgellerfi commented on Oct 7, 2025

Insanefoam commented on Nov 4, 2025

Mootzali commented on Apr 29, 2026

react-native-bot commented on Oct 27, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

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

For now: `onPressIn()` works for me

For now: `onPressIn()` works for me