How to Use Zindex in React-Native

How to use zIndex in react-native

I finally solved this by creating a second object that imitates B.

My schema now looks like this:

I now have B1 (within parent of A) and B2 outside of it.

B1 and B2 are right next to one another, so to the naked eye it looks as if it's just 1 object.

zIndex in React Native

This has been implemented in iOS as of 0.30 (see the commit changes) and in android in 0.31 (changes)

I have made a simple example component for how I have been using it:

'use-strict';

import React, { Component } from 'react';
const { View, StyleSheet } = require('react-native');

const styles = StyleSheet.create({
    wrapper: {
        flex:1,
    },
    back: {
        width: 100,
        height: 100,
        backgroundColor: 'blue',
        zIndex: 0
    },
    front: {
        position: 'absolute',
        top:25,
        left:25,
        width: 50,
        height:50,
        backgroundColor: 'red',
        zIndex: 1
    }
});

class Layers extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={styles.wrapper}>
                <View style={styles.back}></View>
                <View style={styles.front}></View>
            </View>
        );
    }
}

module.exports = Layers;

How to dynamically change zIndex in react native?

You can use state to update the style of the popup:

import { styles } from './App_styles';
import {useState} from 'React';

 export default function App() {

  const [zIndex, setZIndex] = useState(1);

  return (
    <View style={styles.body}>
      
      <Pressable onPress={()=>{setZIndex(0)}}>
      <View style={[styles.popup, {zIndex: zIndex}]}>
        
      </View>
      </Pressable>

      <View style={styles.main_content}>

      </View>

    </View>
  );
  }

zIndex isn't working for a react native project

In React Native we have position: relative by default. If you want to make the correct use of zIndex, you might need to add position: 'absolute', for them to overlap as described in your use case.

For example:

<View style={{flex: 1}}>
               <View style={{width: 200, height: 200, zIndex: 1, position: 'absolute', backgroundColor: 'red'}} />
               <View style={{width: 200, height: 200, zIndex: 2, position: 'absolute', backgroundColor: 'blue'}} />
 </View>

React Native z-index strange behavior

this happening because all the Options containers have the same z-index , to solve this you can pass zIndex as a prop to the styled component , the value you pass is dependent on wither the dropDown is active or not so if its active you pass a high value if its not pass a low value this insures the active DropDown is always on top , also for this to work properly their should be either one expanded dropdown or none

const Options = styled(Flex)`
  background-color: ${colors.white};
  position: absolute;
  z-index:${({zIndex})=>zIndex} ;
  transform: translateY(26px);
  top: 0;
  left: 4px;
  right: 4px;
  box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.16);
  border-bottom-left-radius: 26px;
  border-bottom-right-radius: 26px;
`



const Select = (props: Props) => {
  const { items,index, value,isActive,setActiveDropDown, ...rest } = props

  return (
    <Container onClick{e=>setActiveDropDown(index)}  direction="column">
      <Input />
      {
         isActive
         ?<Options  zIndex={isActive?9000:1000}  direction="column">
        <Option>
          <Text>Opcja 1</Text>
        </Option>
        <Option>
          <Text>Opcja 1</Text>
        </Option>
      </Options>
        :null
      }
    </Container>
  )
}

in your selects :

const Wrapper=()=>{
      //initializing  activeDropDown <ith -1 means all dropdowns are collapsed 
      const [activeDropDown,setActiveDropDown]=useSate(-1)

    return <View>
         <Select setActiveDropDown={setActiveDropDown} index={0} isActive={activeDropDown==0}  />
         <Select setActiveDropDown={setActiveDropDown} index={1} isActive={activeDropDown==1}  />
         <Select setActiveDropDown={setActiveDropDown} index={2} isActive={activeDropDown==2}  />
    </View>

}

React Native Image Background

Short Answer: Not sure if there is a solid way to do that just with RN styles.

I was thinking that we can use these CSS tricks
so I tried them here but it's not working on Android. If I want to do that, I would use react-native-svg as you are free to draw whatever you want.

---

Related Topics