The dropdown component is used to create dropdown selectable options anywhere in the application.

To use the dropdown component, please view below props that are needed to construct one:

• items - dropdown items

  • Dropdown Item Formatting Example

    [
      {label: 'Car', value: 'car'},
      {label: 'Van', value: 'van'},
    ]
    

  • Array

• label - dropdown label

  • String

• open - is the dropdown open or closed

  • Boolean

• placeholder - placeholder value displayed in the dropdown before anything is selected

  • String

• setItems - set the values of the options displayed in the dropdown

  • Function

• setOpen - set the value of open to determine the state of the dropdown

  • String

• setValue - set the value that should be selected from the dropdown

  • String

• style - add your custom styles to the dropdown component container

  • Object

• textMarginLeft - margin from the left side displayed in the dropdown

  • Number

• value - value displayed that is selected in the dropdown

  • String

• zIndex - value to determine the z index of the dropdown. This might be needed to overlay the components around the dropdown.

• Example:

  <Dropdown
    zIndex={1000}
    open={false}
    value={'van'}
    items={
  		[
  	    {label: 'Car', value: 'car'},
  	    {label: 'Van', value: 'van'},
  	  ]
  	}
    setOpen={() => console.log('set open')}
    setValue={() => console.log('set value')}
    setItems={() => console.log('set items')}
    label="Vehicle Type"
  />
  

• src/screens/VehicleRegistrationModule/CarRegistrationScreen/CarRegistrationScreen.js

This component can be enhanced since it uses third part library. To learn more about other options please visit:

https://github.com/hossein-zare/react-native-dropdown-picker