picker icon indicating copy to clipboard operation
picker copied to clipboard

enabled={false} not working on ios

Open Gunndroid opened this issue 1 year ago • 1 comments

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 avatar Jun 29 '24 21:06 Gunndroid

@Gunndroid are you able to solve this issue? If yes, please share your solution here, I am also facing this issue.

Maneesh27 avatar Aug 12 '24 17:08 Maneesh27

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>

lfalconr avatar Dec 04 '24 14:12 lfalconr