Show more/less on <Text />

[melissa07]

I have a feed screen with posts. When the post description is longer than 4 lines I want to be able to toggle show more/less.
I've been trying to use references to keep the state of each post show state but I can't seem to make it work. If anyone could help me it would be greatly appreciated. Here's a snippet of my code:

FeedScreen.jsx

<FlashList
            ref={listRef}
            estimatedItemSize={610}
            scrollEventThrottle={100}
            data={memoData}
            keyExtractor={(item) => `feed_item_${item.information.id}`}
            renderItem={renderActivity} // Renders <PostContent />
            ListEmptyComponent={
              <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
                ...
              </View>
            }
            refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
            onMomentumScrollBegin={() => {
              this.onEndReachedCalledDuringMomentum = false;
            }}
            onEndReached={() => {
              if (!this.onEndReachedCalledDuringMomentum) {
                loadMoreData();
                this.onEndReachedCalledDuringMomentum = true;
              }
            }}
            onEndReachedThreshold={0.8}
          />

PostContent.jsx

<View
      style={{}}>
       ....
        <TextToggle value={comments} />
        ...
    </View>

TextToggle.jsx

import PropTypes from "prop-types";
import { useRef, useState } from "react";
import { Pressable, Text, View } from "react-native";

const TextToggle = ({ numberOfLines = 4, value, style = {} }) => {
  const showMoreRef = useRef(false);
  const isLongerTextRef = useRef(false);
  //   const [showMore, setShowMore] = useState(showMoreRef.current);
  //   const [isLongerText, setIsLongerText] = useState(isLongerTextRef.current);

  if (!value) return;

  return (
    <View style={{}}>
      <Text
        numberOfLines={showMoreRef.current ? undefined : numberOfLines}
        onTextLayout={({ nativeEvent: { lines } }) => {
          //   setIsLongerText(lines.length > numberOfLines);
          isLongerTextRef.current = lines.length > numberOfLines;
        }}
        style={{
          marginTop: 12,
          opacity: 0.8,
          fontFamily: "Poppins_Medium",
          fontSize: 16,
          ...style,
        }}>
        {value}
      </Text>
      {isLongerTextRef.current ? (
        <Pressable
          style={{ marginTop: 6 }}
          onPress={() => {
            // setShowMore(!showMoreRef.current);
            showMoreRef.current = !showMoreRef.current;
          }}>
          <Text style={{ opacity: 0.5, fontSize: 12 }}>{`View ${showMoreRef.current ? "less" : "more"}`}</Text>
        </Pressable>
      ) : (
        false
      )}
    </View>
  );
};
export default TextToggle;

TextToggle.propTypes = {
  numberOfLines: PropTypes.number,
  value: PropTypes.string.isRequired,
  style: PropTypes.object,
};

Thank you in advance !

[Bayramito]

<View style={{backgroundColor: "yellow"}}>
  <Text
    onTextLayout={({nativeEvent: {lines}}) => {
      setIsLongerText(lines.length > 2);
    }}
    style={{height: 0}}
  >
    {value}
  </Text>
  <Text
    numberOfLines={showMore ? undefined : numberOfLines}
    style={{
      marginTop: 12,
      opacity: 0.8,
      fontFamily: "Poppins_Medium",
      fontSize: 16,
      ...style,
    }}
  >
    {value}
  </Text>
  {isLongerText ? (
    <Pressable
      style={{marginTop: 6, backgroundColor: "red"}}
      onPress={() => {
        setShowMore(!showMore);
      }}
    >
      <Text style={{opacity: 0.5, fontSize: 12}}>{`View ${showMoreRef.current ? "less" : "more"}`}</Text>
    </Pressable>

[RUPESH1439]

@melissa07

I've fixed the same issue using Flastlist's Recyling method (https://shopify.github.io/flash-list/docs/recycling/)

Please check this hook for your reference

import { NativeSyntheticEvent, TextLayoutEventData } from 'react-native';

export const useTapToExpand: TapToExpandHook = ({
  maxLines,
  id,
}) => {
  const [numberOfLines, setNumberOfLines] = useState(maxLines);
  const layoutDone = useRef(false);
  /*
    This is used for re-cycling the items when they get out of the viewport
    specifically when used in Flashlist.

    https://shopify.github.io/flash-list/docs/recycling/
  */
  const lastId = useRef(id);

  if (!!id && id !== lastId.current) {
    lastId.current = id;
    setNumberOfLines(maxLines);
  }

  function expandText() {
    setNumberOfLines(undefined);
  }
  const onPress = numberOfLines === maxLines ? expandText : undefined;

  function handleTextLayout(e: NativeSyntheticEvent<TextLayoutEventData>) {
    if (!layoutDone.current && e.nativeEvent.lines.length > maxLines) {
      layoutDone.current = true;
      setNumberOfLines(maxLines);
    }
  }

  return {
    numberOfLines,
    onPress,
    onTextLayout: handleTextLayout,
  };
};

type TapToExpandHook = (props: TapToExpandProps) => TapToExpandReturn;

interface TapToExpandProps {
  maxLines: number;
  id?: string | number;
}
interface TapToExpandReturn {
  numberOfLines?: number;
  onPress?: () => void;
  onTextLayout?: (e: NativeSyntheticEvent<TextLayoutEventData>) => void;
}