Please, do not hurry to close this question as duplicate. I have read the official documentation here and so fa I have managed to pass successfully parameters between screens. There is som problem with my current case, and the solution is not obvious for me.

I have two screens. The first is called "Feed" and it belongs to bottom tab navigator. From the "Feed" screen I want to be able to navigate to "Comments" screen which is part of stack navigator.

I am able to successfully navigate between both screens, however, for some reason I am not able to pass any parameters when I navigate from "Feed" to "Comments".

Part of my "Feed" screen where I press "comments" icon:

      <TouchableOpacity
          onPress={() => {
            console.log("passing param id: ", id);
            navigation.navigate("Comments", { id: id });
          }}
        >
          <FontAwesome name="comment-o" size={30} color="#0047AB" />
        </TouchableOpacity>

What I see on the console:

passing param id: some_id_whic_does_not_matter

I manage to successfully navigate to my "Comments" screen. Part of my "Comments" screen:

const CommentsScreen = (props) => {
  console.log("Comments Screen: ");
  console.log("comments: ", props);

What I see on the console for the route object:

route": Object {
    "key": "Comments-some-key",
    "name": "Comments",
    "params": undefined,
  }

Can you tell me what I am doing wrong?

EDIT:

My CommentsNavigator:

import React from "react";
import { StatusBar, View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

import CommentsScreen from "./CommentsScreen";
import MyHeader from "./MyHeader";

const Stack = createStackNavigator();

const CommentsNavigator = (props) => {
  return (
    <View style={{ flex: 1, marginTop: StatusBar.currentHeight }}>
      <Stack.Navigator
        initialRouteName="Comments"
        screenOptions={{
          headerShown: true,
        }}
      >
        <Stack.Screen
          name="Comments"
          component={CommentsScreen}
          options={{
            header: ({ navigation }) => {
              return <MyHeader navigation={navigation} />;
            },
          }}
        />
      </Stack.Navigator>
    </View>
  );
};

export default CommentsNavigator;

My bottom tab navigator:

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

const Tab = createBottomTabNavigator();

const MyTabs = ({ currentUser, navigation }) => {
  return (
    <Tab.Navigator
      initialRouteName="Network"
      tabBarOptions={{
        activeTintColor: "#fff",
        inactiveTintColor: "lightgray",
        activeBackgroundColor: "#00BFFF",
        inactiveBackgroundColor: "#a2a2a2",
        showLabel: false,
      }}
      navigationOptions={{
        header: {
          visible: false,
        },
      }}
      screenOptions={{
        tabBarStyle: { position: "absolute" },
        tabBarBackground: () => (
          <BlurView
            tint="light"
            intensity={100}
            style={StyleSheet.absoluteFill}
          />
        ),
      }}
    >

      <Tab.Screen
        name="Network"
        component={NetworkNavigator}
        options={{
          backgroundColor: "purple",
          tabBarIcon: ({ color, size }) => (
            <FontAwesome5 name="user-friends" size={26} color={color} />
          ),
        }}
      />

      <Tab.Screen
        name="My Profile"
        component={ProfileNavigator}
        navigation={navigation}
        options={{
          tabBarIcon: ({ color, size }) => (
            <EvilIcons name="user" color={color} size={40} />
          ),
        }}
      />
    </Tab.Navigator>
  );
};

export default MyTabs;

Where I am currently located on NetworkNavigator tab, and from there I want to navigate to the Comments screen.

My NetworkNavigator tab:

import NetworkScreen from "./NetworkScreen";
import ProfileScreen from "./ProfileScreen";

const Stack = createStackNavigator();

const NetworkNavigator = (props) => {
  return (
    <View style={{ flex: 1, marginTop: StatusBar.currentHeight }}>
      <Stack.Navigator initialRouteName="My Network">
        <Stack.Screen
          name="My Network"
          component={NetworkScreen}
          options={{
            headerShown: false,
          }}
        />
        <Stack.Screen
          name="Profile"
          component={ProfileScreen}
          options={{
            headerStyle: {
              backgroundColor: "#0696d4",
            },
            headerTintColor: "#fff",
            headerTitleAlign: "center",
            headerTitleStyle: {
              fontWeight: "bold",
              fontFamily: "sans-serif-medium",
            },
          }}
        />
      </Stack.Navigator>
    </View>
  );
};

export default NetworkNavigator;

I still dont see where the issue is?

CodePudding user response：

I think we access params via route I mean

const CommentsScreen =({route})=>{
    const {id} = route.params;
    console.log(id);
...}

CodePudding user response：

You can access your passed params via following

const CommentsScreen = (props) => {
  console.log("Comments Screen: ");
  console.log("comments: ", props.route.params.id);

props.route.params

It contains the object you passed in

navigation.navigation('screenname', {
...this object...
});

you can extract the data by using the same keys.

Example

navigation.navigation('screenname', {
  id: '1',
  name: 'Adam',
  age: 12
});

//Then you can access via 

  console.log("id: ", props.route.params.id);
  console.log("name: ", props.route.params.name);
  console.log("age: ", props.route.params.age);