이슈 배경

React-Native → 0.75.3

React-Native-Dropdown-Picker → 5.4.6

react-native-gesture-handler → 2.20.2

문제

단과 대학 및 학과 선택은 하나의 모달 내부에서 두 개의 Dropdown Picker를 사용해야했다.

이 때, iOS에서는 문제없이 적용이 됐고, Android 기준으로

스크린샷 2024-11-07 오후 9.14.26.png

문제 없는 ios

스크린샷 2024-11-01 오전 1.42.07.png

Android는 사범대학 밑으로 아무리 스크롤을 해도 넘어가지 않는다.

해결 시도

먼저 흔히 알려진 해결책부터 찾아봤다.

의외로 React-Native-Dropdown-Picker의 ScrollView에 대한 에러 레퍼런스를 많이 찾을 수 있었고 하나씩 해보기로 결정했다.

z-Index 조절

stylesheet가 아닌 Dropdown-Picker의 prop으로 zIndex를 조절해서 컴포넌트를 구성하면 스크롤 모드일 때 드롭다운의 요소들을 화면의 가장 앞에 배치되며 스크롤이 가능하다는 것이다.

→ 실패 : 이미 npm 사이트에서 해당 라이브러리의 prop을 확인했었고 이미 z-Index 값을 올바르게 설정해놨었다.

혹시 몰라 더 높은 값으로 배치해보았지만 소용없었다.
react-native-gesture-handler 라이브러리를 이용해 드롭다운을 감싸기

드롭다운을 GestureHandlerRootView 컴포넌트로 감싸서 사용자의 제스쳐를 인식하여 상하 swiping을 감지하여 스크롤 될 수 있게 한다는 방법이었다.

→ 실패: 해당 문제는 사용자의 이벤트를 감지하지 못하는 문제가 아닌 것으로 보였다.
Patch-Package를 이용해 React-Native-Dropdown-Picker 패치하기

마지막 방법은 Dropdown-Picker 라이브러리를 직접 패치하는 것이었다.

기존 Dropdown-Picker의 ScrollView와 FlatList는 React-Native에서 가져오는데 react-native-gesture-handler의 FlatList와 ScrollView로 변경하고 이 변경사항을 내 프로젝트에 patch하는 것이다.

변경 전
tsx
```
//Project/node_modules/react-native-dropdown-picker/src/components/Picker.js
import {
    TouchableOpacity,
    Text,
    Image,
    FlatList,
    TextInput,
    Dimensions,
    ScrollView,
    Modal,
    ActivityIndicator,
    BackHandler,
    Platform,
    StyleSheet,
} from 'react-native';
```
변경 후
tsx
```
//Project/node_modules/react-native-dropdown-picker/src/components/Picker.js
import {
    TouchableOpacity,
    Text,
    Image,
    TextInput,
    Dimensions,
    Modal,
    ActivityIndicator,
    BackHandler,
    Platform,
    StyleSheet,
} from 'react-native';
import { FlatList, ScrollView } from 'react-native-gesture-handler';
```
json
```
//package.json
"scripts" : {
   // other..
    "postinstall": "patch-package"
}
```
bash
```
npm i patch-package
npx patch-package react-native-dropdown-picker
```
까지 해주게 되면

프로젝트 루트에 patches 가 생성되고 이를 git 에 올리면 앞으로 npm install 마다 자동적으로 해당 라이브러리를 패치해준다.

→ 성공 : 솔직히 될 줄 몰랐다.

이 에러에 쓴 시간이 너무나 많았기 때문에 쓸 수 있는 모든 방법을 다 써보고 안된다면 직접 만들거나 다른 라이브러리를 채택해야겠다고 생각하고 해당 라이브러리 깃허브 레포에 있는 모든 스크롤 관련 이슈를 찾아보던 중 알 수 있었다. node_modules 를 건들며 에러를 해결한 적은 처음이다.

더군다나 항상 라이브러리를 맹신하면 안된다는걸 알고는 있었지만, React-Native에서 가장 많이 쓰이는 드롭다운 관련 라이브러리이니 무의식적으로 설정 및 코드의 문제라고 생각했었다.

물론 해당 라이브러리가 스크롤 모드에서 무조건 에러를 내는 것은 아닐 것이다.

우리 서비스의 드롭다운은 모달 내부의 두개의 드롭다운이라는 특수한 상황이었기 때문에 그랬을 수도 있다.

이후에는 유명한 라이브러리라도 내 사용 조건에서 제대로 동작하는지 먼저 의심해보기로 했다.

이슈 배경

문제

해결 시도

변경 전

변경 후

검색...