Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to give z-index property in react native android app

Tags:

react-native

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
  }
});
like image 472
Harinder88 Avatar asked Sep 21 '16 10:09

Harinder88


1 Answers

Updated answer: zIndex now work in ReactNative.

Did you try elevation style property?

autoContainer: {
    ...,
    elevation: 3,
}

Checkout the following links:

  1. View

  2. Elevation

like image 127
Pir Shukarullah Shah Avatar answered Jan 03 '23 15:01

Pir Shukarullah Shah