DropDownPicker 속성 파헤치기

- 결과물

요 드롭다운을 만들어볼 것이다.

라이브러리 써서 간단해보이지만...

속성 찾느라 힘들었더란다...

 

 

 

- 다운받기

npm install react-native-dropdown-picker

 

 

- 드롭다운 내부 background color 조절하는 속성

dropDownContainerStyle={{backgroundColor: 'transparent', borderColor:"white",zIndex:100}}

 

 

- 드롭다운 내부 text color 조절하는 속성

listItemLabelStyle={{ color: 'white', zIndex:"100" }}

 

 

- 드롭다운 arrow icon 크기 조절하는 속성

arrowIconStyle={{width: 20, height: 20}}

 

 

- 드롭박스 내부 value 중 선택된 값이 보여질 때 text color가 white로 보여지고 싶을 때 쓰는 속성

labelStyle={{ color: 'white' }}

 

 

- 드롭다운 아이콘 컬러를 변경하는 법을 모르겠다 ㅠ

- 아예 드롭 다운 아이콘 표시를 없애버리자!

showArrowIcon={false}

 

 

- 드롭다운은 기본 아래로 내려오지만 아래 공간이 협소할 경우 위로 뜬다.

- 하지만 계속 드롭다운이 아래로 내려왔으면 좋겠다?

dropDownDirection="DOWN"

 

 

 

- 전체 코드

import React, { useState, useCallback } from "react";
import {
  View,
  TextInput,
  Text,
  TouchableOpacity,
} from "react-native";
import DropDownPicker from "react-native-dropdown-picker";
import {useForm, Controller} from 'react-hook-form';
import tw from "twrnc";


const SleepTerm = () => {

  const [time, setTime] = useState(0);

  const [genderOpen, setGenderOpen] = useState(false);
  const [genderValue, setGenderValue] = useState(null);
  const [gender, setGender] = useState([
    { label: "12시간", value:12 },
    { label: "11시간", value:11 },
    { label: "10시간", value:10 },
    { label: "9시간", value:9 },
    { label: "8시간", value:8 },
    { label: "7시간", value:7 },
    { label: "6시간", value:6 },
    { label: "5시간", value:5 },
    { label: "4시간", value:4 },
    { label: "3시간", value:3 },
    { label: "2시간", value:2 },
    { label: "1시간", value:1 },
  ]);

  const [loading, setLoading] = useState(false);
  const onGenderOpen = useCallback(() => {
    setCompanyOpen(false);
  }, []);

  const { handleSubmit, control } = useForm();
  const onSubmit = (data) => {
    console.log(data, "data");
  };


  return (
    <View style={[tw`flex-1 w-[100%] h-50 p-8`]}>
      <Controller
        name="gender"
        defaultValue="Starry"
        control={control}
        render={({ field: { onChange, value } }) => (
            // drop down style
          <View>
            <DropDownPicker
              style={tw`border-white bg-[#00ff0000]`}
              open={genderOpen}
              value={time} //genderValue
              items={gender}
              setOpen={setGenderOpen}
              setValue={setTime}
              setItems={setGender}
              placeholder="숙면 시간"
              placeholderStyle={tw`bg-[#00ff0000] text-[#B7B7B7]`}
              onOpen={onGenderOpen}
              onChangeValue={setTime}
              zIndex={3000}
              zIndexInverse={1000}
              showArrowIcon={false}
              dropDownContainerStyle={{backgroundColor: 'transparent', borderColor:"white",zIndex:100}}
              listItemLabelStyle={{ color: 'white', zIndex:"100" }}
              labelStyle={{ color: 'white' }}
            />
          </View>
        )}
      />

    
    </View>
  );
};

export default SleepTerm;

 

라이브러리 예시가 gender여서 gender로 변수명이 남아있는 곳이 많다.

바꿔 쓰고 싶다면 바꿔쓰기!