2

How can I show Read more button in Text if text length exceeds more than 2 lines? On Click of that Read more button a custom popup will be shown where full text will be visible. I have searched and checked here, here, here, but didn't found any proper solution to show Read more button as per requirement.

I tried this solution attached.. But here if I fixes numberOfLines to a value then "e.nativeEvent.lines.length" returns fixed value and if don't fixes numberOfLines then it returns complete text with ReadMore button which is wrong.

const ReadMore = props => {
    const [showMore, setShowMore] = useState(false)

    const longText = 'Nature, in the broadest sense, is the natural, physical, or material world or universe. "Nature" can refer to the phenomena of the physical world, and also to life in general. The study of nature is a large, if not the only, part of science. Although humans are part of nature, human activity is often understood as a separate category from other natural phenomena.'

    return (
        <View style={{
            margin: 20,
        }}>
            <Text
                numberOfLines={2}
                onTextLayout={(e) => setShowMore(e.nativeEvent.lines.length > 2)}
            >{longText}</Text>
            {showMore && (
                <Text style = {{color: 'blue'}} onPress = {() =>{
                    //Read more text action
                }}>Read More...</Text>
            )}
        </View>
    )
}
Piyush Naredi
  • 159
  • 1
  • 10
  • You can use [This](https://github.com/expo/react-native-read-more-text) library – Rutvik Bhatt Jul 24 '20 at 07:47
  • @RutvikBhatt I have already checked it. There is show more, less options in this and it's handling action by self but I want to show popup instead of it. – Piyush Naredi Jul 24 '20 at 07:49
  • @PiyushNaredi Please add your code – Tim Jul 24 '20 at 07:52
  • @PiyushNaredi btw, here I answered a question how to the get the current amount of lines in a TextInput, I think that should give you the idea: https://stackoverflow.com/questions/56663069/how-to-get-the-current-number-of-lines-in-string-of-textinput/56663717#56663717 – Tim Jul 24 '20 at 07:54
  • @Tim, this solution will work in case of textInput where numberofLines is calculated based on user entered text. But here in my case text is fixed & it's setted on Text component. How number of lines can be calculated in that case? – Piyush Naredi Jul 24 '20 at 11:04
  • @Tim, I have added code which I tried but It didn't work. – Piyush Naredi Jul 24 '20 at 11:13

0 Answers0