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