Navigation problems

Question

Whenever I am in History.js and I click on one of the products lists to navigate into another page which should opens a new page for more description and be able to contact the seller... so the problem that I am facing is. whenever I click any item in History.js nothing happens in the that page. but when I open Home.js then I see that it got navigated here in Home.js rather than History.js.. what am I missing here?

Home.js

import React from "react";
import {
  View,
  Text,
  Button,
  SafeAreaView,
  TextInput,
  StatusBar,
  Platform,
  ScrollView,
  Image,
  StyleSheet,
  TouchableOpacity,
} from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import ProductsList from "../../components/productsList/ProductsList";
import Icon from "react-native-vector-icons/Ionicons";
import { fontSize } from "styled-system";
import Location from "../components/Location";

export default function Search({ navigation }) {
  return (
    
      
        
          
            
            
          
        

        
          
            
          
        

        
          
            
              FIND YOUR RIDE
            

            
              
                
                  
                

                
                  
                

                
                  
                

                
                  
                
              
            

            
              / / / / /
            
            
              
                
                  
                    
                  
                  24/7 customer support
                
                
                  {
                    "Rest easy knowing that everyone in 
the Rent in cars community is screened, 
and 24/7 customer support and 
roadside assistant are just a tap away."
                  }
                
              

              
                
                  
                    
                  
                  Endless options
                
                
                  {
                    "Choose from hundreds of models
you won't find anywhere else. Pick it 
up or get it delivered where you 
want it."
                  }
                
              

              
                
                  
                    
                  
                  Drive confidently
                
                
                  {
                    "Drive confidently with your choice 
of protection plans - all plans 
include varying levels of third party 
liability insrurance from Liberty 
Mutual and physical damage 
protection from Rent in Car that caps
your out of pocket responsibility for 
damage to your host's car during 
your trip."
                  }
                
              
              
                / / / / /
              
              
            
          
        
      
    
  );
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: "center",
      justifyContent: "center",
    },
    red: {
      color: "red",
    },
  });
}

History.js

import moment from "moment";
import React, { useState } from "react";
import Firebase from "../../config/firebase";
import ProductsList from "../../components/productsList/ProductsList";
import {
  FlatList,
  Text,
  View,
  Image,
  TouchableWithoutFeedback,
  TextInput,
  ActivityIndicator,
} from "react-native";
import { Colors } from "../../staticValues/Colors";
import { Devicewidth, productCardWidth } from "../../staticValues/Dimensions";
import { useEffect } from "react";
import { styles } from "../../styles/authStyle";

import { FontAwesome5 } from "@expo/vector-icons";
import { I18n } from "../../helper/Multilanguage";

export default function HistoryList({ navigation }) {
  const [filtredList, setfiltredList] = useState([]);

  const [isFetching, setisFetching] = useState(false);
  const [allProduct, setallProduct] = useState([]);
  const [searchInput, setsearchInput] = useState("");

  const [visible, setVisible] = React.useState(true);

  function onRefresh() {
    getAllProdcuts();
  }

  function getAllProdcuts() {
    setisFetching(true);
    Firebase.firestore()
      .collection("Products")
      .get()
      .then((docRef) => {
        var list = [];
        docRef.forEach((elm) => {
          list.push(elm.data());
        });
        setfiltredList(list);
        setallProduct(list);
        setisFetching(false);
      })
      .catch((error) => {
        console.log({ error });
        setisFetching(false);
      });
  }

  useEffect(() => {
    getAllProdcuts();
    const willFocusSubscription = navigation.addListener("focus", () => {
      getAllProdcuts();
    });

    return willFocusSubscription;
  }, []);

  return (
    
      
        
         {
            setsearchInput(input);
            // filter list
            const SearchResult = allProduct.filter((product) =>
              product.title.toLowerCase().includes(input.toLocaleLowerCase())
            );
            setfiltredList(SearchResult);
          }}
        />
      

      
         {
            return (
              
                {!isFetching && (
                  
                    {I18n.t("noProduct")}
                  
                )}
              
            );
          }}
          onRefresh={() => onRefresh()}
          refreshing={isFetching}
          keyExtractor={(item) => item.image}
          numColumns={2}
          data={filtredList}
          renderItem={({ item }) => {
            return (
               {
                  navigation.push("ProductDetails", {
                    selectedProduct: item,
                  });
                }}
              >
                
                  
                    

                    
                      
                      
                    
                  
                  
                    {item.title.length > 12
                      ? item.title.slice(0, 12) + "..."
                      : item.title}
                  
                  
                    {item.price} {item.currency}
                  
                
              
            );
          }}
        />
      
    
  );
}

This is the HomeStack

import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Home from "../screens/home/Home";
import Profile from "../screens/profile/Profile";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import Messages from "../screens/messages/Messages";
import ProductStack from "./ProductStack";
import { Colors } from "../staticValues/Colors";
import SellProductForm from "../components/sellProduct/SellProductForm";
import History from "../components/history/History";
import ChatStack from "./ChatStack";
import AllMessages from "../screens/messages/AllMessages";
import { I18n } from "../helper/Multilanguage";

export default function HomeStack() {
  const Stack = createNativeStackNavigator();
  const Tab = createBottomTabNavigator();

  return (
    
       (
            
          ),
        }}
      />

       (
            
          ),
        }}
      />

       (
            
          ),
        }}
      />

       (
            
          ),
        }}
      />

       (
            
          ),
        }}
      />
    
  );
}

