TrailingAccessory in Picker causes incorrect rendering on Picker.Item with a long text

[Relax594]

Description

Picker Component is truncating the Item Label too late when having a trailingAccessory assigned.
If I remove the trailingAccessory, it is working fine. Both Picker stop at 100% width of the container.
But when using a trailingAccessory, it gets pushed out of the container as seen on the screenshot below.

Only on Android, iOS is working fine.

Related to

• Components
• Demo
• Docs
• Typings

Steps to reproduce

Add two Picker Components with a trailingAccessory each.
Add Picker.Item with short texts to one Picker and add longer texts, which are wider than the screen width, to the other one.

Expected behavior

Item text on the long item gets truncated to fit the screen size including the trailingAccessory and match styling of the Picker with a short text.

Actual behavior

Item text gets truncated at screen size ignoring the width of the trailingAccessory making the trailingAccessory overlap out of the Picker container.

More Info

Code snippet

const produkte = {
    A: 'PensionsRente Komfort BASIC (mehr garantierte Rente, aber niedrige Kapitalmarktchance)',
    B: 'PensionsRente Komfort BALANCE (mittlere garantierte Rente und mittlere Kapitalmarktchance)',
    C: 'PensionsRente Komfort CHANCE (weniger garantierte Rente, aber hohe Kapitalmarktchance)',
};

<Picker
      trailingAccessory={<Text>&nbsp;€&nbsp;</Text>}
>
            {Object.keys(produkte).map(key => (
                   <Picker.Item
                          key={key}
                          label={produkte[key]}
                          value={key}
                     />
             ))}
</Picker>

Screenshots/Video

Environment

• React Native version: 0.71.15
• React Native UI Lib version: 7.15.0

Affected platforms

• Android
• iOS
• Web

[ethanshar]

Hi @Relax594
This is a known issue with the layout of Picker/TextField
We recently released a prop for fixing it, please pass innerFlexBehavior to Picker

Notice that we don't apply this fix by default because it can lead to other layout issues in some case

See docs

[Relax594]

Hi @ethanshar

Sadly this truncates the text on the wrong side.
The end of the text is showing, however the start of it is missing, which is usually more important than the end and also looks weird.

Beside the weird truncation, it looks good.

Is there any way to fix this?

[EvgenMart]

@ethanshar, The same issue occurs with TextField, and the innerFlexBehavior doesn't resolve the problem. "react-native-ui-lib": "^6.21.2".
It works with:
<TextField
fieldStyle={{ alignSelf: 'center' }}
multiline={!IS_IOS}
But after this, the container stretches to the width of the screen, ignoring the padding of the parent component. This happens when the device text size is increased. I would appreciate any suggestions on how to fix this issue.