NutrientView inside a modal is blank or crashes on Android

When wrapping NutrientView inside a React Native <Modal> component on Android, you may observe one or both of the following symptoms:

• The modal opens but the PDF viewer area is blank — only the dimmed background is visible.
• Closing the modal triggers a crash or a large error message in the application.

Why this happens

On Android, NutrientView is backed by a native Android fragment. React Native’s <Modal> component renders its contents in a separate window hierarchy that’s detached from the main Activity. Because Android fragments must be attached to an Activity window to initialize correctly, the fragment is unable to attach when placed inside a modal, resulting in the blank screen you see.

When the modal is dismissed, Android attempts to destroy the fragment in this invalid, unattached state, which causes the crash.

This is a fundamental incompatibility between Android fragments and React Native’s modal architecture. It isn’t a bug in Nutrient SDK.

Solution: Use a dedicated navigation screen instead

The recommended approach is to replace the modal with a dedicated screen in your navigation stack. This gives the viewer a proper Activity-backed context to attach to, and it provides the same user experience: The user navigates to the viewer and presses the back button to dismiss it.

1. Create a dedicated PDF viewer screen

import NutrientView from '@nutrient-sdk/react-native';
import { Platform, View } from 'react-native';
import React from 'react';

const DOCUMENT =
  Platform.OS === 'ios'
    ? 'Document.pdf'
    : 'file:///android_asset/Document.pdf';

export default function PdfViewerScreen({ navigation }) {
  var pdfRef: React.RefObject<NutrientView | null> = React.createRef();

  // Destroy the `NutrientView` before the screen is removed to prevent crashes.
  React.useEffect(() =>
    navigation.addListener('beforeRemove', () => {
      pdfRef.current?.destroyView();
    }),
  );

  return (
    <View style={{ flex: 1 }}>
      <NutrientView
        ref={pdfRef}
        document={DOCUMENT}
        style={{ flex: 1 }}
      />
    </View>
  );
}

2. Register the screen in your navigation stack

import { createStackNavigator } from '@react-navigation/stack';
import PdfViewerScreen from './PdfViewerScreen';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="PdfViewer" component={PdfViewerScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

3. Navigate to the viewer

Replace any code that previously opened the modal with a navigation call:

navigation.navigate('PdfViewer');

The user can dismiss the PDF viewer at any time by pressing the Android back button, which mirrors the expected modal behavior.