0

I have a react native app which is a chat application and users can share files and images with each other on chat, on clicking the file, the file opens in native view on top of the app, and since the app orientation is locked to potrait, the pdf does not rotate.

I tried to follow the native solution in this link - Only ONE VIEW landscape mode

but I cannot find in the code where the native view is being initialised.. Looking for help with this.

PS. I need the app orientation to be locked to portrait and want portait and landscape in os native pdf viewer.

Using react-navigation for navigation and rn-fetch-blob for downloading (from firebase storage) and file access.

async function donwloadFile(props) {
    let token = await getAuthToken();
    let hasPermission = await requestFilePermissions(() => {}, props.type);

    if (!hasPermission) {
        // ask for permission
      return;
    }

    const { dirs } = RNFetchBlob.fs;
    const fileName = props.currentMessage.fileReference || props.currentMessage.fileName;
    const filePath =
      Platform.OS === 'android'
        ? `${dirs.DownloadDir}/OrangeHealth/${props.threadId}/${fileName}`
        : `${dirs.DocumentDir}/OrangeHealth/${props.threadId}/${fileName}`;
    RNFetchBlob.fs.exists(filePath).then((res) => {
      // checks if file is already present
      if (res) {
        if (Platform.OS === 'android') {
          RNFetchBlob.android
            .actionViewIntent(filePath, props.currentMessage.formatType)
            .then(() => {
              console.log('File opened');
            })
            .catch((e) => {
              toastAlertMessage('Unable to open file');
            });
        } else {
          RNFetchBlob.ios.openDocument(filePath);
        }
      } else {
        RNFetchBlob.config({
          fileCache: false,
          path: filePath,
          addAndroidDownloads: {
            useDownloadManager: true,
            notification: true,
            mediaScannable: true,
            title: props.currentMessage.fileName,
            path: filePath,
          },
        })
          .fetch('GET', props.currentMessage.file, {
            Authorization: `Bearer ${token}`,
          })
          .then(() => {
            setIsDownloading(false);
            if (Platform.OS === 'android') {
              RNFetchBlob.android
                .actionViewIntent(
                  filePath,
                  props.currentMessage.formatType
                )
                .catch(() => {
                    console.log('unable to open file')
                });
            } else {
              RNFetchBlob.ios.openDocument(filePath);
            }
          })
          .catch((e) => {
            console.log('error ', e);
          });
      }
    });
  }
mcontoor
  • 17
  • 6
  • What is the navigation library you are using? Can you show a simplified snippet of the view you want to rotate (and how is it integrated with navigation)? – Marek Lisik Mar 16 '21 at 09:22
  • @MarekLisik updated the question wiht a code snippet – mcontoor Mar 16 '21 at 10:05
  • thanks, I edited to remove irrelevant file downloading code. I'm guessing you tried unlocking all orientations to confirm that the PDF viewer will rotate (and doesn't limit orientation by itself)? – Marek Lisik Mar 16 '21 at 11:06

1 Answers1

1

There are two solution you could try. Both require that you unlock the landscape orientation in your project configuration (Xcode and Android Manifest file), then:

  1. Replace your stack navigators with createNativeStackNavigator from react-native-screens/native-stack. This allows you to limit your orientation to portrait (passing in screenOptions={{ screenOrientation: 'portrait_up' }} to your navigator). The native document viewer should then rotate fine. Depending on its mode of presentation, however, it might require that the presenting screen allows rotation (which you might not want).

  2. Install react-native-orientation-locker or similar, and use it to lock orientation at app startup, unlock when document viewer is presented, and then lock when document viewer exits -- I'd say this is undesirable, because it might produce issues when transitioning away from the document viewer while in landscape (the previous screen will be shown in landscape before rotating back to portrait).

Marek Lisik
  • 2,003
  • 1
  • 8
  • 17