ignore safe area in Absolute position child view in react native

I am trying to create overlay over the screen.

But the problem is child view i.e popup screen also have top and bottom safe area added.

I do not want to use this just for 1screen: https://www.npmjs.com/package/react-native-safe-area-context

Here is the code:

    const SomeScreen: FC = () => {
      const [isSuccess, setIsSuccess] = useState<boolean>(true);
    
      return (
        <SafeAreaView style={styles.container}>
          <View style={styles.container}>
             <Text style={styles.titleText}> Some Text </Text>
    
            { isSuccess ? (
              <View style={styles.popUpContainer}>
               <View style={styles.popUpBody}>
                 <Text style={styles.titleText}> {titleText} </Text>
                 <Text style={styles.subtext}> {subtext} </Text>
                 <Text style={styles.subtext}> {buttonText} </Text>
                 <Button title={buttonText} onPress={setIsSuccess(false);} />
               </View>
             </View>
            ) : null}
         </View>
       </SafeAreaView>
      );
    };


StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'orange',
  },
  popUpContainer: {
      height: '100%',
      width: '100%',
      position: 'absolute',
      flex: 1,
      backgroundColor: 'rgba(52, 52, 52, 0.6)',
      justifyContent: 'center',
    },
 popUpBody: {
      backgroundColor: '#fff',
      height: '50%',
      width: '80%',
      justifyContent: 'center',
    },
});

Possible solution i tried and it worked for some device but it is not ideal solution:

 popUpContainer: {
          height: '120%',
          width: '100%',
          position: 'absolute',
          top: - 50,
          flex: 1,
          backgroundColor: 'rgba(52, 52, 52, 0.6)',
          justifyContent: 'center',
        },

There are two ways you can do it.

1. You can use Modal component instead of absolute View.
2. Wrap SafeAreaView with View like below:

const SomeScreen: FC = () => {
      const [isSuccess, setIsSuccess] = useState<boolean>(true);
    
      return (
       <View style={{flex: 1}}>
          <SafeAreaView style={styles.container}>
            <View style={styles.container}>
               <Text style={styles.titleText}> Some Text </Text>
            </View>
          </SafeAreaView>
          { isSuccess ? (
            <View style={styles.popUpContainer}>
             <View style={styles.popUpBody}>
               <Text style={styles.titleText}> {titleText} </Text>
               <Text style={styles.subtext}> {subtext} </Text>
               <Text style={styles.subtext}> {buttonText} </Text>
               <Button title={buttonText} onPress={setIsSuccess(false);} />
             </View>
           </View>
          ) : null}
       </View>
    );
  };

on More thing button onPress binding is wrong.

<Button title={buttonText} onPress={setIsSuccess(false);} />

this has to be

<Button title={buttonText} onPress={() => setIsSuccess(false)} />