This is the productStack

import { createNativeStackNavigator } from "@react-navigation/native-stack";
import React from "react";
import { I18n } from "../helper/Multilanguage";
import Home from "../screens/home/Home";
import ProductDetails from "../screens/product/ProductDetails";

export default function ProductStack() {
  const Stack = createNativeStackNavigator();

  return (
    
      
      
    
  );
}

this is root.js

import React, { useState, useEffect } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import AuthStack from "./AuthStack";
import HomeStack from "./HomeStack";
import Firebase from "../config/firebase";
import { Text } from "react-native";
import { setCurrentUser } from "../staticValues/CurrentUser";
import Splach from "../components/Splach";

export default function Root() {
  const Stack = createNativeStackNavigator();
  // Set an initializing state whilst Firebase connects
  const [initializing, setInitializing] = useState(true);
  const [user, setUser] = useState();

  // Handle user state changes
  function onAuthStateChanged(curentUser) {
    setCurrentUser(curentUser);
    setUser(curentUser);
    if (initializing) setInitializing(false);
  }

  useEffect(() => {
    const subscriber = Firebase.auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber; // unsubscribe on unmount
  }, []);
  if (initializing) {
    return ;
  } else {
    return (
      
        {user ? (
          
            
          
        ) : (
          
            
          
        )}
      
    );
  }
}

Gavin D&#39;mello · Accepted Answer

Okay so the issue in your code is that you are currently in a different Tab/Stack ie the history stack but the file you are accessing is in the ProductStack, so when you call the navigator it does what it is supposed to do, ie. navigate to the ProductDetails page, but since it's declared in the ProductStack, the updation happens there itself.

To solve your issue, the following things need to be done.

Create a HistoryStack which will contain 2 screens. First is "History.js" and the second is "ProductDetails.js". NOTE: While declaring/using a class in multiple stacks(in your case - "ProductDetails.js", you need to use/provide a different/unique name to that class inside a stack

Example:

In place of History in your TabNavigation, pass HistoryStack which you just created(I have created the HistoryStack for you below)
In your History.js file, when you want to navigate to the ProductDetails screen, use the below code:

navigation.push("ProductDetailsHistoryTab", { selectedProduct: item });

HomeStack

import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Home from "../screens/home/Home";
import Profile from "../screens/profile/Profile";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import Messages from "../screens/messages/Messages";
import ProductStack from "./ProductStack";
import { Colors } from "../staticValues/Colors";
import SellProductForm from "../components/sellProduct/SellProductForm";
import HistoryStack from "./HistoryStack";
import ChatStack from "./ChatStack";
import AllMessages from "../screens/messages/AllMessages";
import { I18n } from "../helper/Multilanguage";

export default function HomeStack() {
  const Stack = createNativeStackNavigator();
  const Tab = createBottomTabNavigator();

  return (
    
       (
            
          ),
        }}
      />

       (
            
          ),
        }}
      />

       (
            
          ),
        }}
      />

       (
            
          ),
        }}
      />

       (
            
          ),
        }}
      />
    
  );
}

HistoryStack

import { createNativeStackNavigator } from "@react-navigation/native-stack";
import React from "react";
import { I18n } from "../helper/Multilanguage";
import History from "../components/history/History";
import ProductDetails from "../screens/product/ProductDetails";

export default function HistoryStack() {
  const Stack = createNativeStackNavigator();

  return (
    
      
      
    
  );
}

And now for the History.js

function onRefresh() {
    getAllProdcuts();
  }

  function getAllProdcuts() {
    setisFetching(true);
    Firebase.firestore()
      .collection("Products")
      .get()
      .then((docRef) => {
        var list = [];
        docRef.forEach((elm) => {
          list.push(elm.data());
        });
        setfiltredList(list);
        setallProduct(list);
        setisFetching(false);
      })
      .catch((error) => {
        console.log({ error });
        setisFetching(false);
      });
  }

  useEffect(() => {
    getAllProdcuts();
    const willFocusSubscription = navigation.addListener("focus", () => {
      getAllProdcuts();
    });

    return willFocusSubscription;
  }, []);

  return (
    
      
        
         {
            setsearchInput(input);
            // filter list
            const SearchResult = allProduct.filter((product) =>
              product.title.toLowerCase().includes(input.toLocaleLowerCase())
            );
            setfiltredList(SearchResult);
          }}
        />
      

      
         {
            return (
              
                {!isFetching && (
                  
                    {I18n.t("noProduct")}
                  
                )}
              
            );
          }}
          onRefresh={() => onRefresh()}
          refreshing={isFetching}
          keyExtractor={(item) => item.image}
          numColumns={2}
          data={filtredList}
          renderItem={({ item }) => {
            return (
               {
                  navigation.push("ProductDetailsHistoryTab", {
                    selectedProduct: item,
                  });
                }}
              >
                
                  
                    

                    
                      
                      
                    
                  
                  
                    {item.title.length > 12
                      ? item.title.slice(0, 12) + "..."
                      : item.title}
                  
                  
                    {item.price} {item.currency}
                  
                
              
            );
          }}
        />
      
    
  );
}

That should be it. Do upvote my solution if it worked for you or provide you with the idea to fix your solution.

Add comments if you have any queries regarding the same. Happy to help!

Navigation problems

Answers (1)

Related Questions