1. Nós vamos começar criando a pasta “Denounce” dentro de “screens” e nela vamos criar os arquivos index e styled.

2. Vamos criar no styled o container da tela

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

3. E agora com vamos usar o container junto com o nosso título padrão.

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

4. Como nessa tela a gente não terá scroll, pois são poucas informações, vamos usar a nossa navbar aqui dentro do container

   const Denounce = () => {
     return (
       <>
         <Container>
           <Text>Denounce<View/>
   				<NavBar />
         </Container>
       </>
     );
   };
   

5. Com isso feito, a gente pode criar a rota da nossa tela. (Vamos sempre colocar a nova rota e tipagem por último, então para não ficar cada vez maior, os blocos de código, vamos ocultar os demais códigos, porém como sempre o novo fica por último, sabemos onde criar ele)

   export type PropsNavigationStack = {
     // ... outros códigos
     Denounce: undefined;
   };
   
   // ... outros códigos
   
   const Routes = () => {
     return (
       <NavigationContainer>
         <Stack.Navigator
           screenOptions={{
             headerShown: false,
           }}
         >
   				{/* Outros códigos */}
           <Stack.Screen name="Denounce" component={Denounce} />
         </Stack.Navigator>
       </NavigationContainer>
     );
   };
   

6. Com a rota criada, a gente vai conectar essa tela com o texto dentro de produto, para conseguir visualizar ela

   return (
     <Container>
       <BackArrow marginLeft={30} />
       <Title>Playstation 4 com dois controles</Title>
       <SubTitleContainer>
         <SubTitle>Publicado em 10/05/23</SubTitle>
         <SubTitle>Recife, PE</SubTitle>
       </SubTitleContainer>
   
       <Carousel images={images} />
   
       <InfoContainer>
         <Price>R$ 1800</Price>
         <InteractionsContainer>
           <Button activeOpacity={0.8}>
             <Like source={like} />
           </Button>
           <Button activeOpacity={0.8}>
             <Share source={share} />
           </Button>
         </InteractionsContainer>
       </InfoContainer>
   
       <DescriptionComponent desc={description} />
   
       <SellerInfo />
   
       <DefaultButton
         buttonText="Fale com o vendedor"
         buttonType="primary"
         buttonHandle={() => {}}
         marginVertical={0}
       />
   
       <DenounceText
         onPress={() => {
           navigation.navigate("Denounce");
         }}
       >
         Achou algo estranho? Denuncie!
       </DenounceText>
     </Container>
   );
   

7. Além de usar ela aqui dentro de produto, vamos usar ela dentro do perfil do vendedor

   const SellerProfile = () => {
     const navigation = useNavigation<PropsStack>();
   
     return (
       <>
         <Container contentContainerStyle={{ paddingBottom: 125 }}>
           <DefaultTitle title="PERFIL DO VENDEDOR" fontSize={20} />
   
           <ProfileInfo />
   
           <UserAds products={Data} seller={true} />
   
           <DefaultButton
             buttonText="FALAR COM O VENDEDOR"
             buttonHandle={() => {}}
             buttonType="primary"
             marginVertical={20}
           />
   
           <DenounceText
             onPress={() => {
               navigation.navigate("Denounce");
             }}
           >
             Achou algo estranho? Denuncie!
           </DenounceText>
         </Container>
         <NavBar />
       </>
     );
   };
   

<DefaultTitle title="DENUNCIAR" fontSize={20} />