How to dynamically change zIndex in react native?

Admin 1
Viewed 261

I'm new to react native, how do I dynamically change the Zindex in react native? or how do I hide/show using some other dynamic way?

import { styles } from './App_styles';

 export default function App() {

  return (
    <View style={styles.body}>
      
      <Pressable onPress={()=>{styles.popup.zIndex=0}}>
      <View style={styles.popup}>
        
      </View>
      </Pressable>

      <View style={styles.main_content}>

      </View>

    </View>
  );
  }

App_styles:

export const styles = StyleSheet.create({

    body:{
        backgroundColor: 'gray',
        height:'100%',
    },

    popup: {
        position:'absolute',
        backgroundColor: 'rgba(0,0,0, 0.5)',
        height:'100%',
        width:'100%',
        zIndex:1,
        alignSelf:'center',
        marginTop:'30%',
    },
    
    main_content:{
        backgroundColor: 'red',
        width:'100%',
        height:'100%'

    },
    
});

I'm not sure how to dynamically change properties in react native using js

react-native javascript
2 Answers

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>
  );
  }
user_33788210

Just use useState hook

  import { styles } from './App_styles';

  export default function App() {
  const [show, setShow] = useState(true)

  return (
   <View style={styles.body}>
   {show && <View style={styles.popup}>
    
  </View>}
  
  <TouchableOpacity onPress={()=>setShow(!show)}>
  <Text>Show/Hide</Text>
  </TouchableOpacity>

  <View style={styles.main_content}>

  </View>

</View>
  );
 }
user_124827040
Related