I searched lot but i did find that how to give z-index property in react native, if i use zIndex in react native it shows me error that this is not valid style prop type.
here is my code in render. as you can see below that i want to make visible to autoContainer view. so please tell me how i can make it front without using any third party library.
render() {
return (
<View style={{flex:1}}>
<View style={[styles.inputWrap,this.props.error]}>
<TextInput
style={[style.input,this.props.style]}
ref={this.props.name}
onChangeText={(text) =>this.searchItem(this.props.options,text)}
value={this.state.value}
placeholder={this.props.placeholder}
placeholderTextColor="#000000"
keyboardType={this.props.keyboard}
/>
</View>
{this.toggleAuto()}
</View>
)
}
toggleAuto()
{
if(this.state.autoList!='')
{
return (<View style={style.autoContainer}>
{this.renderList(this.state.autoList)}
</View>
);
}
}
const style = StyleSheet.create({
input:{
flex:1,
height:50,
fontSize:16,
backgroundColor:'#ffffff',
paddingLeft:10,
},
autoContainer: {
borderTopColor:"#888888",
borderTopWidth:1,
position:"absolute",
right:0,
left:0
},
list: {
backgroundColor:'#f2f2f2',
padding:10,
borderColor:'#888888',
borderBottomWidth:1,
borderLeftWidth:1,
borderRightWidth:1
}
});
Updated answer: zIndex
now work in ReactNative.
Did you try elevation
style property?
autoContainer: {
...,
elevation: 3,
}
Checkout the following links:
View
Elevation
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With