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
<code>Select city
</code>
<code>Select city
</code>
Select city
and the user selects
<code>City of Massachusetts
</code>
<code>City of Massachusetts
</code>
City of Massachusetts
from the dropdown list, then the placeholder should be
<code>City of Massachu...
</code>
<code>City of Massachu...
</code>
City of Massachu...
instead of
<code>City of
</code>
<code>City of
</code>
City of
(the word Massachusetts is hidden in the second line).
I tried these two styles:
<code>textStyle: {
flex: 1,
flexWrap: 'nowrap',
numberOfLines: 1,
ellipsizeMode: 'tail',
}
</code>
<code>textStyle: {
flex: 1,
flexWrap: 'nowrap',
numberOfLines: 1,
ellipsizeMode: 'tail',
}
</code>
textStyle: {
flex: 1,
flexWrap: 'nowrap',
numberOfLines: 1,
ellipsizeMode: 'tail',
}
and
<code>placeholderStyle {
flex: 1,
flexWrap: 'nowrap',
numberOfLines: 1,
ellipsizeMode: 'tail',
}
</code>
<code>placeholderStyle {
flex: 1,
flexWrap: 'nowrap',
numberOfLines: 1,
ellipsizeMode: 'tail',
}
</code>
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:
<code>"expo": "~51.0.17"
"react": "18.2.0"
"react-native": "0.74.3"
"react-native-dropdown-picker": "^5.4.6"
</code>
<code>"expo": "~51.0.17"
"react": "18.2.0"
"react-native": "0.74.3"
"react-native-dropdown-picker": "^5.4.6"
</code>
"expo": "~51.0.17"
"react": "18.2.0"
"react-native": "0.74.3"
"react-native-dropdown-picker": "^5.4.6"