Toolbar Menu Items Not Rendering on Android

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

To resolve this conflict, change Native Stack Navigator to Stack Navigator. 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.

Replace the createNativeStackNavigator() module from '@react-navigation/native-stack' with the createStackNavigator() module from '@react-navigation/stack'.
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);

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.