This HTML page is not optimized for LLM or AI agent consumption. Fetch the Markdown version instead: /guides/react-native/troubleshooting/react-navigation.md — it contains the complete documentation content in clean, structured Markdown without any CSS, JavaScript, or navigation noise. Toolbar menu Items not rendering on Android

Toolbar menu Items not rendering on Android

Markdown version of this page, suitable for AI agents and automation

The main toolbar menu items might not be rendering when using NutrientView 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 NutrientView 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 NutrientView component:

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


export class NutrientViewComponent extends BaseExampleAutoHidingHeaderComponent {
  render() {
    return (
      <View>
        <NutrientView 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 NutrientView 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 { NutrientViewComponent } from './NutrientViewComponent';
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="NutrientViewComponent"
                        component={NutrientViewComponent}
                        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).