textInputProps not working as expected

Describe the bug
I want the picker to ellipsize text that is too long.

To Reproduce
I am using the RNPickerSelect inside of a styled component. It also uses an Icon, which after reading some of the other issues, could be a source of the problem.

Expected behavior
After adding the textInputProps = {{numberOfLines: 1, ellipsizeMode: 'tail'}} I expected the issue to go away. However, it doesn’t work as expected, but it does not lead to any further errors.

Screenshots

Additional details

• Android emulator
• If I set the useNativeAndroidPicker to true, it does ellipsize. However, the icon does not respond to being clicked.
• Adding numberOfLines or ellipsizeMode to the styleSheet throws error.

Reproduction and/or code sample

<RNPickerSelect
          placeholder={{
            label: `${i18n.t('selectABoard')}`,
            value: null,
          }}
          items={items}
          onValueChange={
            value => {
              if (value != null && value !== selected) {
                if (boards.find(board => board.name === value.name)) {
                  onBoardSelected(value);
                } else {
                  onCommitteeSelected(value);
                }
              }
            }
          }
          value={selected}
          style={stylesPicker}
          Icon={() => (
            <IconContainer>
              <Entypo
                name="chevron-down"
                color={colors.PRIMARY_BLUE}
                size={20}
              />
            </IconContainer>
          )}
          useNativeAndroidPickerStyle={false}
          textInputProps={{numberOfLines: 1}}
        />

const stylesPicker = StyleSheet.create({
  placeholder: {
    color: colors.PRIMARY_BLUE,
  },
  inputIOS: {
    color: colors.PRIMARY_BLUE,
    height: NAVBAR_HEIGHT,
    paddingLeft: 16,
    paddingRight: 16,
  },
  inputAndroid: {
    color: colors.PRIMARY_BLUE,
    height: NAVBAR_HEIGHT,
    paddingLeft: 16,
    paddingRight: 16,
  },
  iconContainer: {
    alignItems: 'center',
    height: NAVBAR_HEIGHT,
    justifyContent: 'center',
    paddingRight: 16,
  }
});

[Ramaraju1992]

@Andrea-Arguello, @lfkwtz i am also facing the same issue. but i found some TextInput prop that can show the selected text from starting.

textInputProps={{ selection: { start: 0 } }}

but unfortunately for ellipsizeMode: 'tail' Repository Team has to help.

[Andrea-Arguello]

After using the snack provided in this repo https://snack.expo.io/@lfkwtz/react-native-picker-select, I noticed that the issue is reproducible for all pickers with useNativeAndroidPickerStyle set to false, if the text is long enough. Adding textInputProps = {{numberOfLines: 1}} does not fix this. Our case seems to be similar to the custom icon pickers, which do this