Nós vamos começar criando a pasta “SellerInfo” dentro de “Product” que está dentro de componentes, e nela vamos criar os arquivos de index e styled.

Nós vamos criar o estilo da tela, que será simples, apenas algumas pastas separadas para usarmos

import styled from "styled-components/native";

export const Container = styled.View`
  flex-direction: row;
  justify-content: space-between;
  margin: 30px;
`;

export const SellerContainer = styled.View``;

export const Name = styled.Text`
  font-size: 18px;
  color: ${({ theme }) => theme.colors.primaryText};
  font-weight: bold;
`;

export const Button = styled.TouchableOpacity``;

export const CreatedAccount = styled.Text`
  font-size: 12px;
  color: ${({ theme }) => theme.colors.secondaryText};
`;

export const SeeProfile = styled.Text`
  font-size: 18px;
  color: ${({ theme }) => theme.colors.secondaryText};
`;

Agora vamos utilizar esse estilo criado

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

  return (
    <Container>
      <SellerContainer>
        <Name>Lucas Queiroga</Name>
        <Button>
	         {/* Aqui ficarão as estrelas */}
        </Button>
      </SellerContainer>
      <SeeProfile
        onPress={() => {
          navigation.navigate('SellerProfile');
        }}
      >
        Ver Perfil
      </SeeProfile>
    </Container>
  );
};

Podemos visualizar agora o que criamos até agora indo lá na tela de product para chamar

return (
  <Container>
    {/* ... Outros códigos */}

		</InfoContainer>

    <DescriptionComponent desc={description} />

    <SellerInfo />
  </Container>
	);

Agora podemos criar as estrelas, não é necessário criar estilo para elas, apenas utilizar o componente da lib.

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

  const Rate = 3;

  return (
    <Container>
      <SellerContainer>
        <Name>Lucas Queiroga</Name>
        <Button>
          <AirbnbRating
            selectedColor="#5F96ED"
            showRating={false}
            isDisabled={true}
            size={16}
            defaultRating={Rate}
            starContainerStyle={{
              marginLeft: -20,
            }}
          />
        </Button>
      </SellerContainer>
      <SeeProfile
        onPress={() => {
          navigation.navigate("SellerProfile");
        }}
      >
        Ver Perfil
      </SeeProfile>
    </Container>
  );
};

Agora a gente consegue visualizar aqui a nota do vendedor, e no futuro, quando o usuário clicar nas estrelas ele vai ser levado para tela de avaliar o vendedor.