Headless component not working as expected on real device

Describe the bug The wrapped component feature seems to work fine on a simulator, but doesn’t work on a real device (tested on pixel 2, and galaxy 9+). in a simulator I’m able to tap on my component wrapped by RNPickerSelect, and the picker comes up, however on a real android device, it doesn’t seem to work, or it works, but sporadically, it works on both real and simulated iPhones.

To Reproduce

Here is some test code that I’ve been using:

import React, { Component } from 'react';
import {
  View,
  Text,
} from 'react-native';

import RNPickerSelect from 'react-native-picker-select';

export default class MyComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      pickerList: null
    };
  }
  render() {
    return (
        <KeyboardAvoidingView
          style={styles.container}
          behavior="padding"
          enabled
        >
           <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
              <View style={{flex:1}}>
                <RNPickerSelect
                  placeholder={{}}
                  items={MyList} // insert whatever elements you want in the picker this doesn't seem to change the issue
                  onValueChange={(itemValue, itemIndex) => {
                    this.setState({
                      prop: 'pickerList',
                      value: itemValue
                    });
                  }}
                  c >
                <View style={{height:height * 0.5}}>
                  <Text>
                    Test Text where I should be able to touch to get things to happen
                  </Text>
                </View>
              </RNPickerSelect>
              <View style={{flex:1}}>
                <Text>test</Text>
              </View>
            </View>

          </TouchableWithoutFeedback>
        </KeyboardAvoidingView>
    );
  }
}
const pickerSelectStyles = StyleSheet.create({
  viewContainer: {
    flex:1,
    backgroundColor: 'purple',
  },
  headlessAndroidContainer: {
    backgroundColor: 'purple',
    flex:1
  }
});

Expected behavior I expect to have two equal divs, one purple and one white. I should be able to click on the purple section and the picker pops up, I should be able to click on the white section and nothing happens.

Screenshots If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Device (real): Pixel 2, Galaxy S9+, Iphone 6s
• Device (Simulated): Pixel 2, iPhone Xs,
• OS: Android 9 (pi) samsung experience 8, iOS 8
• react-native-picker-select version: ^4.4.0
• react-native version: 0.54.4
• react version: [e.g. 16.3]

Hopefully this helps or is already solved somewhere. Thanks!

edit: Updated to hopefully make more clear how I’m using this component. I’ll try and provide a working example when I have a bit more time.

[spot1000]

So… I feel a little silly… It seems that the newest version of the code (version 5) fixes this issue. or at least on the 1 android device that I just tested it on.

[spot1000]

Yeah, seems to be that you just can’t have this component wrapped in a touchablewithoutFeedback tag, which you should probably never have to do I think? I think it probably has something to do with the fact that you probably should have touchablewithoutfeedback as a child of a touchablewithoutfeedback parent.