Agora nós vamos criar o hook, que será por onde de fato vamos poder puxar os métodos.

Nós vamos criar uma pasta chamada hooks e um arquivo useAuth

import { useContext } from "react";
import { AuthContext } from "../contexts/AuthContext";

export default function () {
  const authContextData = useContext(AuthContext);

  return authContextData;
}

Com isso feito, nós iremos lá dentro de “App.tsx” para poder usar o nosso contexto em volta de todo o app, para que a gente possa puxar os métodos.

export default function App() {
  return (
    <ErrorBoundary>
      <AuthContextProvider>
        <StatusBar style="light" />
        <ThemeProvider theme={myTheme}>
          <Routes />
        </ThemeProvider>
      </AuthContextProvider>
    </ErrorBoundary>
  );
}

Agora, nós vamos fazer uma base de código que vamos usar apenas quando o login estiver pronto, que será a proteção das rotas. Nós vamos dentro de routes e criaremos uma variável chamada token, que está dentro do useAuth.

const Routes = () => {
  const { token } = useAuth();

  return (

Agora, nós iremos criar rotas protegidas, então se o usuário não tiver acesso as rotas, ele só vai poder navegar pelas rotas que estão no “pack” de rotas sem proteção, e quando pegar o token, ele vai poder fazer a navegação completa

{
  token === null ? (
    <>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="AllCategories" component={AllCategories} />
      <Stack.Screen name="Product" component={ProductScreen} />
      <Stack.Screen name="SellerProfile" component={SellerProfile} />
      <Stack.Screen name="Login" component={Login} />
      <Stack.Screen name="Register" component={Register} />
      <Stack.Screen name="Search" component={Search} />
    </>
  ) : (
    <>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Search" component={Search} />
      <Stack.Screen name="Product" component={ProductScreen} />
      <Stack.Screen name="SellerProfile" component={SellerProfile} />
      <Stack.Screen name="AllCategories" component={AllCategories} />
      <Stack.Screen name="AllChats" component={AllChats} />
      <Stack.Screen name="Chat" component={Chat} />
      <Stack.Screen name="AddProduct" component={AddProduct} />
      <Stack.Screen name="UserProfile" component={UserProfile} />
      <Stack.Screen name="Feedback" component={Feedback} />
      <Stack.Screen name="Denounce" component={Denounce} />
      <Stack.Screen name="AddAddress" component={AddAddress} />
      <Stack.Screen name="AllAddress" component={AllAddress} />
    </>
  )
}

Vamos modificar isso então na navBar, para que todas as telas que podemos acessar por aqui sejam protegidas

const { token } = useAuth();

return (
  <Container>
    <IconButton
      onPress={() => {
        navigation.navigate("Home");
      }}
    >
      <Icon source={require("../../../../assets/home.png")} />
    </IconButton>
    <IconButton
      onPress={() => {
        token === null
          ? navigation.navigate("Login")
          : navigation.navigate("AllChats");
      }}
    >
      <Icon source={require("../../../../assets/chat.png")} />
    </IconButton>
    <IconButton
      onPress={() => {
        token === null
          ? navigation.navigate("Login")
          : navigation.navigate("AddProduct");
      }}
    >
      <Icon source={require("../../../../assets/add.png")} />
    </IconButton>
    <IconButton
      onPress={() => {
        navigation.navigate("AllCategories");
      }}
    >
      <Icon source={require("../../../../assets/categories.png")} />
    </IconButton>
    <IconButton
      onPress={() => {
        token === null
          ? navigation.navigate("Login")
          : navigation.navigate("UserProfile");
      }}
    >
      <Icon source={require("../../../../assets/profile.png")} />
    </IconButton>
  </Container>
);

Nós faremos a mesma coisa para denunciar e avaliar o vendedor.

1. ProfileInfo

   {!Rate ? (
     <DefaultText
       onPress={() => {
         token === null
           ? navigation.navigate("Login")
           : navigation.navigate("Feedback");
       }}
     >
       Sem Avaliações
     </DefaultText>
   ) : (
     <Button
       onPress={() => {
         token === null
           ? navigation.navigate("Login")
           : navigation.navigate("Feedback");
       }}
     >
       <AirbnbRating
         selectedColor="#5F96ED"
         showRating={false}
         isDisabled={true}
         size={16}
         defaultRating={Rate}
         starContainerStyle={{
           paddingTop: 4,
         }}
       />
     </Button>
   )}
   

2. SellerInfo

   <Button
     onPress={() => {
       token === null
         ? navigation.navigate("Login")
         : navigation.navigate("Feedback");
     }}
   >
     <AirbnbRating
       selectedColor="#5F96ED"
       showRating={false}
       isDisabled={true}
       size={16}
       defaultRating={Rate}
       starContainerStyle={{
         marginLeft: -20,
       }}
     />
   </Button>
   

3. Product

   <DenounceText
     onPress={() => {
       token === null
         ? navigation.navigate("Login")
         : navigation.navigate("Denounce");
     }}
   >
     Achou algo estranho? Denuncie!
   </DenounceText>
   

4. SellerProfile

   <DenounceText
     onPress={() => {
       token === null
         ? navigation.navigate("Login")
         : navigation.navigate("Denounce");
     }}
   >
     Achou algo estranho? Denuncie!
   </DenounceText>
   

Agora temos as telas 100% protegidas, e elas nem mesmo podem ser acessadas sem token, então se a gente esquecer alguma, a gente vai receber um erro, e poderemos corrigir