Toolbar menu Items not rendering on Android

The main toolbar menu items might not be rendering when using PSPDFKitView with Native Stack Navigator(opens in a new tab) from the react-navigation(opens in a new tab) module. The reason for this is a conflict between PSPDFKitView and Native Stack Navigator(opens in a new tab).

The solution is different depending on whether you’re using React Native directly or through Expo.

React Native

To resolve this conflict, change Native Stack Navigator(opens in a new tab) to Stack Navigator(opens in a new tab). Assume that the code below is a PSPDFKitView component:

import { View } from 'react-native';
import PSPDFKitView from 'react-native-pspdfkit';
import React, { Component } from 'react';


export class PSPDFKitViewComponent extends BaseExampleAutoHidingHeaderComponent {
  render() {
    return (
      <View>
        <PSPDFKitView document={exampleDocumentPath} />
      </View>
    );
  }
}

Set up the React Native application navigation as shown below.

  1. Replace the createNativeStackNavigator() module from '@react-navigation/native-stack' with the createStackNavigator() module from '@react-navigation/stack'.

  2. Set the gestureEnabled parameter to false to avoid interference with PSPDFKitView events:

import { AppRegistry } from 'react-native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import { PSPDFKitViewComponent } from './PSPDFKitViewComponent';
import React, { Component } from 'react';


// Create Stack Navigator.
 export const Stack = createNativeStackNavigator();
 export const Stack = createStackNavigator();


class MyStack extends Component {
  render() {
    return (
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen
                        name="PSPDFKitViewComponent"
                        component={PSPDFKitViewComponent}
                        options={{
                           gestureEnabled: true,
                           gestureEnabled: false,
                        }}
                    />
                </Stack.Navigator>
            </NavigationContainer>
    );
  }
}
// Register your application.
AppRegistry.registerComponent('MyApp', () => MyStack);

React Native Expo

Since Expo Router(opens in a new tab) uses Native Stack Navigator(opens in a new tab) under the hood, you need to create a wrapper that uses Stack Navigator(opens in a new tab). Create a new file called ClassicStack.tsx inside your components directory with the following contents:

import { createStackNavigator } from '@react-navigation/stack';
import { withLayoutContext } from 'expo-router/build/layouts/withLayoutContext';


const BaseStack = createStackNavigator();


// A drop-in replacement for `import { Stack } from "expo-router"` that uses
// the classic JS-based Stack Navigator instead of the native-stack.
export const ClassicStack = withLayoutContext(BaseStack.Navigator);

Then, in any file where you previously imported Stack from Expo Router(opens in a new tab), update your import to:

import { Stack } from 'expo-router';
import { ClassicStack as Stack } from '@/components/ClassicStack';

Doing this also solves the back navigation button issue. Follow the steps outlined in the back navigation button troubleshooting guide only when you aren’t using Stack Navigator(opens in a new tab).