feat: disable picker item (#236)

README.md

@@ -266,6 +266,65 @@ such that the total number of lines does not exceed this number. Default is '1'
 | ------- | -------- | -------- |
 | number  | No       | Android  |
 
+## PickerItemProps
+
+Props that can be applied to individual `Picker.Item`
+
+### `label`
+
+Displayed value on the Picker Item
+
+| Type    | Required | 
+| ------- | -------- | 
+| string  | yes       | 
+
+
+### `value`
+
+Actual value on the Picker Item
+
+| Type    | Required |
+| ------- | -------- |
+| number,string | yes     |
+
+### `color`
+
+Displayed color on the Picker Item
+
+| Type    | Required | 
+| ------- | -------- | 
+| string  | no       | 
+
+
+### `fontFamily`
+
+Displayed fontFamily on the Picker Item
+
+| Type    | Required |
+| ------- | -------- |
+| string  | no      | 
+
+
+### `style`
+
+Style to apply to individual item labels.
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| ViewStyleProp  | no       | Android  |
+
+
+### `enabled`
+
+If set to false, the specific item will be disabled, i.e. the user will not be able to make a selection
+
+@defailt: true
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean  | no       | Android  |
+
+
 ### PickerIOS
 ### Props
 

android/src/main/java/com/reactnativecommunity/picker/ReactPickerManager.java

@@ -171,6 +171,7 @@ public View getDropDownView(int position, View convertView, ViewGroup parent) {
     private View getView(int position, View convertView, ViewGroup parent, boolean isDropdown) {
       ReadableMap item = getItem(position);
       @Nullable ReadableMap style = null;
+      boolean enabled = true;
 
       if (item.hasKey("style")) {
         style = item.getMap("style");
@@ -183,6 +184,14 @@ private View getView(int position, View convertView, ViewGroup parent, boolean i
         convertView = mInflater.inflate(layoutResId, parent, false);
       }
 
+      if (item.hasKey("enabled")) {
+        enabled = item.getBoolean("enabled");
+      }
+
+      convertView.setEnabled(enabled);
+      // Seems counter intuitive, but this makes the specific item not clickable when enable={false}
+      convertView.setClickable(!enabled);
+
       final TextView textView = (TextView) convertView;
       textView.setText(item.getString("label"));
       textView.setMaxLines(mNumberOfLines);

example/src/PickerExample.tsx

@@ -57,6 +57,18 @@ function DisabledPickerExample() {
   );
 }
 
+function DisabledSpecificPickerExample() {
+  const [value] = React.useState('key1');
+
+  return (
+    <Picker selectedValue={value}>
+      <Item label="hello" value="key0" enabled={true} />
+      <Item label="world" value="key1" />
+      <Item label="disabled" value="key2" enabled={false} />
+    </Picker>
+  );
+}
+
 function DropdownPickerExample() {
   const [value, setValue] = React.useState('key1');
 
@@ -203,6 +215,10 @@ export const examples = [
     title: 'Disabled Picker',
     render: DisabledPickerExample,
   },
+  {
+    title: 'Disabled Specific Picker',
+    render: DisabledSpecificPickerExample,
+  },
   {
     title: 'Dropdown Picker',
     render: DropdownPickerExample,

js/AndroidDialogPickerNativeComponent.js

@@ -12,40 +12,13 @@
 
 import {requireNativeComponent} from 'react-native';
 
-import type {SyntheticEvent} from 'react-native/Libraries/Types/CoreEventTypes';
-import type {
-  TextStyleProp,
-  ViewStyleProp,
-} from 'react-native/Libraries/StyleSheet/StyleSheet';
+import type {TextStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
 import type {NativeComponent} from 'react-native/Libraries/Renderer/shims/ReactNative';
-
-type PickerAndroidChangeEvent = SyntheticEvent<
-  $ReadOnly<{|
-    position: number,
-  |}>,
->;
-
-type Item = $ReadOnly<{|
-  label: string,
-  value: ?(number | string),
-  color?: ?number,
-  fontFamily: ?string,
-  /**
-   * Style to apply to individual item labels.
-   * Only following values take effect:
-   *   - 'color'
-   *   - 'backgroundColor'
-   *   - 'fontSize'
-   *   - 'fontFamily'
-   *
-   * @platform android
-   */
-  style?: ?ViewStyleProp,
-|}>;
+import type {PickerAndroidChangeEvent, PickerItem} from './types';
 
 type NativeProps = $ReadOnly<{|
   enabled?: ?boolean,
-  items: $ReadOnlyArray<Item>,
+  items: $ReadOnlyArray<PickerItem>,
   mode?: ?('dialog' | 'dropdown'),
   onSelect?: (event: PickerAndroidChangeEvent) => void,
   selected: number,

js/AndroidDropdownPickerNativeComponent.js

@@ -12,40 +12,13 @@
 
 import {requireNativeComponent} from 'react-native';
 
-import type {SyntheticEvent} from 'react-native/Libraries/Types/CoreEventTypes';
-import type {
-  TextStyleProp,
-  ViewStyleProp,
-} from 'react-native/Libraries/StyleSheet/StyleSheet';
+import type {TextStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
 import type {NativeComponent} from 'react-native/Libraries/Renderer/shims/ReactNative';
-
-type PickerAndroidChangeEvent = SyntheticEvent<
-  $ReadOnly<{|
-    position: number,
-  |}>,
->;
-
-type Item = $ReadOnly<{|
-  label: string,
-  value: ?(number | string),
-  color?: ?number,
-  fontFamily: ?string,
-  /**
-   * Style to apply to individual item labels.
-   * Only following values take effect:
-   *   - 'color'
-   *   - 'backgroundColor'
-   *   - 'fontSize'
-   *   - 'fontFamily'
-   *
-   * @platform android
-   */
-  style?: ?ViewStyleProp,
-|}>;
+import type {PickerAndroidChangeEvent, PickerItem} from './types';
 
 type NativeProps = $ReadOnly<{|
   enabled?: ?boolean,
-  items: $ReadOnlyArray<Item>,
+  items: $ReadOnlyArray<PickerItem>,
   mode?: ?('dialog' | 'dropdown'),
   onSelect?: (event: PickerAndroidChangeEvent) => void,
   selected: number,

js/PickerAndroid.android.js

@@ -50,13 +50,17 @@ function PickerAndroid(props: PickerAndroidProps): React.Node {
       if (child.props.value === props.selectedValue) {
         selected = index;
       }
+
+      const {enabled = true} = child.props;
+
       const {color, label, style = {}} = child.props;
 
       const processedColor = processColor(color);
 
       return {
         color: color == null ? null : processedColor,
         label,
+        enabled,
         style: {
           ...style,
           color: style.color ? processColor(style.color) : null,

js/types.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+import type {SyntheticEvent} from 'react-native/Libraries/Types/CoreEventTypes';
+import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
+
+export type PickerAndroidChangeEvent = SyntheticEvent<
+  $ReadOnly<{|
+    position: number,
+  |}>,
+>;
+
+export type PickerItem = $ReadOnly<{|
+  label: string,
+  value: ?(number | string),
+  color?: ?number,
+  fontFamily: ?string,
+  /**
+   * Style to apply to individual item labels.
+   * Only following values take effect:
+   *   - 'color'
+   *   - 'backgroundColor'
+   *   - 'fontSize'
+   *   - 'fontFamily'
+   *
+   * @platform android
+   */
+  style?: ?ViewStyleProp,
+  /**
+   * If set to false, the specific item will be disabled, i.e. the user will not be able to make a
+   * selection.
+   * @default true
+   * @platform android
+   */
+  enabled?: ?boolean,
+|}>;

typings/Picker.d.ts

@@ -19,7 +19,14 @@ export interface PickerItemProps<T = ItemValue> {
    * 
    * @platform android
    */
-  style? : StyleProp<TextStyle>
+  style?: StyleProp<TextStyle>
+  /**
+   * If set to false, the specific item will be disabled, i.e. the user will not be able to make a
+   * selection.
+   * @default true
+   * @platform android
+   */
+  enabled?:boolean
 }
 
 export interface PickerProps<T = ItemValue> extends ViewProps {