close

How to use zIndex in react-native

Hello Guys, How are you all? Hope You all Are Fine. Today we are going to learn How to use zIndex in react-native in javascript. So Here I am Explain to you all the possible methods here.

Without wasting your time, Let’s start This Article.

How to use zIndex in react-native ?

  1. How to use zIndex in react-native ?

    to use zIndex in react-native Use elevation instead of zIndex for android devices
    elevatedElement: { zIndex: 3, // works on ios elevation: 3, // works on android }
    This worked fine for me!

  2. How to use zIndex in react-native ?

    to use zIndex in react-native Use elevation instead of zIndex for android devices
    elevatedElement: { zIndex: 3, // works on ios elevation: 3, // works on android }
    This worked fine for me!

Method 1

I believe there are different ways to do this based on what you need exactly, but one way would be to just put both Elements A and B inside Parent A.

    <View style={{ position: 'absolute' }}>    // parent of A
        <View style={{ zIndex: 1 }} />  // element A
        <View style={{ zIndex: 1 }} />  // element A
        <View style={{ zIndex: 0, position: 'absolute' }} />  // element B
    </View>

Method 2

Use elevation instead of zIndex for android devices

elevatedElement: {
  zIndex: 3, // works on ios
  elevation: 3, // works on android
}

This worked fine for me!

Summery

It’s all About this article. Hope all method helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which method worked for you? Thank You.

Leave a Comment