Nós vamos vamos começar criando a pasta “Category” dentro de “screens”, dentro dela vamos criar o index e o styled

Vamos criar o container no styled

import styled from "styled-components/native";
import Constants from "expo-constants";

const statusBarHeight = Constants.statusBarHeight;

export const Container = styled.View`
  flex: 1;
  background-color: ${({ theme }) => theme.colors.backgroundLight};
  padding-top: ${statusBarHeight}px;
`;

Agora com o container criado vamos usar ele no index com o nosso título, que logo logo vai ser variável

const Category = () => {
  return (
    <Container>
      <DefaultTitle title="Pets" fontSize={20} />
    </Container>
  );
};

Agora nós vamos criar a rota, primeiro vamos criar a sua tipagem, que vai ter o id e o product (vindo por enquanto de AllCategories), pois vamos passar isso para essa nossa tela de categoria única)

import { Product } from "../screens/AllCategories";

export type PropsNavigationStack = {
  Home: undefined;
  Login: undefined;
  Register: undefined;
  Search: {
    query: string;
  };
  UserProfile: undefined;
  SellerProfile: undefined;
  AllAddress: undefined;
  AddAddress: undefined;
  AddProduct: undefined;
  AllCategories: undefined;
  Category: {
    _id: string;
    products: Product[];
  };
};

Agora podemos criar a rota em si

const Routes = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}
      >
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Search" component={Search} />
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Register" component={Register} />
        <Stack.Screen name="UserProfile" component={UserProfile} />
        <Stack.Screen name="SellerProfile" component={SellerProfile} />
        <Stack.Screen name="AllAddress" component={AllAddress} />
        <Stack.Screen name="AddAddress" component={AddAddress} />
        <Stack.Screen name="AddProduct" component={AddProduct} />
        <Stack.Screen name="AllCategories" component={AllCategories} />
        <Stack.Screen name="Category" component={Category} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

Com isso feito a gente agora pode ir em “CategorieList” para poder fazer a navegação quado clicarmos em “Ver mais”

return (
  <Container>
    <TitleContainer>
      <Title>{categorie._id}</Title>
      <SeeMore
        onPress={() => {
          navigation.navigate("Category", {
            _id: categorie._id,
            products: categorie.products,
          });
        }}
      >
        Ver mais
      </SeeMore>
    </TitleContainer>

    <FlatList
      data={categorie.products}
      renderItem={renderItem}
      horizontal
      showsHorizontalScrollIndicator={false}
    />
  </Container>
);

Agora a gente pode navegar, vamos receber as informações da rota dentro de Category, fazendo a mesma tipagem que fizemos em search

type Props = NativeStackScreenProps<PropsNavigationStack, "Category">;

const Category = ({ route }: Props) => {

Podemos dar um um console e também mudar o titulo para ser variável de acordo com a categoria clicada

const Category = ({ route }: Props) => {
  console.log(route.params);

  return (
    <Container>
      <DefaultTitle title={route.params._id} fontSize={20} />