Read More With Library

ReadMore.tsx

import { FC } from 'react';
import theme from '@/theme';
import clip from 'text-clipper';
import { Dimensions, } from 'react-native'
import { TEXT_STYLES } from '@/lib/typography';
import ReadMoreFawaz from '@fawazahmed/react-native-read-more';

interface Props {
  text: string
}

const ReadMore: FC<Props> = (props) => {
  const screenWidth = Dimensions.get('window').width;
  return (
    <ReadMoreFawaz
      seeMoreStyle={{
        color: theme.colorText.Active,
        fontSize: TEXT_STYLES["md/Regular"].fontSize,
        lineHeight: TEXT_STYLES["md/Regular"].lineHeight,
      }}
      seeLessStyle={{
        color: theme.colorText.Primary,
        fontSize: TEXT_STYLES["md/Semibold"].fontSize,
        lineHeight: TEXT_STYLES["md/Semibold"].lineHeight,
      }}
      seeMoreText='Read More'
      seeLessText='Read Less'
      numberOfLines={3}
      style={{
        color: theme.colorText.Secondary,
        fontSize: TEXT_STYLES["md/Regular"].fontSize,
        lineHeight: TEXT_STYLES["md/Regular"].lineHeight,
      }}>
      {clip((props.text), screenWidth, { html: true, stripTags: true })}
    </ReadMoreFawaz>
  )
}

export default ReadMore;