react-native bring sub view to front

Question

I have added a dropdown and when I open it, the dropdown menu is hidden behind the views that have been added afterwards. How can I bring the dropdown view to front in react-native. I have now used an overlay and it brings the view to front but the view is not set in its normal location, instead it is displaying as the top most element.

In main render I have a listView:

<ListView ref='listView'
      style = {{ backgroundColor: '#EAEAEC'}}
      dataSource={this.state.dataSource}
      automaticallyAdjustContentInsets={false}
      renderRow={this.renderRow}/>

In render row of listView:

return (



  <View style={{backgroundColor: '#FFF', marginBottom:5, shadowColor : '#BCBCBC', shadowOffset: {width: 0, height: 0}, shadowOpacity: 0.7, height:150}}  >




            <View style={{flex:1, flexDirection:'row',justifyContent: 'center', alignItems: 'center',  backgroundColor: 'yellow', height:100}}>   
               <Overlay isVisible={true}><List /></Overlay>
            </View>  



        <View style={{flex:5, flexDirection:'row',justifyContent: 'flex-end', alignItems: 'center', paddingTop:17, marginBottom:10}}>  

                <View style={{flex:1}}/>
                <View style={{flex:1, alignItems: 'center'}}><Image style={styles.imageStyle} source={require('./audit_new_u.imageset/audit_new_u.png')} /></View>
                <View style={{flex:1, alignItems: 'center'}}><Image style={styles.imageStyle} source={require('./audit_inProcess_u.imageset/audit_inProcess_u.png')} /></View>
                <View style={{flex:1, alignItems: 'center'}}><Image style={styles.imageStyle} source={require('./audit_complete_s.imageset/audit_complete_s.png')} /></View>
                <View style={{flex:1}}/>

        </View>



  </View>


  );

Now the dropdown which is actually the List tag in render row which I have placed in overlay tags is now placed on top of the screen.

Answer 1

Add {zIndex: 999}

<View style={{zIndex: 999}}>
{...anything}
</View>