1. Agora vamos trabalhar na descrição do produto. Para isso, criaremos uma pasta chamada "Description" dentro da pasta "Product" com os arquivos: "index.tsx" e "styled.ts".

2. Começaremos com o arquivo "styled.ts". Primeiro, definimos o componente "Description", que é a description em si.

   import styled from "styled-components/native";
   
   export const Description = styled.Text`
     font-size: 16px;
     margin: 10px 30px;
     color: ${({ theme }) => theme.colors.primaryText};
   `;
   

3. Ainda em "styled.ts", definimos um outro componente "ReadMoreLess", que é o texto que iremos usar no “botão” para ler mais ou menos

   import styled from "styled-components/native";
   
   export const Description = styled.Text`
     font-size: 16px;
     margin: 10px 30px;
     color: ${({ theme }) => theme.colors.primaryText};
   `;
   
   export const ReadMoreLess = styled.Text`
     font-size: 14px;
     color: ${({ theme }) => theme.colors.secondaryText};
     font-weight: bold;
     text-align: center;
   `;
   

4. Agora, passaremos para o arquivo "index.tsx" de "Description".

5. Iremos também criar uma tipagem para props que iremos receber.

   import React, { useState } from "react";
   import { Description, ReadMoreLess } from "./styled";
   
   interface descriptionProps {
     desc: string;
   }
   

6. Em seguida, criamos o componente "DescriptionComponent". Este componente apresenta a descrição e um botão para "Ler Mais" ou "Ler Menos".

   const DescriptionComponent = ({ desc }: descriptionProps) => {
     return (
       <>
         <Description numberOfLines={numberOfLines}>{desc}</Description>
       </>
     );
   };
   
   export default DescriptionComponent;
   

7. O “botão” de ler mais ou menos só vai aparecer se batermos um número especifico de caracteres do texto, pois se ele não atingir 3 linhas de texto, não é necessário ativar o ler mais.

   const DescriptionComponent = ({ desc }: descriptionProps) => {
     return (
       <>
         <Description numberOfLines={numberOfLines}>{desc}</Description>
         {desc.length >= 115 ? (
           <ReadMoreLess
             onPress={() => {
             }}
           >
             {readMoreText}
           </ReadMoreLess>
         ) : null}
       </>
     );
   };
   
   export default DescriptionComponent;
   

8. Agora nós iremos criar o handle e os states para gerenciar quando ler mais ou ler menos.

   const DescriptionComponent = ({ desc }: descriptionProps) => {
     const [readMoreText, setReadMoreText] = useState("Ler Mais");
     const [numberOfLines, setNumberOfLines] = useState(3);
   
     const handleReadMore = (numberOfLines: number) => {
       if (numberOfLines != 3) {
         setNumberOfLines(3);
         setReadMoreText("Ler Mais");
       } else {
         setNumberOfLines(100);
         setReadMoreText("Ler Menos");
       }
     };
   
     return (
       <>
         <Description numberOfLines={numberOfLines}>{desc}</Description>
         {desc.length >= 115 ? (
           <ReadMoreLess
             onPress={() => {
               handleReadMore(numberOfLines);
             }}
           >
             {readMoreText}
           </ReadMoreLess>
         ) : null}
       </>
     );
   };
   
   export default DescriptionComponent;
   

9. Agora, integraremos o componente "DescriptionComponent" na tela de "Product". Primeiro, adicionamos uma constante chamada "description" que contém uma descrição do produto.

   const Product = () => {
   
   	const description =
   	  "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ducimus consequatur, quos reiciendis distinctio molestias consequuntur laudantium nostrum, nesciunt quis velit provident modi temporibus voluptatibus natus porro quisquam quae. Ad laboriosam ducimus iste cumque corporis et quibusdam hic. Commodi quasi, in totam iure repellat voluptatibus labore nostrum omnis itaque minus?";
   

10. Em seguida, adicionamos o componente "DescriptionComponent" ao retorno do componente "Product". Passamos a constante "description" para a propriedade "desc" do componente "DescriptionComponent".

    const Product = () => {
      // ...resto do código...
    
      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} />
        </Container>
      );
    };
    

11. Agora, temos um componente "DescriptionComponent" que mostra uma descrição abreviada do produto e permite ao usuário expandir ou retrair o texto.

[](data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2738%27%20height=%2738%27/%3e)