Breaking News: Grepper is joining You.com. Read the official announcement!

react-native-dropdown-picker for form react native

Vivacious Vole answered on February 2, 2022 Popularity 10/10 Helpfulness 2/10

answer react-native-dropdown-picker for form react native

related react-native-dropdown-picker

react-native-dropdown-picker for form react native

Comment

import React, { useState } from 'react';
import SelectPicker from 'react-native-form-select-picker'; // Import the package
//...
const options = ["Apple", "Banana", "Orange"];
const YourComponent = ({ /* your props */ }) => {
	const [selected, setSelected] = useState();
	return (
		//...

		<SelectPicker
			onValueChange={(value) => {
				// Do anything you want with the value. 
				// For example, save in state.
				setSelected(value);
			}}
			selected={selected}
			>
			
			{Object.values(options).map((val, index) => (
				<SelectPicker.Item label={val} value={val} key={index} />
			))}

		</SelectPicker>

		//...
	)
}

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: www.npmjs.com

Tags: javascript react-native react-native-dropdown-picker

Link to this answer
Share Copy Link

Contributed on Feb 02 2022

Vivacious Vole

0 Answers Avg Quality 2/10

Closely Related Answers

react-native-dropdown-picker

Comment

#go to the wesite and read the docs
Web_link: https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/
    
#sample: 
#installation
npm install react-native-dropdown-picker

const [facultyOpen, setFacultyOpen] = useState(false);
const [facultyValue, setFacultyValue] = useState('electrical');
const [faculty, setFaculty] = useState([
    { label: 'Electrical & Computer Engineering', value: 'electrical' },
    { label: 'Civil Engineering', value: 'civil' },
    { label: 'Mechanical Engineering', value: 'mechanical' },
]);
#after-return
#used tailwind for style. delete all tw`` part if you don't use tailwind css
<View style={[tw`mb-3 z-50`]}>
          <Text
            style={[
              tw`font-semibold text-purple-600 ml-1 mb-1`,
              { fontSize: 18 },
            ]}
          >
            Faculty
          </Text>
          <DropDownPicker
            open={facultyOpen}
            value={facultyValue}
            items={faculty}
            setValue={setFacultyValue}
            setItems={setFaculty}
            setOpen={setFacultyOpen}
            style={[tw`bg-gray-200 w-full px-4 py-3 border-0`]}
            containerStyle={[tw`border-0 bg-gray-200 rounded-lg`]}
            dropDownContainerStyle={[
              tw``,
              {
                backgroundColor: '#E5E7EB',
                borderRadius: 10,
                zIndex: 1,
                borderWidth: 0,
              },
            ]}
          />
        </View>

Popularity 10/10 Helpfulness 3/10 Language python

Source: Grepper

Tags: python py

Link to this answer
Share Copy Link

Contributed on Jun 14 2022

@iinaamasum

0 Answers Avg Quality 2/10

react-native-dropdown-picker for form react native

Contents

More Related Answers

react-native-dropdown-picker for form react native

Closely Related Answers

react-native-dropdown-picker

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.