You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Add a onPress prop on the Select component to customize what to do when we click on the Pressable around the input commonInput.
Add a way to remove the whole Actionsheet used in Select by default.
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
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 :
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 :
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.
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).
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 :
<SelectonPress={()=>{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 nullInputLeftElement={<Iconas={<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
The text was updated successfully, but these errors were encountered:
Description
commonInput
.InputLeftElement
prop so TypeScript do not show an error. It's actually working to pass this prop thanks to{...nonLayoutProps}
on theInput
but TypeScript says it does not belong to Select props.Problem Statement
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 :
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.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).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 thecommonInput
).Proposed Solution or API
What would be nice as usage :
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
The text was updated successfully, but these errors were encountered: