Read More Text Overlapping

[pandiarajanvp]

when content is a short message at the time read more text gets overlap with content

and Readmore padding styles not working

[fawaz-ahmed]

@pandiarajanvp thanks for raising this issue. Some more info I need to resolve this.
What is the width of parent View container ?
What is the width of Text container ?

Can you set some background color for both and send me a screenshot again ?

[fawaz-ahmed]

@pandiarajanvp please upgrade to ver 2.3.1
Also it would be great if you can let us know if the issue is fixed.

If not try passing prop:

wrapperStyle={{
  width: '100%',
  alignItems: 'stretch'
}}

[pandiarajanvp]

Thanks for your reply,

I tried the above version has same issue

when i change the code in file name : ReadMore.js line no 588

changed to

<View style={[seeMoreContainerStyle,{position:'relative'}]} onLayout={onSeeMoreViewLayout}>

its working for both android and ios

[fawaz-ahmed]

@pandiarajanvp added a prop seeMoreContainerStyleSecondary to address your issue. Upgrade to ver 2.3.2.

To explain further this doesn't addresses the issue, it's just a hack and may fail.
The see more container is positioned absolute so that it may adjust from right side to be placed next to ellipsis.

You can pass prop now like seeMoreContainerStyleSecondary={{ position: 'relative' }}

[fawaz-ahmed]

@pandiarajanvp is the issue resolved?

[pandiarajanvp]

Thanks for your response, It's working well.

But I am facing someone issue.
when I use ellipsis='...' (as default ) Readmore text and content get flicker

<ReadMore
numberOfLines={
props.linesType == 'multilines' ? props.NumberOfLines : 5
}
allowFontScaling={false}
seeMoreStyle={{
color: this.props.theme.postDataRead,
fontSize: 10,
//marginTop: 5,
}}
seeLessStyle={{
color: this.props.theme.postDataRead,
fontSize: 10,
//marginTop: 5,
}}
wrapperStyle={{
width: '100%',
alignItems: 'stretch',
}}
seeMoreContainerStyleSecondary={{position: 'relative'}}
seeMoreText={strings('readmore')}
seeLessText={strings('showless')}
ellipsis=''
style={{
fontSize: 10,
//marginRight: 10,
marginRight: 10,
color: this.props.theme.postData,
position: 'relative',
}}>
{${props.message}}

when i changed to when I use ellipsis='' its working good

Text Content like

D
D
D
D

S
D
D
D
D
D
D
D
D
D
D
D

[fawaz-ahmed]

Problem seems with css. Remove these properties from `style`, maybe you can move them to wrapperStyle: marginRight position Remove prop seeMoreContainerStyleSecondary

…

________________________________ From: pandiarajanvp ***@***.***> Sent: Sunday, February 13, 2022 10:21:09 AM To: fawaz-ahmed/react-native-read-more ***@***.***> Cc: Fawaz Ahmed ***@***.***>; State change ***@***.***> Subject: Re: [fawaz-ahmed/react-native-read-more] Read More Text Overlapping (Issue #52) Thanks for your response, It's working well. But I am facing someone issue. when I use ellipsis='...' (as default ) Readmore text and content get flicker <ReadMore numberOfLines={ props.linesType == 'multilines' ? props.NumberOfLines : 5 } allowFontScaling={false} seeMoreStyle={{ color: this.props.theme.postDataRead, fontSize: 10, //marginTop: 5, }} seeLessStyle={{ color: this.props.theme.postDataRead, fontSize: 10, //marginTop: 5, }} wrapperStyle={{ width: '100%', alignItems: 'stretch', }} seeMoreContainerStyleSecondary={{position: 'relative'}} seeMoreText={strings('readmore')} seeLessText={strings('showless')} ellipsis='' style={{ fontSize: 10, //marginRight: 10, marginRight: 10, color: this.props.theme.postData, position: 'relative', }}> {${props.message}} when i changed to when I use ellipsis='' its working good Text Content like D D D D S D D D D D D D D D D D — Reply to this email directly, view it on GitHub<#52 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AEJEVIFN46Z34KJGJKXP6OTU245ULANCNFSM5NTSKR2A>. Triage notifications on the go with GitHub Mobile for iOS<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you modified the open/close state.Message ID: ***@***.***>

[fawaz-ahmed]

@pandiarajanvp I did some more debugging around this. This lib ReadMore does not supports any nested components other than Text. Please make sure you are not passing any nested components other than Text.

// incorrect

<ReadMore numberOfLines={8}>
  <Text>
    {'aaa\n'}
    {'aaa\n'}
    <View> // not allowed
      <Text>{'bbb\n'}</Text>
    </View>
    {'\n'}
    {'aaa\n'}
    <View>  // not allowed
      <Text>{'ccc\n'}</Text>
    </View>
    {'aaa\n'}
    {'aaa'}
    {
      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
    }
  </Text>
</ReadMore>

Update to ver 2.3.3 and try once again if possible.

[fawaz-ahmed]

Closing due to inactivity