Question 35361 in React native Question posted in
The official React Native documentation can be found here.

How we detect no of lines of text component in react native?

How we detect no of lines of the text component in react native to help in see more option, I worked OnTextLayout prop of text but it does not work.
Any solution?

Tags:

2

Answers


  1. 0

    You should always share the code that you’ve worked on even if it doesn’t work. So the community can guide to the right direction. Having said that this is tested code and it should work try this.

    const onLayout = (e) => {
  console.log(e.nativeEvent.lines.length)
},

<Text onTextLayout={onLayout}>Hello</Text>
    Login or Signup to reply.
  2. 0

    checkout this approach with using useCallback, this is optimum solution of my knowledge, showMore is the state for show show more option

    const NUM_OF_LINES = 5;
const dummyLongText = 'Lorem ipsum ...';

function SomeComponent () { 
  const [ showMore, setShowMore ] = useState(false);
  const onTextLayout = useCallback(e => {
    setShowMore(e.nativeEvent.lines.length >= NUM_OF_LINES);
  }, []);

  return (
    <Text numberOfLines={noOfLines} onTextLayout={onTextLayout}>
      {dummyLongText}
    </Text>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search