Picker text overflow issue when using trailingAccessory

[janoslc]

Description

At the Picker element if the content is too long the text / label on iOS disappears. It kind of works on Android: the text appears, but it pushes the trailingAccessory out of position.

Related to

• Components
• Demo
• Docs
• Typings

Steps to reproduce

1. use Picker component
2. Pass value for trailingAccessory prop
3. Select an item with long label - which can't fit the container

Expected behavior

Ellipsis appears at the end of the label, the trailing icon shows at the same position regardless of the label length.

Actual behavior

The label disappears on iOS and the trailingAccessory overflows on Android.

More Info

Picker component doesn't load its default trailing icon (down-icon) as implemented here and I have to pass my own.

Using innerFlexBehavior doesn't solve the issue.

Code snippet

import { useState } from 'react';
import { FontAwesome } from '@expo/vector-icons';

export const TestPicker = (): JSX.Element => {

const [selectedValue, setSelectedValue] = useState('lorem');
const items = [
   {
      label:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida, nulla vel tristique varius',
      value: 'lorem',
    },
    { label: 'banana', value: 'banana' },
  ];

  return (
        <Picker
          containerStyle={{ backgroundColor: 'yellow' }}
          value={selectedValue}
          onChange={(value: string) => setSelectedValue(value)}
          useSafeArea
          items={items}
          trailingAccessory={
            <FontAwesome name="chevron-down" style={{ backgroundColor: 'green' }} />
          }
        />
   )
}

Screenshots/Video

iOS:

Android:

If I change lorem to banana, it looks good.
iOS:

Android:

Environment

• React Native version: "0.76.6"
• React Native UI Lib version: "7.35.0"

Affected platforms

• Android
• iOS
• Web