Vamos começar criando a pasta “AllChats” dentro de screens com o index e o styled.

Com os arquivos criados, 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;
`;

Após criar o container, vamos usar ele no index junto com o nosso DefautlTitle

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

Nós vamos também usar aqui o nosso navbar

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

Agora que temos a base criada, vamos criar a nossa rota, que será simples. (Estamos deixando o feedback apenas para você ter um ponto de referência, não modificamos ele)

export type PropsNavigationStack = {
  // ... Outros códigos
  Feedback: undefined;
  AllChats: undefined;
};

const Routes = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}
      >
        {/* Outros códigos */}
        <Stack.Screen name="Feedback" component={Feedback} />
        <Stack.Screen name="AllChats" component={AllChats} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

Nós vamos agora modificar lá em “navBar” para poder ter acesso a tela

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