fixAndroidTouchableBug (lawnstarter#377)

Author: lfkwtz

.circleci/config.yml

@@ -9,7 +9,7 @@ jobs:
             CC_TEST_REPORTER_ID: 9b36beb22e04451e6414fcc28926f995c253d94877f616b50d192255196fbb68
         docker:
             # specify the version you desire here
-            - image: circleci/node:10.16.0-stretch-browsers
+            - image: circleci/node:12.19.0-stretch-browsers
 
             # Specify service dependencies here if necessary
             # CircleCI maintains a library of pre-built images

CHANGELOG.md

@@ -1,3 +1,11 @@
+## 8.0.2
+
+##### Bugfix
+
+-   Add `fixAndroidTouchableBug` prop (#354)
+
+---
+
 ## 8.0.1
 
 ##### Bugfix

README.md

@@ -35,7 +35,6 @@ npx pod-install
 expo install @react-native-community/picker
 ```
 
-
 ### Basic Usage
 
 ```js
@@ -80,6 +79,7 @@ export const Dropdown = () => {
 | `touchableWrapperProps`                         | Additional props to pass to the touchable wrapping the TextInput (some props are used in core functionality so use this carefully)                                                                                                                                                                                                                                                                                                                                                                      | object                   |
 | `onOpen`<br>                                    | Callback triggered right before the opening of the picker<br>_Not supported when `useNativeAndroidPickerStyle={true}`_                                                                                                                                                                                                                                                                                                                                                                                  | function                 |
 | `useNativeAndroidPickerStyle`<br>_Android only_ | The component defaults to using the native Android Picker in its un-selected state. Setting this flag to `false` will mimic the default iOS presentation where a tappable TextInput is displayed.<br>_More details in [styling](#styling)_                                                                                                                                                                                                                                                              | boolean                  |
+| `fixAndroidTouchableBug`<br>_Android only_      | Experimental flag to fix issue [#354](https://github.com/lawnstarter/react-native-picker-select/issues/354)                                                                                                                                                                                                                                                                                                                                                                                             | boolean                  |
 | `InputAccessoryView`<br>_iOS only_              | Replace the InputAcessoryView section (bar with tabbing arrown and Done button) of the opened picker with your own custom component. Can also return `null` here to hide completely. While this bar is typical on `select` elements on the web, the [interface guidelines](https://developer.apple.com/ios/human-interface-guidelines/controls/pickers/) does not include it. View the [snack](https://snack.expo.io/@lfkwtz/react-native-picker-select) to see examples on how this can be customized. | Component                |
 | `doneText`<br>_iOS only_                        | "Done" default text on the modal. Can be overwritten here                                                                                                                                                                                                                                                                                                                                                                                                                                               | string                   |
 | `onUpArrow / onDownArrow`<br>_iOS only_         | Presence enables the corresponding arrow<br>- Closes the picker<br>- Calls the callback provided                                                                                                                                                                                                                                                                                                                                                                                                        | function                 |

index.d.ts

@@ -72,6 +72,7 @@ export interface PickerSelectProps {
     children?: React.ReactNode;
     onOpen?: () => void;
     useNativeAndroidPickerStyle?: boolean;
+    fixAndroidTouchableBug?: boolean;
     doneText?: string;
     onDonePress?: () => void;
     onUpArrow?: () => void;

package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-picker-select",
-    "version": "8.0.1",
+    "version": "8.0.2",
     "description": "A Picker component for React Native which emulates the native <select> interfaces for each platform",
     "license": "MIT",
     "author": "Michael Lefkowitz <[email protected]>",

src/index.js

@@ -30,6 +30,7 @@ export default class RNPickerSelect extends PureComponent {
         children: PropTypes.any, // eslint-disable-line react/forbid-prop-types
         onOpen: PropTypes.func,
         useNativeAndroidPickerStyle: PropTypes.bool,
+        fixAndroidTouchableBug: PropTypes.bool,
 
         // Custom Modal props (iOS only)
         doneText: PropTypes.string,
@@ -70,6 +71,7 @@ export default class RNPickerSelect extends PureComponent {
         style: {},
         children: null,
         useNativeAndroidPickerStyle: true,
+        fixAndroidTouchableBug: false,
         doneText: 'Done',
         onDonePress: null,
         onUpArrow: null,
@@ -469,11 +471,20 @@ export default class RNPickerSelect extends PureComponent {
     }
 
     renderAndroidHeadless() {
-        const { disabled, Icon, style, pickerProps, onOpen, touchableWrapperProps } = this.props;
+        const {
+            disabled,
+            Icon,
+            style,
+            pickerProps,
+            onOpen,
+            touchableWrapperProps,
+            fixAndroidTouchableBug,
+        } = this.props;
         const { selectedItem } = this.state;
 
+        const Component = fixAndroidTouchableBug ? View : TouchableOpacity;
         return (
-            <TouchableOpacity
+            <Component
                 testID="android_touchable_wrapper"
                 onPress={onOpen}
                 activeOpacity={1}
@@ -496,7 +507,7 @@ export default class RNPickerSelect extends PureComponent {
                         {this.renderPickerItems()}
                     </Picker>
                 </View>
-            </TouchableOpacity>
+            </Component>
         );
     }
 
@@ -560,6 +571,7 @@ export default class RNPickerSelect extends PureComponent {
         if (children || !useNativeAndroidPickerStyle) {
             return this.renderAndroidHeadless();
         }
+
         return this.renderAndroidNativePickerStyle();
     }
 }

test/test.js

@@ -386,6 +386,22 @@ describe('RNPickerSelect', () => {
         expect(onOpenSpy).toHaveBeenCalledWith();
     });
 
+    it('should use a View when fixAndroidTouchableBug=true (Android)', () => {
+        Platform.OS = 'android';
+        const wrapper = shallow(
+            <RNPickerSelect
+                items={selectItems}
+                onValueChange={noop}
+                useNativeAndroidPickerStyle={false}
+                fixAndroidTouchableBug
+            />
+        );
+
+        const touchable = wrapper.find('[testID="android_touchable_wrapper"]');
+
+        expect(touchable.type().displayName).toEqual('View');
+    });
+
     it('should call the onClose callback when set', () => {
         Platform.OS = 'ios';
         const onCloseSpy = jest.fn();