[React Native][라이브러리 소개] RN에서 쓸만한 Dropdown

 

# react-native-element-dropdown

- Dropdown은 웹 또는 앱에서 많이 사용되는 선택 UI입니다. 문제는 이러한 UI들이 대부분 네이티브 UI를 사용하다보니, Android와 IOS에서 동일한 디자인이 아니라는 것입니다. 이러한 문제를 해결하기 위해서는 적절한 라이브러를 활용하는 것이 효율적입니다. 지난 번 관련 포스팅에서는 간단하고 쉽게 사용할 수 있는 깔끔한 라이브러리를 소개했었습니다.

 

[React Native][라이브러리 소개] 지금까지 봤던 가장 깔끔한 Dropdown / Picker / Select

- 실제로 다양한 프로젝트에서 이 라이브러리를 잘 사용하고 있었는데, ScrollView에서 일정 개수 이상의 선택지가 있는 경우, 선택 목록이 스크롤이 되지 않는 이슈가 있어서, 이에 대한 대안으로 찾은 라이브리러를 본 포스팅에서 소개하려고 합니다. 

 

# 깃헙 페이지

https://github.com/hoaphantn7604/react-native-element-dropdown

GitHub - hoaphantn7604/react-native-element-dropdown: A react-native dropdown component easy to customize for both iOS and Andro

 

# 사용방법

 

- 라이브러리를 설치합니다

yarn add react-native-element-dropdown

- 

- 위와 같은 스타일의 dropdown을 구현하려면 아래와 같이 구현하시면 됩니다. 기존 FlatList와 유사한 구조로 되어 있기 때문에 사용이 어렵지는 않습니다. 만약 아래의 예제로 부족할 경우 깃헙 페이지에 더 다양한 예제를 제공하고 있으니 참고하시면 좋을 것 같습니다. 

  import React, { useState } from 'react';
  import { StyleSheet, Text, View } from 'react-native';
  import { Dropdown } from 'react-native-element-dropdown';
  import AntDesign from '@expo/vector-icons/AntDesign';

  const data = [
    { label: 'Item 1', value: '1' },
    { label: 'Item 2', value: '2' },
    { label: 'Item 3', value: '3' },
    { label: 'Item 4', value: '4' },
    { label: 'Item 5', value: '5' },
    { label: 'Item 6', value: '6' },
    { label: 'Item 7', value: '7' },
    { label: 'Item 8', value: '8' },
  ];

  const DropdownComponent = () => {
    const [value, setValue] = useState(null);
    const [isFocus, setIsFocus] = useState(false);

    const renderLabel = () => {
      if (value || isFocus) {
        return (
          <Text style={[styles.label, isFocus && { color: 'blue' }]}>
            Dropdown label
          </Text>
        );
      }
      return null;
    };

    return (
      <View style={styles.container}>
        {renderLabel()}
        <Dropdown
          style={[styles.dropdown, isFocus && { borderColor: 'blue' }]}
          placeholderStyle={styles.placeholderStyle}
          selectedTextStyle={styles.selectedTextStyle}
          inputSearchStyle={styles.inputSearchStyle}
          iconStyle={styles.iconStyle}
          data={data}
          search
          maxHeight={300}
          labelField="label"
          valueField="value"
          placeholder={!isFocus ? 'Select item' : '...'}
          searchPlaceholder="Search..."
          value={value}
          onFocus={() => setIsFocus(true)}
          onBlur={() => setIsFocus(false)}
          onChange={item => {
            setValue(item.value);
            setIsFocus(false);
          }}
          renderLeftIcon={() => (
            <AntDesign
              style={styles.icon}
              color={isFocus ? 'blue' : 'black'}
              name="Safety"
              size={20}
            />
          )}
        />
      </View>
    );
  };

  export default DropdownComponent;

  const styles = StyleSheet.create({
    container: {
      backgroundColor: 'white',
      padding: 16,
    },
    dropdown: {
      height: 50,
      borderColor: 'gray',
      borderWidth: 0.5,
      borderRadius: 8,
      paddingHorizontal: 8,
    },
    icon: {
      marginRight: 5,
    },
    label: {
      position: 'absolute',
      backgroundColor: 'white',
      left: 22,
      top: 8,
      zIndex: 999,
      paddingHorizontal: 8,
      fontSize: 14,
    },
    placeholderStyle: {
      fontSize: 16,
    },
    selectedTextStyle: {
      fontSize: 16,
    },
    iconStyle: {
      width: 20,
      height: 20,
    },
    inputSearchStyle: {
      height: 40,
      fontSize: 16,
    },
  });

 

-  그리고 기본 제공되는 스타일이 나쁘지는 않지만, 실제 사용하기 위해서는 스타일의 수정이 필요합니다. 이를 위한 Prop을 다양하게 제공하고 있으므로  다음 링크에서 필요한 항목을 찾아서 수정하시면 될 것 같습니다.

GitHub - hoaphantn7604/react-native-element-dropdown: A react-native dropdown component easy to customize for both iOS and Andro

 

# 마치며

- 먼저 소개했던 라이브러리에 비해서 스타일이 마음에 들지는 않았지만, 열심히 수정을 한 결과 비슷한 느낌으로 스타일링이 가능하였습니다. 아무래도 RN에서 ScrollView안에서 Scroll이 필요한 컴포넌트가 문제 없이 잘 동작하는 경우가 드물(?)다보니 이 부분에 대한 고민 없이 Dropdown을 구현할 수 있다는 것은 큰 메리트여서 앞으로도 계속 사용하게 될 것 같습니다.

---