fix: Focus and ref fixes (#284)

Author: mateusz1913

README.md

@@ -14,6 +14,7 @@
 
 | @react-native-picker/picker | react-native |
 | --- | --- |
+| >= 1.16.0 | 0.61+ |
 | >= 1.2.0 | 0.60+ or 0.59+ with [Jetifier](https://www.npmjs.com/package/jetifier) |
 | >= 1.0.0 | 0.57 |
 
@@ -146,7 +147,7 @@ Add `Picker` like this:
 </Picker>
 ```
 
-If you want to open/close picker programmatically on android, pass ref to `Picker`:
+If you want to open/close picker programmatically on android (available from version 1.16.0+), pass ref to `Picker`:
 
 ```javascript
 const pickerRef = useRef();
@@ -304,11 +305,11 @@ such that the total number of lines does not exceed this number. Default is '1'
 
 ## Methods
 
-### `blur` (Android only)
+### `blur` (Android only, lib version 1.16.0+)
 
 Programmatically closes picker
 
-### `focus` (Android only)
+### `focus` (Android only, lib version 1.16.0+)
 
 Programmatically opens picker
 

js/PickerAndroid.android.js

@@ -20,7 +20,6 @@ import {
 import AndroidDialogPickerNativeComponent from './AndroidDialogPickerNativeComponent';
 import AndroidDropdownPickerNativeComponent from './AndroidDropdownPickerNativeComponent';
 
-const REF_PICKER = 'picker';
 const MODE_DROPDOWN = 'dropdown';
 
 import type {TextStyleProp} from 'StyleSheet';
@@ -133,17 +132,16 @@ function PickerAndroid(props: PickerAndroidProps, ref: PickerRef): React.Node {
           onValueChange(null, position);
         }
       }
-      const {current} = pickerRef;
 
       // The picker is a controlled component. This means we expect the
       // on*Change handlers to be in charge of updating our
       // `selectedValue` prop. That way they can also
       // disallow/undo/mutate the selection of certain values. In other
       // words, the embedder of this component should be the source of
       // truth, not the native component.
-      if (current[REF_PICKER] && selected !== position) {
+      if (pickerRef.current && selected !== position) {
         // TODO: using setNativeProps is deprecated and will be unsupported once Fabric lands. Use codegen to generate native commands
-        current[REF_PICKER].setNativeProps({
+        pickerRef.current.setNativeProps({
           selected,
         });
       }
@@ -164,7 +162,6 @@ function PickerAndroid(props: PickerAndroidProps, ref: PickerRef): React.Node {
     onFocus: props.onFocus,
     onSelect,
     prompt: props.prompt,
-    ref: pickerRef,
     selected,
     style: props.style,
     backgroundColor: props.backgroundColor,
@@ -173,7 +170,7 @@ function PickerAndroid(props: PickerAndroidProps, ref: PickerRef): React.Node {
     numberOfLines: props.numberOfLines,
   };
 
-  return <Picker ref={REF_PICKER} {...rootProps} />;
+  return <Picker ref={pickerRef} {...rootProps} />;
 }
 
 export default React.forwardRef<PickerAndroidProps>(PickerAndroid);

typings/Picker.d.ts

@@ -4,29 +4,29 @@ import { TextStyle, StyleProp, ViewProps } from 'react-native'
 export type ItemValue  = number | string
 
 export interface PickerItemProps<T = ItemValue> {
-	label?: string;
+   label?: string;
 	value?: T;
 	color?: string;
    fontFamily?: string,
-  testID?: string;
-  /**
-   * Style to apply to individual item labels.
-   * Only following values take effect:
-   *   - 'color'
-   *   - 'backgroundColor'
-   *   - 'fontSize'
-   *   - 'fontFamily'
-   * 
-   * @platform android
-   */
-  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
+   testID?: string;
+   /**
+    * Style to apply to individual item labels.
+    * Only following values take effect:
+    *   - 'color'
+    *   - 'backgroundColor'
+    *   - 'fontSize'
+    *   - 'fontFamily'
+    * 
+    * @platform android
+    */
+   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 {
@@ -69,38 +69,54 @@ export interface PickerProps<T = ItemValue> extends ViewProps {
 	/**
    * Used to locate this view in end-to-end tests.
    */
-  testID?: string;
+   testID?: string;
+    /**
+     * Color of arrow for spinner dropdown in hexadecimal format
+     * @platform android
+     */
+   dropdownIconColor?: string;
+   /**
+   * On Android, used to truncate the text with an ellipsis after computing the text layout, including line wrapping,
+   * such that the total number of lines does not exceed this number. Default is '1'
+   * @platform android
+   */
+   numberOfLines?: number;
+   /**
+    * The string used for the accessibility label. Will be read once focused on the picker but not on change.
+    */
+   accessibilityLabel?: string;
    /**
-    * Color of arrow for spinner dropdown in hexadecimal format
+    * Called when picker is focused
     * @platform android
     */
-  dropdownIconColor?: string;
-
-  /**
-  * On Android, used to truncate the text with an ellipsis after computing the text layout, including line wrapping,
-  * such that the total number of lines does not exceed this number. Default is '1'
-  * @platform android
-  */
-  numberOfLines?: number;
-  
-  /**
-   * The string used for the accessibility label. Will be read once focused on the picker but not on change.
-   */
-  accessibilityLabel?: string;
-
+   onFocus?: (e: NativeSyntheticEvent<TargetedEvent>) => void
+   /**
+    * Called when picker is blurred
+    * @platform android
+    */
+   onBlur?: (e: NativeSyntheticEvent<TargetedEvent>) => void
 }
 
 declare class Picker<T> extends React.Component<PickerProps<T>, {}> {
    /**
      * On Android, display the options in a dialog (this is the default).
      */
-    static readonly MODE_DIALOG: 'dialog';
-    /**
-     * On Android, display the options in a dropdown.
-     */
-    static readonly MODE_DROPDOWN: 'dropdown';
+   static readonly MODE_DIALOG: 'dialog';
+   /**
+    * On Android, display the options in a dropdown.
+    */
+   static readonly MODE_DROPDOWN: 'dropdown';
+
+   static Item: React.ComponentType<PickerItemProps<ItemValue>>;
 
-     static Item: React.ComponentType<PickerItemProps<ItemValue>>;
+   /**
+    * @platform android
+    */
+   focus: () => void
+   /**
+    * @platform android
+    */
+   blur: () => void
 }
 
-export {Picker};
+export { Picker };