GeekyAnts / GeekyAnts/NativeBase
Give the possibility to change the Select onPress method and/or remove the default Actionsheet
- Dominant language
- TypeScript
- Stars
- 20.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
### 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 :
```js
navigation.navigate('MyStack', {
screen: 'SearchCity',
params: {
onSelect: value => {
setCityId(value.id);
setCityName(value.name);
},
},
})
}>
{!cityId && !cityName && (
)}
```
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 :
```js
...
```
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 :
```js
{
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={} />}
>
...
```
### 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_
Contributor guide
Research direction
Start at the Select component and its TypeScript props, then trace the Pressable onPress behavior and default Actionsheet usage. Done means consumers can override the press behavior, omit the default Actionsheet, and pass InputLeftElement without a TypeScript error; verify the resulting Select interactions and typings.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- frontend, mobile
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100