Nós vamos começar criando uma pasta dentro de “screens” chamada de “AddProduct” com os arquivos.

Vamos começar criando o container e usando ele lá no nosso index.

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;
`;

import { View, Text } from "react-native";
import React from "react";
import { Container } from "./styled";

const AddProduct = () => {
  return (
    <Container>
      <Text>AddProduct</Text>
    </Container>
  );
};

export default AddProduct;

Com isso feito vamos usar o nosso título padrão.

const AddProduct = () => {
  return (
    <Container>
      <DefaultTitle title="CADASTRO DO ANÚNCIO" fontSize={18} />
    </Container>
  );
};

export default AddProduct;

Podemos então configurar isso lá nas rotas para poder visualizar.

export type PropsNavigationStack = {
  Home: undefined;
  Login: undefined;
  Register: undefined;
  Search: {
    query: string;
  };
  UserProfile: undefined;
  SellerProfile: undefined;
  AllAddress: undefined;
  AddAddress: undefined;
  AddProduct: 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.Navigator>
    </NavigationContainer>
  );
};

Vamos para a navBar para poder criar a navegação para lá

const NavBar = () => {
  const navigation = useNavigation<PropsStack>();

  return (
    <Container>
      <IconButton
        onPress={() => {
          navigation.navigate("Home");
        }}
      >
        <Icon source={home} />
      </IconButton>
      <IconButton
        onPress={() => {
          navigation.navigate("Home");
        }}
      >
        <Icon source={chat} />
      </IconButton>
      <IconButton
        onPress={() => {
          navigation.navigate("AddProduct");
        }}
      >
        <Icon source={add} />
      </IconButton>
      <IconButton
        onPress={() => {
          navigation.navigate("Home");
        }}
      >
        <Icon source={categories} />
      </IconButton>
      <IconButton
        onPress={() => {
          navigation.navigate("UserProfile");
        }}
      >
        <Icon source={profile} />
      </IconButton>
    </Container>
  );
};

export default NavBar;