Nós vamos começar estruturando toda a tela. Começaremos criando dentro de “screens” uma pasta chamada “SellerProfile”, junto com os arquivos (index e styled)

Agora nós vamos começar criando o container que vamos ter na 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 + 20}px;
`;

Agora, nós vamos estruturar ela com o nosso título padrão lá no index.

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

import DefaultTitle from "../../components/common/DefaultTitle";

const SellerProfile = () => {
  return (
    <Container>
      <DefaultTitle />
    </Container>
  );
};

export default SellerProfile;

Com ele sendo usado, nós vamos agora colocar as informações da tela

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

import DefaultTitle from "../../components/common/DefaultTitle";

const SellerProfile = () => {
  return (
    <Container>
      <DefaultTitle title="PERFIL DO VENDEDOR" fontSize={20} />
    </Container>
  );
};

export default SellerProfile;

Nós vamos agora puxar o “ProfileInfo”, para exibir as informações do vendedor aqui para o usuário.

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

import DefaultTitle from "../../components/common/DefaultTitle";
import ProfileInfo from "../../components/common/ProfileInfo";

const SellerProfile = () => {
  return (
    <Container>
      <DefaultTitle title="PERFIL DO VENDEDOR" fontSize={20} />
      <ProfileInfo />
    </Container>
  );
};

export default SellerProfile;

Para poder visualizar, vamos criar a rota dele, que terá apenas o undefined.

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

export default Routes;

Nós temos a rota dele, nós vamos conseguir acessar apenas pela tela do produto e pelo chat, então para poder visualizar ele agora, a gente pode de forma temporária colocar ele como primeira tela do app.

const Routes = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}
      >
        <Stack.Screen name="SellerProfile" component={SellerProfile} />
        <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.Navigator>
    </NavigationContainer>
  );
};

export default Routes;

Podemos ver então que o nosso perfil do vendedor está OK, pegando forma.