z-index issue in react-native

Question

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

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

but other components are overlapping the scroll dropdown. I changed top to Bottom but the components which were on the top of scrollview are not getting overlapped.

As I am new to this react-native and unaware of reactjs I am unable to figure out solution and terms to express my problem please help. I have attached screen shot of my problem in the below image I have a society dropdown in scrollview component and area is another scrollview which is visible and overlaps the first component

Answer 1

zIndex property is supported as of react-native version 0.29.0 . Check the documentation .

zIndex controls which components display on top of others. Normally, you don't use zIndex. Components render according to their order in the document tree, so later components draw over earlier ones. zIndex may be useful if you have animations or custom modal interfaces where you don't want this behavior.

It works like the CSS z-index property - components with a larger zIndex will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for more details.

On iOS, zIndex may require Views to be siblings of each other for it to work as expected.

Answer 2

EDIT: React Native now does support the z-index property! https://facebook.github.io/react-native/docs/layout-props.html

== old answer ==

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

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

The <Text> will always be above the <Image> .

Answer 3

I had a similar issue and it came from the fact that the zIndex wasn't applied to the right component. For instance 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 2 form inputs below, you need to add zIndex: 100 to its container , the View with selectInput style.

Answer 4

Add both of your dropdowns in separate views and give zindex:1 to the first view and zIndex:-1 to the second dropdowns view. It worked for me!

Answer 5

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