이슈 배경

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에서 가장 많이 쓰이는 드롭다운 관련 라이브러리이니 무의식적으로 설정 및 코드의 문제라고 생각했었다.

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

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

앞으로는 더욱 라이브러리 사용 및 관리함에 있어 더욱 신중을 기해야겠다고 생각했다.

이슈 배경

문제

해결 시도

변경 전

변경 후