Sticky Header 터치 안됨 문제 해결 (React Native, 2026)

React Native에서 스크롤 중 Sticky Header를 만들었는데,
버튼이 눌리지 않는 상황, 한 번쯤 겪으셨죠?

저도 한참 삽질했습니다.
화면에 분명히 버튼이 보이는데, 눌러도 반응이 없어요.
“코드가 잘못됐나?” → “라이브러리 버그인가?”
몇 시간 동안 고민한 끝에 원인을 찾았습니다.

결론부터 말하면,
Sticky Header 위에 다른 View가 겹치거나, 터치 이벤트를 막고 있는 경우가 대부분입니다.

---

1️⃣ 문제 상황 정리

• FlatList / SectionList에 Sticky Header 적용
• 버튼, 아이콘 등 터치 컴포넌트 정상 배치
• 근데 눌러도 onPress 실행 안 됨
• iOS는 되는데 Android에서만 안 되는 경우 있음

---

2️⃣ 원인 분석

1. 다른 View가 위에 겹쳐 있음

• absolute 포지션 / zIndex 겹침
• 투명 View라도 터치 이벤트를 먼저 가져가면 막힘

2. ScrollView / FlatList 스크롤 이벤트와 충돌

• FlatList가 Sticky Header를 관리할 때, ScrollView와 중첩되면 터치 이벤트 전달이 안 됨

3. Android zIndex 문제

• iOS는 잘 되는데 Android에서는 elevation이 필요
• zIndex만으로는 충분하지 않음

---

3️⃣ 해결 방법

① pointerEvents 사용

 

<View pointerEvents="box-none"> <StickyHeader /> </View>

• Sticky Header 외부 View에 pointerEvents="box-none" 적용
• 버튼이 눌리는 영역만 이벤트를 받도록 조정

---

② Android elevation 적용

 

style={{ zIndex: 10, elevation: 10, }}

• Android에서 Sticky Header 버튼이 눌리지 않는 경우
• zIndex + elevation 함께 적용 필요

---

③ ScrollView / FlatList 충돌 해결

• ScrollView 안에 FlatList 넣지 않기
• 꼭 필요하면 FlatList keyboardShouldPersistTaps="handled" 적용

---

④ Debug: 투명 View 확인

• 배경색 잠깐 넣어보기

 

backgroundColor: 'rgba(255,0,0,0.2)'

• 눌러도 반응 없는 영역 확인 가능

---

4️⃣ 제가 보는 체크 순서

Sticky Header 버튼 안 눌릴 때:

1. 다른 View가 겹치나? (absolute / zIndex)
2. Android면 elevation 적용했나?
3. ScrollView / FlatList 중첩 문제?
4. pointerEvents 조정 필요?

대부분 여기서 해결됩니다.

---

5️⃣ 마무리

Sticky Header 터치 안 되는 문제는
“코드 문제”보다는 레이아웃/스크롤 이벤트 문제인 경우가 많습니다.

저처럼 몇 시간 삽질하지 말고,
위 체크리스트대로 순서대로 확인하면 10분 안에 해결 가능합니다.