Vamos começar criando a pasta de categories dentro de screens com os seus arquivos. Vamos chamar de “AllCategories”

Vamos já criar o container base e usar o padrão lá no nosso index.

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

const statusBarHeight = Constants.statusBarHeight;

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

import React from "react";
import { Container } from "./styled";
import DefaultTitle from "../../components/common/DefaultTitle";

const AllCategories = () => {
  return (
    <Container>
      <DefaultTitle title="TODAS AS CATEGORIAS" fontSize={20} />
    </Container>
  );
};

export default AllCategories;

Temos a base da tela, vamos ir em rotas para poder criar ela lá.

export type PropsNavigationStack = {
  Home: undefined;
  Login: undefined;
  Register: undefined;
  Search: {
    query: string;
  };
  UserProfile: undefined;
  SellerProfile: undefined;
  AllAddress: undefined;
  AddAddress: undefined;
  AddProduct: undefined;
  AllCategories: undefined;
};

const Stack = createNativeStackNavigator<PropsNavigationStack>();

export type PropsStack = NativeStackNavigationProp<PropsNavigationStack>;

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.Navigator>
    </NavigationContainer>
  );
};

Precisamos então ir lá para o nosso navBar para que a gente possa navegar para essa tela

<IconButton
  onPress={() => {
    navigation.navigate("AllCategories");
  }}
>
  <Icon source={categories} />
</IconButton>

Agora basta colocarmos a navbar na tela

const AllCategories = () => {
  return (
    <>
      <Container>
        <DefaultTitle title="TODAS AS CATEGORIAS" fontSize={20} />
      </Container>
      <NavBar />
    </>
  );
};

Podemos então acessar a tela e verificar que está tudo certo da forma que precisamos.