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 thecreateStackNavigator()
module from'@react-navigation/stack'
. -
Set the
gestureEnabled
parameter tofalse
to avoid interference withPSPDFKitView
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.