Para começar a criar a tela de endereços vamos criar a sua pasta dentro de “screens” e lá vamos criar juntos os arquivos.

Nós vamos começar criando o container padrão que temos.

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 + 20}px;
`;

Vamos colocar o container dentro do nosso index, já com o fragmento e a navbar.

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

const AllAddress = () => {
  return (
    <>
      <Container></Container>
      <NavBar />
    </>
  );
};

export default AllAddress;

Agora a gente pode colocar o título da tela

const AllAddress = () => {
  return (
    <>
      <Container>
        <DefaultTitle fontSize={18} title="TODOS OS ENDEREÇOS" />
      </Container>
      <NavBar />
    </>
  );
};

Agora a gente precisa passar para as rotas

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

export default Routes;

Agora que temos isso feito a gente pode ir lá em userProfile para colocar a navegação.

Agora, antes de colocarmos o direcionamento a gente vai no styled.ts de FieldsAbled e vamos remover o “AddressText” e vamos colocar dentro do “styled.ts” de Form.

import styled from "styled-components/native";

export const Container = styled.View`
  width: 100%;
  margin: 10px 0;
`;

export const EditButtonContainer = styled.View`
  width: 90%;
  align-items: flex-end;
  margin: 0 auto;
  margin-bottom: 10px;
`;

export const EditButton = styled.TouchableOpacity``;

export const EditImage = styled.Image.attrs({
  resizeMode: "contain",
})`
  width: 35px;
  height: 35px;
`;

export const InputContainer = styled.View`
  width: 90%;
  height: 50px;
  border: 1px solid ${({ theme }) => theme.colors.borderColor};
  background-color: ${({ theme }) => theme.colors.background};
  border-radius: 5px;
  margin: 10px auto;
  padding-left: 10px;
  justify-content: center;
`;

export const AddressText = styled.Text`
  font-size: 20px;
  font-weight: bold;
  margin: 15px 0px;
  text-align: center;
  color: ${({ theme }) => theme.colors.primaryText};
`;

Também vamos remover de index esse AddressText, pois iremos usar ele fora dos dois forms.

const Form = () => {
  const [editable, setEditable] = useState(false);

  return (
    <Container>
      <EditButtonContainer>
        <EditButton
          onPress={() => {
            setEditable(!editable);
          }}
        >
          <EditImage source={edit} />
        </EditButton>
      </EditButtonContainer>
      {!editable ? <FieldsDisabled /> : <FieldsAbled />}
      <AddressText>Gerenciar Endereços</AddressText>
    </Container>
  );
};

Agora nós já temos o nosso AddressText fora dos forms, podemos configurar a navegação no componente para levar o usuário para lá.

const Form = () => {
  const navigation = useNavigation<PropsStack>();
  const [editable, setEditable] = useState(false);

  return (
    <Container>
      <EditButtonContainer>
        <EditButton
          onPress={() => {
            setEditable(!editable);
          }}
        >
          <EditImage source={edit} />
        </EditButton>
      </EditButtonContainer>
      {!editable ? <FieldsDisabled /> : <FieldsAbled />}
      <AddressText
        onPress={() => {
          navigation.navigate("AllAddress");
        }}
      >
        Gerenciar Endereços
      </AddressText>
    </Container>
  );
};

Agora podemos verificar que a navegação está correta. Agora uma coisa que notei é em relação a distância do título para o topo. Não está boa, vamos ajustar, vamos no styled.ts de UserProfile e de AllAddress, que é onde usamos por enquanto esse título, e vamos deixar apenas o statusBarHeight como padding.

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