Question 66341 in React native Question posted in
The official React Native documentation can be found here.

Passing navigation into function in react native

Previous developer was passing null for whatever reason which gives:

TypeError: null is not an object evaluating tabNavigation.navigate.

Here is the code:

import { NavigationRef } from './RootNavigation';

const renderBackToDashboard = (tabNavigation: any) => {
    return <HeaderBackButton tintColor={defaultOptions.headerTintColor||'white'} labelVisible={defaultOptions.headerBackTitleVisible||false} onPress={() => { tabNavigation.navigate(SCREEN_NAMES.DASHBOARD_TAB); }} />
}

const testViews = (tabNavigation: any, isLoggedIn: boolean) => {
    return (
        <>
            <Stack.Screen name={SCREEN_NAMES.LEGAL} component={LegalDisclosure} options={{ title: t('legal'), headerLeft: () => renderBackToDashboard(tabNavigation), headerRight: () => isLoggedIn ? renderLogo(tabNavigation) : null }} />
            <Stack.Screen name={SCREEN_NAMES.DATA} component={DataProtection} options={{ title: t('data'), headerLeft: () => renderBackToDashboard(tabNavigation),  headerRight: () => isLoggedIn ? renderLogo(tabNavigation) : null }} />
            <Stack.Screen name={SCREEN_NAMES.GUEST} component={GUEST} options={{ title: t('guest'), headerLeft: () => renderBackToDashboard(tabNavigation), headerRight: () => isLoggedIn ? renderLogo(tabNavigation) : null }} />
        </>
    );
};

const getLoggedOutScreens = () => {
    return (
        <Stack.Navigator screenOptions={defaultOptions}>
            <Stack.Screen name={SCREEN_NAMES.AUTH} component={AuthScreen} options={{ headerShown: false }} />
            {testViews(null, false)}
            <Stack.Screen name={SCREEN_NAMES.MY_SCREEN} component={MyScreen} options={{ title: t('myScreen') }} />
        </Stack.Navigator>
    );
};

return (
    <NavigationContainer ref={NavigationRef} theme={MyTheme}>
        {loggedIn ? getLoggedInScreens() : getLoggedOutScreens()}
        {loggedIn ? <UserErrorComponent /> : null}
    </NavigationContainer>
);

RootNavigation.ts

import React from 'react';

export const NavigationRef = React.createRef<any>();

class Nav {
    navigate = (name: string, params?: any) => {
        NavigationRef.current?.navigate(name, params);
    };
}

export const RootNavigation = new Nav();

I tried : {testViews(NavigationRef, false)} , {testViews(NavigationRef.current, false)} , {testViews({NavigationRef}, false)}

Didnt work. I would be glad for any suggestions.

Error is fired at tabNavigation.navigate(SCREEN_NAMES.DASHBOARD_TAB);

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Change below fixed my error:

    const testViews = (isLoggedIn: boolean) => {
    const getTestDefaultOptions = ({navigation}: {navigation: any}) => ({
        headerRight: () => isLoggedIn ? renderLogo(navigation) : null
    });

    return (
        <>
            <Stack.Screen
                name={SCREEN_NAMES.LEGAL}
                component={LegalDisclosure}
                options={ (props) => ({
                    ...getTestDefaultOptions(props),
                    title: t('legalDisclosure')
                })} />
            <Stack.Screen
                name={SCREEN_NAMES.DATA}
                component={DataProtection}
                options={ (props) => ({
                    ...getTestDefaultOptions(props),
                    title: t('dataProtection'),
                })} />
            <Stack.Screen
                name={SCREEN_NAMES.GUEST}
                component={GUEST}
                options={ (props) => ({
                    ...getTestDefaultOptions(props),
                    title: t('guest')
                })} />
        </>
    );
};

  2. 0

    Your project navigation structure seems fine. But RootNavigation.ts may need to modify like this.

    RootNavigation.ts

    import { createNavigationContainerRef } from '@react-navigation/native';

export const navigationRef = createNavigationContainerRef()

export function navigate(name: string, params?: any) {
  if (navigationRef.isReady()) {
    navigationRef.navigate(name, params);
  }
}

    In any screen included in this navigation container, you can use following code to navigate.

    //Import navigation like this
import * as RootNavigation from './RootNavigation';

const renderBackToDashboard = () => {
  return (
    <HeaderBackButton 
      tintColor={defaultOptions.headerTintColor||'white'} 
      labelVisible={defaultOptions.headerBackTitleVisible||false} 
      onPress={() => { 
        //you can use this line to navigate
        RootNavigation.navigate(SCREEN_NAMES.DASHBOARD_TAB); 
      }} 
    />
  )
}

    You can see more in react-navigation docs.
    https://reactnavigation.org/docs/navigating-without-navigation-prop/#usage

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search