2021-05-30

How do I access the onTextLayout event within a React Native Text component?

I have a React Native Text component that contains a user profile's information and has a max NumberOfLines at 2. I also have a TouchableOppacity button that says "Read More.." on it that clears the max NumberOfLines of the component. I don't want the "Read More" button to show if there the NumberOfLine is already 2 or less.

In the documentation it says that the onTextLayout event would return an array with a TextLayout objects for each line but when I try to access it I never have anything returned. I've tried to access the onLayout event and I can get info from that event but it doesn't have the info that I need. Has anyone had this problem?

<Text numberOfLines={2} onTextLayout={onInfoLayout}>
            test text test text test text test text
            test text test text test text test text
</Text> }


const onInfoLayout = React.useCallback((e:any) =>{
   console.log("this is how long the text is", e);
}, []);

The code above displays nothing in the console but if I were to change onTextLayout to just onLayout it would log the object.. but again that event doesn't have the info I need.

Any help is super appreciated!



from Recent Questions - Stack Overflow https://ift.tt/3wMYQfd
https://ift.tt/eA8V8J

No comments:

Post a Comment