[React Native] PickerSelect 사용하기 (picker)

개요

앱에서 picker는 사용자의 입력값을 개발자가 제시함으로써 입력에 대한 오류를 줄일 수 있는 방법입니다.

picker 라이브러리 사용법에 대해 정리하였습니다.

 

 picker

 

설치

https://github.com/lawnstarter/react-native-picker-select

lawnstarter/react-native-picker-select

 

npm install react-native-picker-select

# React Native users
npm install @react-native-picker/picker

# Expo
expo install @react-native-picker/picker

 

프로젝트 상단 터미널에서 아래와 같은 명령어로 ios에도 라이브러리를 설치해줍니다.

cd ios && pod install && cd ../

react-native run-ios

 

git 홈페이지에 있는 예제를 실행해보기 위해 아래와 같은 코드를 작성합니다.

import React from 'react'
import { View } from 'react-native'
import RNPickerSelect from 'react-native-picker-select';

export default function PickerScreen() {
    return (
        <View>
             <RNPickerSelect
                onValueChange={(value) => console.log(value)}
                items={[
                    { label: 'Football', value: 'football' },
                    { label: 'Baseball', value: 'baseball' },
                    { label: 'Hockey', value: 'hockey' },
                ]}
            />
        </View>
  );
}

 

아래 사진과 같이 나오면 성공적으로 라이브러리가 설치가 된 것을 알 수 있습니다.

이제 textinput 처럼 스타일을 수정하고 item의 값을 바꿔 제가 원하는 값으로 변경하겠습니다.

 

RnPickerSelect의 prop값들을 아래와 같이 변경해줍니다.

- fixAndroidTouchableBug: 안드로이드에서 클릭을 여러번해야 picker가 나오는 경우가 있어 추가를 하였습니다. true로 설정하면 이런 에러가 사라집니다.

- useNativeAndroidPickerStyle: 기본 안드로이드 textinput 스타일 적용을 거부하고 pickerSelectStyles로 적용합니다.

<RNPickerSelect
  textInputProps={{ underlineColorAndroid: 'transparent'}}
  placeholder={{
  	label: placeholder,
  }}
  fixAndroidTouchableBug={true}
  value={text}
  onValueChange={value => onChangeText(value)}
  useNativeAndroidPickerStyle={false}
  items={[
    { label: '2년 계약', value: '2', key: '2'},
    { label: '3년 계약', value: '3', key: '3' },
  ]}
  style={pickerSelectStyles}
/>

 

text값을 받아오기 위해 state를 추가하고, textinput style과 View 태그를 추가합니다.

View로 감싸주는 이유는 RNPickerSelect 를  width를 300으로 고정하였지만 눈에 textinput의 범위를 벗어나 클릭을 했을 때에도 picker가 동작하기 때문에 View로 한번더 감싸줍니다.

style의 경우 inputIOS로 선언하면 ios 기기에서 스타일링이 적용이 됩니다. 또한, inputAndroid라고 선언하면 android 기기에 스타일링이 적용이 됩니다.

import React, {useState} from 'react'
import { View, StyleSheet } from 'react-native'

...

export default function PickerScreen() {
	const [text, setText] = useState("");
    const placeholder = '값을 입력해주세요.';
    
    const onChangeText = (value) => {
        console.warn(value)
        setText(value);
    } 
    
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
         <View style={{ width: 300 }}>

			...
            
         </View>
	</View>
}

const pickerSelectStyles = StyleSheet.create({
    inputIOS: {
        fontSize: 16,
        height: 50, 
        width: 300, 
        color: '#000000',
        borderColor: '#000000', 
        borderWidth: 1, 
        borderRadius: 12,
        padding: 10
    },
    inputAndroid: {
        fontSize: 16,
        height: 50, 
        width: 300, 
        color: '#000000',
        borderColor: '#000000', 
        borderWidth: 1, 
        borderRadius: 12,
        padding: 10
    },
});

 

정상적으로 동작하지만, placeholder인 값을 입력해주세요를 선택 하였을 때에는 undefined와 null이 text값에 들어가게 됩니다.

이를 이용하여 값이 없음을 알 수 있습니다.

 

후기

새로운 라이브러리를 사용하면 가끔 만나는 에러들 때문에 시간을 굉장히 많이 소모하게 됩니다.

그리고 예제는 하나의 textinput이였지만 실질적으로 사용을 할 때는 여러개의 textinput, 다양한 입력 form들과 함께 사용이 될 텐데 이 picker에 유효성 검사를 어떻게 자연스럽게 할 수 있을지 생각을 해봐야합니다.