React Native onPress 안됨… 원인 찾느라 시간 날린 기록 (2026)

React Native에서 FlatList를 쓰다 보면
스크롤은 되는데 터치가 안 되는 상황을 한 번쯤은 겪게 됩니다.

아이템을 눌러도 onPress가 안 찍히고,
“내 코드가 잘못된 건가?” 싶어서 한참을 들여다보게 되죠.

저도 처음엔
TouchableOpacity 문제인 줄 알았고,
그다음엔 상태값 문제인 줄 알았습니다.

근데 결론은 의외로 단순했습니다.
ScrollView랑 FlatList가 겹쳐 있었어요.

---

증상부터 정리해보면

이런 상황이었습니다.

• FlatList는 잘 보임
• 위아래 스크롤도 정상
• 근데 아이템 클릭이 안 됨
• 콘솔 로그도 안 찍힘

특히 화면 끝까지 스크롤했을 때만 안 되는 경우도 있었고,
iOS에서는 되는데 Android에서만 안 되는 경우도 있었습니다.

이때 거의 대부분의 원인이
ScrollView + FlatList 중첩이었습니다.

---

가장 흔한 구조 (문제 있는 구조)

 

        <ScrollView>
          <View>
            <FlatList data={data} renderItem={renderItem} />
          </View>
        </ScrollView>

이 구조, 생각보다 많이 씁니다.

처음엔
“위에 다른 콘텐츠도 있고, 스크롤도 필요하니까”
자연스럽게 이렇게 짜게 되는데요.

이 상태에서 FlatList 안 터치가 먹통이 되는 경우가 많습니다.

---

왜 이런 문제가 생기냐면

ScrollView랑 FlatList는
둘 다 스크롤 제스처를 처리하는 컴포넌트입니다.

ScrollView가 위에 있으면:

• 터치 이벤트를 먼저 가져가고
• FlatList 안 onPress까지 전달하지 않는 경우가 생깁니다.

특히:

• position: absolute
• sticky header
• 상단 고정 영역

이런 게 섞이면 더 잘 터집니다.

---

해결 방법 1️⃣ FlatList 단독으로 쓰기 (제일 깔끔)

가능하면 이게 제일 좋습니다.

 

    <FlatList
      ListHeaderComponent={<Header />}
      data={data}
      renderItem={renderItem}
    />

• ScrollView 제거
• FlatList 하나로 스크롤 통합

👉 구조가 단순해지고
👉 터치 문제도 같이 사라집니다.

---

해결 방법 2️⃣ keyboardShouldPersistTaps 설정

ScrollView를 꼭 써야 하는 상황이라면
이 옵션은 거의 필수입니다.

<ScrollView keyboardShouldPersistTaps="handled">

 

또는

keyboardShouldPersistTaps="always"

 

이걸 안 주면:

• 스크롤이 터치를 먼저 먹고
• 버튼 onPress가 실행 안 되는 경우가 많습니다.

---

해결 방법 3️⃣ FlatList 높이 명확히 주기

이건 은근히 많이 놓칩니다.

<FlatList style={{ flex: 1 }} />

 

또는

 

    <View style={{ height: 300 }}>
      <FlatList />
    </View>

FlatList의 높이가 애매하면
터치 영역 계산이 꼬이는 경우가 있습니다.

---

해결 방법 4️⃣ 투명 View가 덮고 있는지 확인

이건 진짜 많이 속습니다.

• 눈에 안 보이는 View
• absolute 포지션
• 투명 배경

이런 게 위에 덮고 있으면
FlatList 터치는 전부 막힙니다.

제가 쓰는 확인 방법

 

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

의심되는 View에 잠깐 넣어보면
“아 여기 있었네” 바로 보입니다.

---

iOS는 되는데 Android만 안 될 때

이 경우도 ScrollView 겹침 + zIndex 문제일 가능성이 큽니다.

Android에서는:

 

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

elevation 빠지면
터치 안 되는 경우 많습니다.

---

FlatList 터치 안 될 때 체크 순서 (이거만 봅니다)

문제 생기면 저는 이 순서로 봅니다.

1. ScrollView로 FlatList 감싸고 있나?
2. keyboardShouldPersistTaps 설정했나?
3. FlatList 높이가 애매하지 않나?
4. 투명 View가 위에 덮고 있나?
5. Android면 elevation 빠졌나?

이 순서면
대부분 여기서 끝납니다.

---

마무리

FlatList 터치 안 되는 문제는
코드보다 레이아웃 구조 문제인 경우가 훨씬 많습니다.

특히:

• ScrollView 안에 FlatList
• 고정 헤더
• absolute 레이아웃

이 조합이면
한 번쯤은 꼭 터집니다.

지금도 같은 문제로 헤매고 있다면
ScrollView부터 한 번 의심해보세요.
생각보다 거기서 바로 해결될 수 있습니다.