Search code examples
javascriptreact-nativepicker

Using React-native-picker-select headless component


I'm trying to use React-Native-Picker-Selects headless component for both iOS and Android. According to the docs found here:

you can pass children (such as a custom button or input) for the component to wrap (for both iOS and Android

Here is a sample of my code:

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

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

<View style={{flex:1}}>
  <RNPickerSelect
    placeholder={{}}
    items={MyList}
    onValueChange={(itemValue, itemIndex) => {
      console.log('itemValue')
    }}
    style={{...pickerSelectStyles}}
  >
    <View style={{backgroundColor:'purple', flex:1, justifyContent:'center', alignItems:'center'}}>
      <Text>
        Test Text where I should be able to touch to get things to happen
      </Text>
    </View>
  </RNPickerSelect>

  const pickerSelectStyles = StyleSheet.create({
    headlessAndroidContainer: {
      flex:1
    }
  });
  <View style={{height:height * 0.5}}>
    <Text>test</Text>
  </View>
</View>
const pickerSelectStyles = StyleSheet.create({
  viewContainer: {
    flex:1,
    backgroundColor: 'purple',
  },
  headlessAndroidContainer: {
    backgroundColor: 'purple',
    flex:1
  }
});

What I expect to happen is that on my screen I see two-section, half purple, and half white. The purple section has the text saying that things should happen, and the white section should have Tested. I should be able to tap anywhere on the purple section and my picker with MyList should come up.

This is working as expected on a simulator, but not on a real android device. on a real device, it seems that I'm able to tap around on the purple area, and the picker shows up very sporadically. Any assistance would be greatly appreciated!

Edit: Forgot to mention that this is specifically an android problem, it works on both real and simulated iPhones


Solution

  • Seems like having the RNPickerselect wrapped in a TouchableWithoutFeedback breaks it for some reason, once outside that tag it worked fine.