Landscape View cripples for whole App after PDF file is opened

[akashmkj027]

"react-native": "0.63.3",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^1.9.4",
"react-navigation-tabs": "^2.5.6",

"react-native-pdf": "6.6.2",

ios and android both (devices which have notch)

Before opening PDF file my landscape and portrait orientation for the app works perfectly. It can be seen in the attached video in first 5-10 seconds. But after i open the pdf file and navigate to go back. My entire application is disaligned when rotates to Landscape. SafeAreaView doesn't work, and application is overflowing from the notch area (check last 5-10 sec of the video).

Screen.Recording.2024-08-07.at.12.40.58.PM.mp4

import React, {useState, useEffect} from 'react';
import axios from 'axios';
import {
  StyleSheet,
  Dimensions,
  View,
  Text,
  ActivityIndicator
} from 'react-native';
import {baseUrl} from '../../config/baseUrl';
import isEmpty from 'lodash/isEmpty';
import Pdf from 'react-native-pdf';
import 'react-native-get-random-values';
import {decryptData} from '../../config/EncryptDecrypt';
import { deleteTempFilePath } from '../../config/fileStoreStructure';

export const PDFViewRender = ({
  data,
  offlineFilePath,
  decryptionKeys,
  fileExtension,
  onSuccessOpenDocuments,
}) => {
  const [errorMsg, setErrorMessage] = useState('');
  const [sourceUrl, setSourceUrl] = useState('');
  const [loader, setLoader] = useState(true);
  const token = axios.defaults.headers.common.Authorization;

  useEffect(() => {
    url();
    return () => {deleteTempFilePath ();}
  }, [data]);

  const decryptFile = async () => {
    let path = await decryptData(offlineFilePath, decryptionKeys,`${data.DocumentID}`,fileExtension);
    setSourceUrl({
      uri : path,
      cache: true,
    });
  };

  const url = async () => {
    if (offlineFilePath) {
      await decryptFile();
    } else {
      setSourceUrl({
        uri:
          baseUrl + '/sg2/api/v1.0/mdocs/document/download/' + data.DocumentID,
        cache: true,
        method: 'GET',
        headers: {Authorization: token, responseType: 'arraybuffer'},
      });
    }
    setLoader(false);
  };

  const loadingComponent = () => (
    <View style={styles.msgContainer}>
      <ActivityIndicator size="large" color="#0000ff" />
    </View>
  );

  return (
    <View style={styles.container}>
      {loader ? (
        loadingComponent()
      ) : isEmpty(errorMsg) && sourceUrl ? (
        <Pdf
          source={sourceUrl}
          style={styles.pdf}
          trustAllCerts={false}
          maxScale={10}
          minScale={1}
          onLoadComplete={(numberOfPages, filePath) => {
            onSuccessOpenDocuments();
          }}
          renderActivityIndicator={(progress) => {
            return loadingComponent();
          }}
          horizontal={true}
          onError={(error) => {
            setErrorMessage(error.message);
          }}
        />
      ) : (
        <View style={styles.msgContainer}>
          <Text>{errorMsg}</Text>
        </View>
      )}
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    marginTop: 25,
  },
  pdf: {
    flex: 1,
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
  msgContainer: {
    justifyContent: 'center',
    height: '100%',
  },
});