I was working on my Authentication and when I was trying to work on the Auto Logout I had some Problems , I coded the functions needed to logout after the expiry time but when I wanted to Navigate back to the login screen after the logout i couldn't because of the Component i was working on ( doesn't have the navigation prop) , I used the docs but still didn't work ! this is my code

import { useSelector } from "react-redux";
import RootNavigation from "./ShopNavigation";
import { NavigationActions } from "@react-navigation/native";
import { createNavigationContainerRef } from "@react-navigation/native";

export const navigationRef = createNavigationContainerRef();

const NavigationContainer = (props) => {
  const isAuth = useSelector((state) => !!state.auth.token);
  function navigate(name) {
    if (navigationRef.isReady()) {
      navigationRef.navigate(name);
    }
  }
  useEffect(() => {
    if (!isAuth) {
      navigate("Login");
    }
  }, [isAuth]);

  return <RootNavigation />;
};

export default NavigationContainer;

And this is the App.js

import { StatusBar } from "expo-status-bar";
import { StyleSheet } from "react-native";
import { createStore, combineReducers, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import AppLoading from "expo-app-loading";
import * as Font from "expo-font";
import productsReducer from "./store/reducers/products";
import { composeWithDevTools } from "redux-devtools-extension";
import RootNavigation from "./navigation/ShopNavigation";
import cartReducer from "./store/reducers/cart";
import { useState } from "react";
import ordersReducer from "./store/reducers/orders";
import AuthReducer from "./store/reducers/Auth";
import ReduxThunk from "redux-thunk";
import NavigationContainer from "./navigation/NavigationContainer";

const rootReducer = combineReducers({
  products: productsReducer,
  cart: cartReducer,
  orders: ordersReducer,
  auth: AuthReducer,
});

const store = createStore(
  rootReducer,
  applyMiddleware(ReduxThunk),
  composeWithDevTools()
);

const fetchFonts = () => {
  return Font.loadAsync({
    "open-sans": require("./assets/fonts/OpenSans-Regular.ttf"),
    "open-sans-bold": require("./assets/fonts/OpenSans-Bold.ttf"),
  });
};

export default function App() {
  const [fontLoaded, setfontLoaded] = useState(false);

  if (!fontLoaded) {
    return (
      <AppLoading
        startAsync={fetchFonts}
        onFinish={() => setfontLoaded(true)}
        one rror={console.warn}
      />
    );
  }
  return (
    <Provider store={store}>
      <NavigationContainer />
    </Provider>
  );
}

CodePudding user response：

You can use the useNavigation hook for this purpose.

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

function View() {
  const navigation = useNavigation();

  return (
    ...
  );
}

We can use it as usual, e.g.

navigation.navigate("...")