Z-index problem in response

Question

How to bring absolutely positioned elements / components on top of other components that appear after that. I am using scrollview component

 style: width: 300, height: 100, position:'absolute', top:30, 

but other components overlap the scroll list. I changed the top to Bottom, but the components that were on top of the scrollview did not overlap.

Since I am new to this reaction and do not know about reactjs , I cannot find a solution and conditions for expressing my problem, please help. I added a screenshot of my problem in the lower image. I have a dropdown in scrollview , and the area is another scroll that is visible and overlaps the first component

Answer 1

zIndex property is supported as version 0.29.0 for iOS .

Answer 2

EDIT: React Native now supports the z-index property! https://facebook.imtqy.com/react-native/docs/layout-props.html

== old answer ==

React Native does not have a z-index property. The z indices are determined in the order of your components. For instance:

 <View> <Image /> <Text /> </View> 

<Text> will always be higher than <Image> .

Answer 3

I had a similar problem and this was due to the fact that zIndex was not applied to the correct component. For example, if you have the following:

 class App extends Component { render () { return ( <View style={styles.form}> <View style={styles.selectInput}> <TextInput placeholder="Select something" /> <Dropdown /> </View> <View style={styles.formInput}> <TextInput placeholder="Stuff" /> </View> <View style={styles.formInput}> <TextInput placeholder="Other stuff" /> </View> </View> ); } } 

And you want your Dropdown component to go above the two form inputs, below you need to add zIndex: 100 to your container , View with selectInput .

Answer 4

zIndex with position will work, without one of them it will not work based on my experience.