I am trying to implement a dropdown picker using react-native-dropdown-picker inside an elevated TouchableWithoutFeedback container. However whenever I click on an item inside the picker, instead trigger the TouchableWithoutFeedback component underneath. I have recreated a simple Snack Expo for reference. My styling for the container and the dropdown menu is as follows:
container: { backgroundColor: 'white', borderRadius: 16, paddingVertical: 17, paddingHorizontal: 20, flexDirection: 'row', justifyContent: 'space-between', width: wp('90%'), shadowColor: '#0d263a', shadowOpacity: 0.15, shadowOffset: { width: 0, height: 15 }, elevation: 20, borderWidth: 2, marginBottom: 12, zIndex: -1, },The Dropdown Menu style is:
container: { width: '50%', }, selectedItemContainer: { backgroundColor: palette.lightBlue, }, style: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: '100%', height: 50, borderRadius: 8, borderWidth: 1, borderColor: palette.lightBlue, paddingHorizontal: 10, backgroundColor: palette.lightBlue, }, label: { flex: 1, color: palette.darkBlue, }, labelContainer: { flex: 1, flexDirection: 'row', }, arrowIcon: { width: 20, height: 20, }, tickIcon: { width: 20, height: 20, }, listBody: { height: '100%', }, listBodyContainer: { flexGrow: 1, alignItems: 'center', }, dropDownContainer: { position: 'absolute', backgroundColor: palette.white, borderRadius: 8, borderColor: palette.white, borderWidth: 1, width: '100%', overflow: 'hidden', zIndex: 9999, borderBottomEndRadius: 10, }, modalContentContainer: { flexGrow: 1, }, listItemContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', paddingHorizontal: 10, height: 40, }, listItemLabel: { flex: 1, color: palette.darkBlue, textAlign: 'center', }, itemSeparator: { height: 1, backgroundColor: palette.lightBlue, }, flatListContentContainer: { flexGrow: 1, },I am not sure where the error is coming from, is it because of the elevation?