React Native 드롭다운 커스텀 컴포넌트 만들기 (react-native-picker, react-native-element-dropdown)

React Native Create a Custom Dropdown Component (react-native-picker, react-native-element-dropdown)

npm install @react-native-picker/picker --save
 # 또는
yarn add @react-native-picker/picker

npx pod-install

<application
  android:supportsRtl="true"
  ...>

import React, { useRef, useState } from "react";
import { Picker } from "@react-native-picker/picker";
 
const App = () => {
  const pickerRef = useRef<any>();
  const [selected, setSelected] = useState<string>();
 
  return (
    <Picker
      ref={pickerRef}
      selectedValue={selected}
      onValueChange={(itemValue) => setSelected(itemValue)}
    >
      <Picker.Item label="Java" value="java" />
      <Picker.Item label="JavaScript" value="js" />
      <Picker.Item label="Python" value="python" />
      <Picker.Item label="C#" value="c#" />
    </Picker>
  );
};
 
export default App;

import React, { useRef, useState } from "react";
import { Picker } from "@react-native-picker/picker";
import { Button } from "react-native";
 
const App = () => {
  const pickerRef = useRef<any>();
  const [selected, setSelected] = useState<string>();
  const open = () => pickerRef.current?.focus();
  const close = () => pickerRef.current?.blur();
  return (
    <>
      <Picker
        ref={pickerRef}
        selectedValue={selected}
        onValueChange={(itemValue) => setSelected(itemValue)}
      >
        <Picker.Item label="Java" value="java" />
        <Picker.Item label="JavaScript" value="js" />
      </Picker>
      <Button title="Open" onPress={open} />
      <Button title="Close" onPress={close} />
    </>
  );
};
 
export default App;

npm install react-native-element-dropdown
 # 또는
yarn add react-native-element-dropdown

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Dropdown } from 'react-native-element-dropdown';
 
const data = [
  { label: 'Java', value: 'java' },
  { label: 'JavaScript', value: 'js' },
  { label: 'Python', value: 'python' },
  { label: 'C#', value: 'c#' },
];
 
const App = () => {
  const [value, setValue] = useState(null);
 
  return (
    <View style={styles.container}>
      <Dropdown
        style={styles.dropdown}
        placeholderStyle={styles.placeholderStyle} // 빈 상태의 텍스트 스타일
        selectedTextStyle={styles.selectedTextStyle} // 선택된 텍스트 스타일
        data={data} // 표시할 데이터
        labelField="label" // 표시할 데이터의 레이블 필드
        valueField="value" // 표시할 데이터의 값 필드
        placeholder="언어 선택" // 빈 상태의 텍스트
        value={value} // 선택된 값
        onChange={(item) => {
          setValue(item.value); // 선택된 값 업데이트
        }}
      />
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: { padding: 16 },
  dropdown: {
    height: 50,
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 8,
    paddingHorizontal: 12,
  },
  placeholderStyle: {
    fontSize: 16,
    color: '#999',
  },
  selectedTextStyle: {
    fontSize: 16,
    color: '#333',
  },
});
 
export default App;