Antes de criar as estrelas precisamos criar o texto que ficará indicando para pessoa o que fazer.
export const FeedbackText = styled.Text`
font-size: 18px;
color: ${({ theme }) => theme.colors.primaryText};
text-align: center;
margin: 40px 0px;
`;
Agora vamos utilizar esse texto
const Feedback = () => {
return (
<Container>
<DefaultTitle title="AVALIAR" fontSize={20} />
<ProfileInfo />
<FeedbackText>
Dê sua nota de 1 a 5, sendo {"\\n"}1 estrela ruim e 5 estrelas exclente.
</FeedbackText>
<NavBar />
</Container>
);
};
Agora a gente vai utilizar as estrelas de avaliação, só que aqui elas serão clicáveis
const Feedback = () => {
return (
<Container>
<DefaultTitle title="AVALIAR" fontSize={20} />
<ProfileInfo />
<FeedbackText>
Dê sua nota de 1 a 5, sendo {"\\n"}1 estrela ruim e 5 estrelas exclente.
</FeedbackText>
<AirbnbRating
selectedColor="#5F96ED"
showRating={false}
size={40}
defaultRating={0}
/>
<NavBar />
</Container>
);
};
Abaixo dessas nossas estrelas nós vamos utilizar o botão padrão
const Feedback = () => {
return (
<Container>
<DefaultTitle title="AVALIAR" fontSize={20} />
<ProfileInfo />
<FeedbackText>
Dê sua nota de 1 a 5, sendo {"\\n"}1 estrela ruim e 5 estrelas exclente.
</FeedbackText>
<AirbnbRating
selectedColor="#5F96ED"
showRating={false}
size={40}
defaultRating={0}
/>
<DefaultButton
buttonText={"ENVIAR AVALIAÇÃO"}
buttonHandle={() => {}}
buttonType={"primary"}
marginVertical={80}
/>
<NavBar />
</Container>
);
};
Temos a tela de feedback configurada certinho, faltará depois apenas o link com o backend