Give the possibility to change the Select onPress method and/or remove the default Actionsheet

[quentinmassias]

Description

1. Add a onPress prop on the Select component to customize what to do when we click on the Pressable around the input commonInput.
2. Add a way to remove the whole Actionsheet used in Select by default.
3. Bonus : Add the InputLeftElement prop so TypeScript do not show an error. It's actually working to pass this prop thanks to {...nonLayoutProps} on the Input but TypeScript says it does not belong to Select props.

Problem Statement

1. I need to navigate to another screen to select a value (with a search bar and a lot of asynchronous choices, could even add filters for example), for that, I did :

<Select
  onOpen={() =>
    navigation.navigate('MyStack', {
      screen: 'SearchCity',
      params: {
        onSelect: value => {
           setCityId(value.id);
           setCityName(value.name);
        },
      },
    })
}>
  {!cityId && !cityName && (
    <Select.Item label={cityName} value={cityId} />
  )}
</Select>

The problem is that the Actionsheet of the Select component is triggered even if I navigate to another screen. As a "quick and dirty" fix, I did this :

<Select
  ...
  _actionSheet={{
    disableOverlay: true,
    display: 'none'
  }}
>
...
</Select>

It does work visually but the Actionsheet is still present and opened in reality, even if the user can not see it. The best would be to be able to override the onPress method to avoid the setIsOpen(true); to be called.

2. If the Actionsheet is not required as in my previous example, being able to tell the Select could be nice too, it would avoid adding the Actionsheet for nothing (and could remove the setIsOpen(true) in onPress method by the same occasion).

3. It is just to remove the TypeScript error, it does not block the use of InputLeftElement prop (to put an icon on the left of the commonInput).

Proposed Solution or API

What would be nice as usage :

<Select
  onPress={() => {
    Keyboard.dismiss();
    navigation.navigate('CollectStack', {
      screen: 'SearchCity',
      params: {
        onSelect: value => {
          onSelect(value.inseeCode);
          setCity(value.city);
        },
      },
    })
  }}
  removeDefaultActionsheet
  // or itemsContainer={null}
  // or any equivalent to remove or say that we do not want to keep the Actionsheet or replace it with something else or null
  InputLeftElement={<Icon as={<CityIcon />} />}
>
...
</Select>

Alternatives

Creating my own component to display a label but having another value controlled, but it's what Select is made for and it's pretty close to fulfill my needs so it would maybe be overkill to do a whole new custom component for that.

Additional Information

No response