android app crashs when i use position or zIndex style properties in react-native-CodePudding

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

CodePudding user response：

"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)",
  },