[React Native]react-native-dropdown-picker 적용 / 트러블슈팅

웹에서의 select box 과 같은 형태로 랜더 되길 바라는 디자인 요구사항이 있었습니다.

다양한 RN picker 라이브러리들을 찾아보고 그중에서 제일 웹에서의 select box와 흡사하고 npm 주간 다운 수가 어느 정도 나오며

도큐먼트가 잘되어 있는, 'react-native-dropdown-picker' 을 사용하게 되었습니다.

사용하면서 발생했던 이슈들과 적용기를 적어보자 합니다.

 

react-native-dropdown-picker

https://hossein-zare.github.io/react-native-dropdown-picker-website/

React Native Dropdown Picker

출처 react-native-dropdown-picker doc

 

적용

select box 형태의 레이아웃을 필요로 하는 곳이 많아,

'react-native-dropdown-picker' 도큐먼트의 Item Schema를 참고하여 따로 커스텀 해서 사용했습니다.

해당 프로젝트가 클래스 컴포넌트 구조로 되어 클래스 컴포넌트로 작성되었습니다.

 

- CustomDropDownPicker.tsx

// CustomDropDownPicker.tsx

import {Image, Text, TextStyle, View, ViewStyle} from 'react-native';
import React, {Component, SetStateAction} from 'react';
import DropDownPicker from 'react-native-dropdown-picker';

interface CustomDropDownPickerState {}
interface CustomDropDownPickerProps {
  visible: boolean;
  setVisible: () => void;
  containerStyle?: ViewStyle;
  items: any[];
  selectItem?: (value: any) => void;
  setItem?: (callback: SetStateAction<any>) => void;
  plhd?: string;
  value?: any;
  zIndex?: number;
  onChangeValue?: (it: any) => void;
  textStyle?: TextStyle;
}

const selectWrapStyle = {
  minWidth: 100,
  flex: 1,
  height: 48,
  borderWidth: 1,
  borderColor: '#C5C5C5',
  borderRadius: 5,
  justifyContent: 'center',
  paddingHorizontal: 10,
} as ViewStyle;

export default class CustomDropDownPicker extends Component<
  CustomDropDownPickerProps,
  CustomDropDownPickerState
> {
  render() {
    const {
      items,
      selectItem,
      plhd,
      value,
      visible,
      setVisible,
      zIndex,
      setItem,
      onChangeValue,
      containerStyle,
      textStyle,
    } = this.props;

    return (
      <View style={{zIndex: 10}}>
        <DropDownPicker
          style={{...selectWrapStyle, ...containerStyle}}
          dropDownContainerStyle={{borderColor: '#C5C5C5'}}
          open={visible}
          setOpen={setVisible}
          items={items.map(item => {
            return {
              label: item.title || '',
              value: item || '',
            };
          })}
          onSelectItem={selectItem}
          onChangeValue={onChangeValue}
          setValue={setItem}
          placeholder={plhd}
          value={value}
          zIndex={zIndex}
          ArrowDownIconComponent={() => <Image source={IC_ARROW_DOWN} />}
          ArrowUpIconComponent={() => (
            <Image
              source={IC_ARROW_DOWN}
              style={{transform: [{rotate: '180deg'}]}}
            />
          )}
          listMode="SCROLLVIEW"
          ListEmptyComponent={() => <></>}
          textStyle={textStyle}
        />
      </View>
    );
  }
}

 

- 사용 예

...

interface DropDownWrapProp {
  zIndex?: number;
}

const DropDownWrap = styled.View<DropDownWrapProp>`
  z-index: ${props => props.zIndex || 10};
  padding: 0 19px;
`;

...

<DropDownWrap zIndex={100}>
 <RzTxt text="등록 차량" textStyle={labelTxtStyle} />
 <CustomDropDownPicker
  visible={carsVisible}
  setVisible={() => this.setState({carsVisible: !carsVisible})}
  items={cars}
  setItem={callback => this.setState(state => ({selCar: callback(state.selCar)}))}
  plhd="차량을 선택해주세요."
  value={this.state.selCar}
  zIndex={3000}
 />
</DropDownWrap>

...

IOS / Android

트러블 슈팅

Android OS 'react-native-dropdown-picker' Item이 스크롤 되지 않는 문제

 

Android OS에서 Item들이 스크롤 되지 않는 문제를 발견하였고,

해당 문제는 'react-native-dropdown-picker' GitHub 오픈된 이슈에 있어, 쉽게 해결할 수 있었습니다.

'react-native-gesture-handler'의 'GestureHandlerRootView' 로 App을 감싸주어 해결할 수 있었습니다.

이와 관련해서 Android OS에서 React-Native 에서 제공하는 ScrollView를 사용하며 스크롤이 되지 않는 문제들이 많았는데,

'react-native-gesture-handler'에서 제공하는 ScrollView 로 대체하여 사용했을 경우 해결되는 경우가 많았기에,

다음 포스팅에선 'react-native-gesture-handler' 다뤄보려 합니다.

 

https://github.com/hossein-zare/react-native-dropdown-picker/issues/647#issuecomment-1502399905

Cannot Scroll in React Native +0.71 on Android · Issue #647 · hossein-zare/react-native-dropdown-picker

 

---

IOS 'react-native-dropdown-picker' zIndex 이슈

 

지난 포스트에서 IOS zIndex 관련 이슈를 작성한 적이 있습니다.

그때와 동일한 문제였고, 'react-native-dropdown-picker' 에서 제공해주는 내부 Prop인 zIndex를 적용해도,

IOS에서는 적용되지 않았고 이는 IOS에서 zIndex는 중첩된 parentView에서 작동하지 않는 문제였습니다.

때문에 위에 적용 부분의 적용 예시를 보면 'styled-components'로 작성된 `DropDownWrap`를 보면 

z-index를 Prop으로 받아 Wraper가 높은 z-index를 갖게 만든 다음,

각각의 'react-native-dropdown-picker'이 제공하는 zIndex를 따로 적용해 해결할 수 있었습니다.

 

https://idkyet.tistory.com/25

[React Native] IOS z-index이슈