I have a simple code where I'm trying to show a semi transparent black screen over my page to show a message or a prompt in the center , so i use zIndex or elevation with position:'fixed' or position:'obsolet' it works fine in web , but when i run the app on android , it crashes with no errors shown.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<View style={styles.dialog}/>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
height:'100%',
justifyContent: 'center',
},
dialog:{
position:'fixed',
zIndex:10,
elevation:10,
backgroundColor: 'rgba(0,0,0,.5)'
}
});
"fixed" is an invalid value for position, can you please give it a shot with absolute as follows:
dialog: {
// position: "fixed",
position: "absolute",
top: 0,
bottom: 0,
right: 0,
left: 0,
zIndex: 10,
elevation: 10,
backgroundColor: "rgba(0,0,0,.5)",
},