DropDown
component in React Native is designed to manage drop-downs within your application. The component is split into 6 key parts: DropDown
, which acts as the context provider containing the other 5 parts; DropDownTrigger
, handles the action to open and close the dropdown; DropDownLabel
, this is used to label a section in the dropdown menu; DropDownContent
, this contains the actual content to be displayed in the dropdown menu; DropDownItemSeparator
the separator is used to visually separate items in the dropdown menu; DropDownItem
this component contains the dropdown item to be displayed in the dropdown menu.
Light mode
Dark mode
children
- These are the components to be rendered inside the DropDown view. Mainly DropDownTrigger
, DropDownLabel
, DropDownContent
, DropDownItemSeparator
and DropDownItem
.children
: The react element that will trigger the dialog to open. It should be a component that accepts an onPress
prop like a button.children
- Components to be rendered inside the View
element.className?: string
- Tailwind CSS classes to be applied to the View
labelTitle
prop that contains the name/title as the main text shown in the header.
labelTitle
- Text to be rendered inside the DropDownLabel
.children
- Components to be rendered inside the View
element.className?: string
- Tailwind CSS classes to be applied to the View
DropDown
. Then, use DropDownTrigger
to specify the element that will open the dropdown, and the DropDownContent
will now appear when you press on the DropDownTrigger
. The DropDownContent
will contain the content of the dropdown ie. DropDownLabel
, DropDownItem
and DropDownItemSeparator
.