TextInput in absolute positioned LinearGradient doesnot focus - react-native

Question

I have a component with 2 LinearGradient views, both of them with absolute position and one with TextInput. For this setting, TextInput never gains focus in Android.
Code:
class SearchScreen extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<LinearGradient
colors={['blue', 'red']}
style={{
height: 80,
width: '100%',
position: 'absolute',
zIndex: 10,
elevation: 10,
top: 0,
left: 0,
}}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
>
<TextInput
style={{
backgroundColor: 'white',
height: 50,
paddingLeft: 15,
marginTop: 10,
marginBottom: 10,
marginRight: 20,
marginLeft: 20,
borderWidth: 0,
}}
placeholder={'search placeholder'}
onFocus={() => { console.log('onFocus: '); }}
onChangeText={(text) => { console.log('enter text: ', text); }}
onEndEditing={() => { console.log('endEditing: '); }}
/>
</LinearGradient>
<LinearGradient
colors={['red', 'blue']}
style={{
height: 150,
width: '100%',
position: 'absolute',
zIndex: 5,
elevation: 5,
}}
>
</LinearGradient>
</View >
);
}
}
export default SearchScreen;
React Native: 0.55.2
react-native-linear-gradient: 2.4.0
I found the problem is with the 2 absolute positioned LinearGradient View with Text Input. If I remove the one of the LinearGradient, the TextInput works fine as it should.
I've tried providing zIndex to the TextInput too, it doesn't work.
Thanks.

Answer 1

Seems like a bug in the zIndex for android, as it works fine for IOS.
You can use it the following way as a workaround by nesting of linear gradients so that there is no conflict for the overlay element that renders.
<LinearGradient
colors={['red', 'blue']}
style={{
height: 150,
width: '100%',
position: 'absolute',
zIndex: 5,
elevation: 5,
}}
>
<LinearGradient
colors={['blue', 'red']}
style={{
height: 80,
width: '100%',
position: 'absolute',
zIndex: 10,
elevation: 10,
top: 0,
left: 0,
}}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
>
<TextInput
style={{
backgroundColor: 'white',
height: 50,
paddingLeft: 15,
marginTop: 10,
marginBottom: 10,
marginRight: 20,
marginLeft: 20,
borderWidth: 0,
}}
placeholder={'search placeholder'}
onFocus={() => { console.log('onFocus: '); }}
onChangeText={(text) => { console.log('enter text: ', text); }}
onEndEditing={() => { console.log('endEditing: '); }}
/>
</LinearGradient>
</LinearGradient>