picker
picker copied to clipboard
enabled={false} not working on ios
The picker remains enabled when I add the prop enabled={false}. I want to disabled the movement of the picker under certain conditions:
{
<Picker
enabled={false}
itemStyle={styles.itemStyle}
style={styles.picker}
selectedValue={isAdding ? 'add' : selectedHabit}
onValueChange={itemValue => {
if (itemValue === 'add') {
setIsAdding(true);
} else {
setSelectedHabit(itemValue);
onChangeHabit(itemValue);
}
}}>
{habits.map((habit, index) => (
<Picker.Item
key={index}
label={habit}
value={habit}
color={textColor}
/>
))}
<Picker.Item label="+" value="add" color={textColor} />
</Picker>
}
@Gunndroid are you able to solve this issue? If yes, please share your solution here, I am also facing this issue.
I was abled to do a work around to make it to work for me. Apparently the property "enabled" is only available for Android at the time. To make it work on ios I had to encapsulate the Picker inside a View and use the pointerEvents property. When pointerEvents is none the view is unresponsive to touch events. I also made an special style for the picker when the platform is ios in order to reduce the opacity.
<View pointerEvents={selectedCountryId === "Brasil" ? "auto" : "none"}>
<Picker
selectedValue={selectedStateId || ""}
style={selectedCountryId !== "Brasil" && Platform.OS === 'ios' && formDemandaStyles.pickerdisabled]}
onValueChange={(itemValue, itemIndex) => handleDropdownSelect(question.id, itemValue)}
enabled={selectedCountryId === "Brasil"}
>
<Picker.Item label="-- Selecione um estado --" value="" />
{question.states.map((state) => (
<Picker.Item key={state.id} label={state.name} value={state.name} />
))}
</Picker>
</View>