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