[ReactNative/RN] React-Native-Dropdown-Picker를 ScrollView 안에 사용할 때 dropdown 스크롤이 안될 경우 해결 방법(react native dropdown picker inside scrollview not working)

맡은 프로젝트에서 회원가입 UI를 만드는데, 거주지역을 선택하는 부분에서

react-native-dropdown-picker

react-native-dropdown-picker

를 사용하였다.

하지만 이전 프로젝트에서도 잘 사용했던 라이브러리인데 android에서만 드롭다운의 스크롤이 동작하지 않는 것이었다.

 

chatGPT에게도 물어보고, 열심히 구글링을 해보았지만 공통되는 답변은

listMode="SCROLLVIEW"
              scrollViewProps={{
                nestedScrollEnabled: true,
              }}

이것을 추가하라는 방법 뿐이었다 :(

 

그래서 생각을 바꿔, 공식문서에 답이 있지 않을까 하여 열심히 찾아보던 중

혹시는 역시가 되었다.

 

View 안에 사용할때는 containerStyle을 가급적 피하고, border에 관련된 옵션도 주지 말라는 Rule이 있었다.

그래서

<DropDownPicker
              open={isSidoOpen}
              onOpen={onSidoOpen}
              value={props.sidoValue}
              items={sidoItems}
              setOpen={setIsSidoOpen}
              setValue={props.setSidoValue}
              setItems={setSidoItems}
              closeOnBackPressed={true}
              listMode="SCROLLVIEW"
              scrollViewProps={{
                nestedScrollEnabled: true,
              }}
              style={{
              	width : '100%',
              	borderWidth : 0,
              }}
              containerStyle={{
                width: '100%',
                borderWidth: 2,
              }}
              textStyle={{
                fontSize: 14,
                fontFamily: 'Pretendard-Bold',
              }}
              dropDownContainerStyle={{
                borderWidth: 2,
              }}
            />

이런 식으로 되어있던 것을

<DropDownPicker
              open={isSidoOpen}
              onOpen={onSidoOpen}
              value={props.sidoValue}
              items={sidoItems}
              setOpen={setIsSidoOpen}
              setValue={props.setSidoValue}
              setItems={setSidoItems}
              closeOnBackPressed={true}
              listMode="SCROLLVIEW"
              scrollViewProps={{
                nestedScrollEnabled: true,
              }}
              style={{
              	width : '100%',
              	borderWidth : 2,
              }}
              textStyle={{
                fontSize: 14,
                fontFamily: 'Pretendard-Bold',
              }}
              dropDownContainerStyle={{
                borderWidth: 2,
              }}
            />

위와 같은 코드로 containerStyle 대신 style Props에 Container 스타일을 지정해주면

드롭다운 내부가 스크롤 될 것이다.