How can I truncate the text in DropDownPicker (react-native-dropdown-picker)?

While using DropDownPicker (in a react native expo project for android), I want to truncate long text at the placeholder.

For example, if the placeholder is

Select city

and the user selects

City of Massachusetts

from the dropdown list, then the placeholder should be

City of Massachu...

instead of

City of

(the word Massachusetts is hidden in the second line).

I tried these two styles:

textStyle: {
    flex: 1,
    flexWrap: 'nowrap',
    numberOfLines: 1,
    ellipsizeMode: 'tail',
}

and

placeholderStyle {
    flex: 1,
    flexWrap: 'nowrap',
    numberOfLines: 1,
    ellipsizeMode: 'tail',
}

but with no luck.

So the question is, how can I achieve truncation WITHOUT using a custom component?

I use these versions:

"expo": "~51.0.17"
"react": "18.2.0"
"react-native": "0.74.3"
"react-native-dropdown-picker": "^5.4.6"

Solution

You should add this to the props

labelProps={{
  numberOfLines: 1
}}