I'm building a Login form in react native with 2 textinputs, one for the mobile phone number and one for the password. The mobile phone input also has the possibility to select the country code with a dropdown, as shown in the following images:
From the main screen component, I insert the two textinputs as custom components:
<CustomInput type="phone" style={/* ... */} ...props />
<CustomInput type="password" style={/* ... */} ...props />
Then, in the phone CustomInput I position the dropdown with position: 'absolute' and custom top/left positioning. I also used the zIndex property in order to display the dropdown above the actual TextInputs, and it works great. The dropdown is composed by a list of
<TouchableOpacity onPress={/* do stuff */}>
<Text>text</Text>
</TouchableOpacity>
While there are no problems on iOS, on Android the buttons that overlaps with the password textinput are not tapped, i.e. when I actually tap them, the underlying TextInput gains focus instead on triggering the TouchableOpacity onPress property. I tried different combinations of zIndex without success.
Is there any possible workaround for this issue, like forcing the tap priority of elements positioned one over the other?