Agora vamos criar a tela de adicionar endereços. Nós vamos começar criando dentro de “screens” uma pasta chamada “addAddress” com os arquivos.

Vamos começar criando o container da tela

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

Agora vamos colocar no index junto com o título da tela

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

const AddAddress = () => {
  return (
    <Container>
      <DefaultTitle fontSize={18} title="CADASTRAR ENDEREÇO" />
    </Container>
  );
};

export default AddAddress;

Agora, com isso feito, podemos colocar em rota, para poder visualizarmos.

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

export default Routes;

Nós agora temos ela na rota, vamos adicionar ela nos botões para poder viajar pra ela e visualizar.

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

  const renderItem: ListRenderItem<Address> = ({ item }) => (
    <AddressCard item={item} />
  );

  return (
    <>
      <Container>
        <DefaultTitle fontSize={18} title="TODOS OS ENDEREÇOS" />
        {Data.length <= 0 ? (
          <>
            <NoAdd>Você não tem endereços{"\\n"}cadastrados no momento</NoAdd>
            <DefaultButton
              buttonText="Cadastrar Endereços"
              buttonHandle={() => {
                navigation.navigate("AddAddress");
              }}
              buttonType="secondary"
              marginVertical={0}
            />
          </>
        ) : (
          <>
            <CreateAdd
              onPress={() => {
                navigation.navigate("AddAddress");
              }}
            >
              Cadastrar Endereços
            </CreateAdd>
            <FlatList
              data={Data}
              keyExtractor={(item: Address) => item._id}
              renderItem={renderItem}
              showsVerticalScrollIndicator={false}
              contentContainerStyle={{ paddingBottom: 70 }}
            />
          </>
        )}
      </Container>
      <NavBar />
    </>
  );
};

Nós vamos agora poder acessar essa tela para visualizar se está com a base correta, basta ir em allAddress

Agora a gente pode prosseguir.