List Modes

You have 3 options when choosing the list mode.

• DEFAULT
• FLATLIST
• SCROLLVIEW
• MODAL

listMode="FLATLIST"

Type	Default
string	FLATLIST

Notes

The FlatList component shouldn't be nested inside ScrollView or you'll come across the VirtualizedLists should never be nested inside plain ScrollViews warning.
If this happens to you and you only have a few items, consider using the SCROLLVIEW mode. Otherwise you have to use the MODAL mode.

Change the default list mode

You change the default list mode of the package globally.

DropDownPicker.setListMode("SCROLLVIEW");

Props

flatListProps

Adds native props for the FlatList.

flatListProps={{
  initialNumToRender: 10
}}

Type
FlatListProps

scrollViewProps

Adds native props for the ScrollView.

scrollViewProps={{
  decelerationRate: "fast"
}}

Type
ScrollViewProps

modalProps

Adds native props for the Modal.

modalProps={{
  animationType: "fade"
}}

Type
ModalProps

modalTitle

Sets modal title.
listMode="MODAL" and searchable={false} are required.

modalTitle="Select an item"

modalAnimationType

This prop controls how the modal animates.

Possible values:

• slide slides in from the bottom,
• fade fades into view,
• none appears without an animation.

modalAnimationType="slide"

Type	Default
enum('none', 'slide', 'fade')	none

Styling

modalContentContainerStyle

modalContentContainerStyle={{
  backgroundColor: "#fff"
}}

modalTitleStyle

modalTitleStyle={{
  fontWeight: "bold"
}}