React Native: Passing navigation route as props into dynamically rendered component

Question

I am building an app in which several of the screens have dynamically rendered cards that are mapped to an array of objects called ENTRIES . Each one of these cards can be pressed to navigate to a corresponding screen, however, I cannot seem to get the navigation to work.

I am passing is the screen value from ENTRIES as props from the Settings.js screen into the ClickableCard component, which then gets passed into the TouchableOpacity onClick as this.props.navigation.navigate(screen) .

However I keep getting the following error TypeError: undefined is not an object (evaluating '_this3.props.navigation.navigate')

Here is an example of the code below:

App.js File

    import React from 'react;
    import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
    import {NavigationContainer} from '@react-navigation/native';
    import {createStackNavigator} from '@react-navigation/stack';
    import Home from './src/screens/Home';
    import SettingsScreen from './src/screens/SettingsScreen';
    import PrivacyScreen from './src/screens/PrivacyScreen';
    import NotificationsScreen from './src/screens/NotificationsScreen';
    import SoundsScreen from './src/screens/SoundsScreen';
    import ThemeScreen from './src/screens/ThemeScreen';

    const PrivacyStack = createStackNavigator();
    const SettingsStack = createStackNavigator();
    const AuthStack = createStackNavigator();
    const MainStack = createStackNavigator();
    const Tabs = createMaterialBottomTabNavigator();

    const TabNavigator = () => {
     return (
    <Tabs.Navigator
    initialRouteName="Home"
    <Tabs.Screen
    name="Home"
    component={HomeStack}
    />
    Tabs.Screen
    name="Settings"
    component={SettingsStack}
    children={this.SettingsStack}
    </Tabs.Navigator>
    )
    }

const AuthStack = () => (
  <AuthStack.Navigator>
    <AuthStack.Screen
      name="Auth"
      component={Auth}
    />
  </AuthStack.Navigator>
);


    const SettingsStackScreen = () => (
      <SettingsStack.Navigator>
        <SettingsStack.Screen
          name="Settings"
          component={Settings}
        />
        <SettingsStack.Screen
          name="Privacy"
          component={PrivacyStack}

        />
        <SettingsStack.Screen
          name="Theme"
          component={ThemeScreen}

        />
        <SettingsStack.Screen
          name="Notifications"
          component={NotificationsScreen}

        />
        <SettingsStack.Screen
          name="Sound"
          component={SoundsScreen}

        />
      </SettingsStack.Navigator>
    );

    const PrivacyStack = () => (
      <PrivacyStack.Navigator>
        <PrivacyStack.Screen
          name="Privacy"
          component={PrivacyScreen}
        />
        <PrivacyStack.Screen
          name="Notifications"
          component={NotificationsScreen}

        />
      </PrivacyStack.Navigator>
    );

const App = () => {
return (
    <NavigationContainer ref={navigationRef}>
      <MainStack.Navigator>
        <MainStack.Screen name="Tabs" component={TabNavigator} />
        <MainStack.Screen
          name="Auth"
          component={AuthStack}
          options={{gestureEnabled: false}}
        />
      </MainStack.Navigator>
    </NavigationContainer>
)
}

Settings.js File

    import React, {Component} from 'react';
    import {TouchableOpacity, ScrollView} from 'react-native;
import ClickableCard from './ClickableCard'

        export default class Settings extends Component {
        render(screen, index) {
        return (
                  <ScrollView>
                    {ENTRIES.map((entry, index) => (
    <ClickableCard screen={entry.screen} key={entry.index}/>

                    ))}
                  </ScrollView>
        )
        }

        export default Settings

ClickableCard.js Component

                import React, {Component} from 'react';
                import {TouchableOpacity, ScrollView} from 'react-native;

                    export default class ClickableCard extends Component {
          constructor(props) {
            super(props);
        }
                    render() {

const {
screen,
key
} = this.props
                    return (
                            <TouchableOpacity

                                key={key}
                                onPress={() => this.props.navigation.navigate(screen)}>
                              </TouchableOpacity>
                    )
                    }
    }

entries.js File

import React from 'react';

export const ENTRIES = [
{
name: "Theme",
screen: "ThemeScreen",
},
{
name: "Sounds",
screen: "SoundsScreen",
},
{
name: "Notifications",
screen: "NotificationsScreen",
},
] 

Answer 1

You are trying to access navigation outside the navigation stack.

If you are using a functional component you can go with the useNavigation hook but as this is a class based component you will have to send the navigation as a prop or you can do the below as suggested in the documentation

import { useNavigation } from '@react-navigation/native';
class ClickableCard extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { screen, key } = this.props;
    return (
      <TouchableOpacity
        key={key}
        onPress={() =>
          this.props.navigation.navigate(screen)
        }></TouchableOpacity>
    );
  }
}

const ClickableCardWithNavigation= (props) {
  const navigation = useNavigation();

  return <ClickableCard {...props} navigation={navigation} />;
}

export default connect(ClickableCardWithNavigation)(TodoList)