NativeBase: How to make Picker disabled?

Question

I'm using the Picker component from NativeBase and I want to make it disabled based on a condition.

There is a property that is called enabled and it's only working on Android, what about iOS?

Thanks.

Answer 1

In the current source-code is missing the DISABLED parameter in renderButton method, see: https://github.com/GeekyAnts/NativeBase/blob/master/src/basic/Picker.ios.js

I solved this issue passing the function renderButton to the Picker component, in it I pass the disabled prop to the Button, see this example below:

 renderOptionFieldSOF( props : Object, fieldName : String, optionItems : Array, disabled : Boolean, placeHolderText : String) {
const {width} = Dimensions.get("window");    
const buttonStyle = {backgroundColor: disabled ? "#rgb(200,200,200)" : "transparent" , width: width - 20};
return (<Picker
      mode="dialog"
      enabled={!disabled} /*This works only on Android*/
      renderButton={
        ({onPress, text, picker, selectedItem }) => {
          return (
          <Button
          style={buttonStyle}
          dark
          picker
          transparent
          onPress={onPress}
          disabled={disabled} /*This will disable user interaction on IOS*/
          >
          {selectedItem ? (
            <Text style={this.props.textStyle} note={this.props.note}>
              {text}
            </Text>
          ) : (
              <Text
                style={[this.props.textStyle, this.props.placeholderStyle]}
                note={this.props.note === false ? false : true}>
                {placeHolderText}
              </Text>
            )}
        </Button> 
        )}
      }
      >
 {
   optionItems && optionItems.map( (item) => (<Item label={item.Name} value={item.Key} key={item.Key}/>))
 }
</Picker>);}

Works for me.