Modes

Modes display selected items.

• DEFAULT
• SIMPLE
• BADGE

mode="SIMPLE"

Type	Default
string	SIMPLE

note

Single item pickers won't be affected by the mode property.

Change the default mode

You can change the default mode of the package globally.

DropDownPicker.setMode("BADGE");

Badge Mode Props

showBadgeDot

Shows dots in the badges.

showBadgeDot={true}

Type	Default
bool	true

badgeProps

Adds native props for the badge container TouchableOpacity.

badgeProps={{
  activeOpacity: 0.5
}}

extendableBadgeContainer

Allows the badges to expand in multiple rows.

Type	Default
bool	false

Callbacks

renderBadgeItem

Renders the selected items.

renderBadgeItem={(props) => <Badge {...props} />}

note

You need to move it to an independent component otherwise the items will be re-rendered.

• See: RenderBadgeItem.js

Type
function

Styling

badgeStyle

badgeStyle={{
  padding: 5
}}

badgeTextStyle

badgeTextStyle={{
  fontStyle: "italic"
}}

badgeDotStyle

badgeDotStyle={{
  borderRadius: 2
}}

badgeSeparatorStyle

badgeSeparatorStyle={{
  width: 30
}}

badgeColors

Gives background colors to badges based on the value.

badgeColors={["red", "blue", "orange"]}

Type
object, string

badgeDotColors

Gives background colors to badge dots based on the value.

badgeDotColors={["red", "blue", "orange"]}

Type
object, string