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

[naor572]

hey fawaz I have the same problem with the see more.
its overlaps on my text... i tried what you wrote here but didnt succuess solve the problem....
can you write me what i need to do?

[fawaz-ahmed]

Hi @naor572 , I'd be glad to be of help. For that I need to see what's happening. Can you create a repo and reproduce this issue ? So that I can run it and check what's going wrong.
OR
any other way I can debug on what the problem is ?

[wolfag]

hi @fawaz-ahmed
the issue happen on android in case numberOfLines={1}

import ReadMore from '@fawazahmed/react-native-read-more';

import React from 'react';
import { SafeAreaView, StyleSheet, View } from 'react-native';


const App = () => {
  return (
    <SafeAreaView style={styles.safe}>
      <View style={styles.root}>
        <ReadMore
          numberOfLines={1}
          style={[styles.textStyle]}
        >
          {
            "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."
          }
        </ReadMore>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safe: {
    flex: 1,
  },
  root: {
    flex: 1,
    padding: 16,
  },
  textStyle: {
    fontSize: 14,
  },
});

export default App;

[fawaz-ahmed]

the issue happen on android in case numberOfLines={1}

    <SafeAreaView style={styles.safe}>
      <View style={styles.root}>
        <ReadMore
          numberOfLines={1}
          style={[styles.textStyle]}
        >
          {
            "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."
          }
        </ReadMore>
      </View>
    </SafeAreaView>

Hi @wolfag , it's a known issue
https://github.com/fawaz-ahmed/react-native-read-more#known-issues

[wolfag]

hi @fawaz-ahmed I have a small solution for 1 line case, could you take a look on it: ReadMore

[pierroo]

Even with nbOfLines={2} (or more) I still see the overlapping "see more" issue.
It happens as soon as the second line is long enough to take full width.
I also noticed that when the "see more" overlaps, the "..." default ellipsis also isn't showing.

[fawaz-ahmed]

Hi @pierroo , to fix this issue I will have to reproduce this first. Can you share with me more details ? specially code using which I can see this behavior.

[pierroo]

Hi @pierroo , to fix this issue I will have to reproduce this first. Can you share with me more details ? specially code using which I can see this behavior.

Of course, although I am not using anything fancy:
The text is in a View, and tapping on that view (or the see more) will expand; and to close I added my own icon button chevron down.
I am using ParsedText, although I face the same issue with just Text.
This is a controlled collapsed from state, although the same happens when using the default non controlled collapsed.

<TouchableOpacity activeOpacity={0.9} onPress={expandText} disabled={!collapsed}>
              <View
                style={[
                    {
                    overflow: 'hidden',
                    marginHorizontal: 12,
                    top: !collapsed ? 80 : 120,
                    alignSelf: 'center',
                    backgroundColor: 'transparent',
                    borderRadius: 12,
                    padding: 12,
                    elevation: 3,
                  }
                ]}
              >
                <ReadMore
                  numberOfLines={2}
                  collapsed={collapsed}
                  onSeeMore={() => setCollapsed(false)}
                  expandOnly
                  seeMoreStyle={{ color: 'blue' }}
                  style={{
                    color: TITLE_COLOR,
                    fontFamily: 'Nunito-Regular'
                  }}
                >
                  <ParseText
                    content={content?.trim()}
                    family={'Nunito-Regular'}
                    size={14}
                    color={TITLE_COLOR}
                  />
                </ReadMore>
                {
                  !collapsed && (
                    <Touchable onPress={() => setCollapsed(true)} >
                      <View style={{ display: 'flex', overflow: 'hidden', padding: 6, borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}>
                        <Icon name="chevron-down-circle-outline" size={24} style={{ color: TITLE_COLOR}} />
                      </View>
                  </Touchable>
                  )
                }
              </View>
            </TouchableOpacity>

All the above is working perfectly (expanding, collapsing, animating height and width, etc)
The only issue is the overlapped "see more", and the flickering text crop even before I do anything, or after I collapse. (on random texts, not all, so I guess it depends on their length / nb of lines)

[manisha351]

@fawaz-ahmed I'm also getting the same overlap issue in the ios devices could you suggest us any workaround with the particular issue .working with the latest release.

[fawaz-ahmed]

@manisha351 help me replicate the issue so that I can resolve it. Share code that I can run and see what's happening ?

[manisha351]

@fawaz-ahmed please find the below code
const [expandAnswer, setExpandAnswer] = useState(true);

const toggleReadMoreDots = () => {
setExpandAnswer(!expandAnswer);
};

<ReadMore
numberOfLines={3}
style={{
fontFamily: "Inter-Regular",
fontSize: hp(1.7),
}}
collapsed={expandAnswer}
onPress={toggleReadMoreDots}
seeMoreText={""}
seeLessText={""}
onSeeMore={() => setExpandAnswer(false)}
onSeeLess={() => setExpandAnswer(true)}
suppressHighlighting={true}
>
<HighlightMentionedUserText
description={
" Hi @Manisha_Prajapati hi hello hello happy happy new year hope you guys happy birthday happy happy new year to you guys and your family happy happy birthday happy happy new year hope you are doing good happy happy new day @Umor_Jyoti_Chetia"
}
/>

const highlightKeywords = (text, keywords, name) => {
const regex = new RegExp((${keywords.join("|")}), "gi");
const parts = text?.split(regex);

const userName = "@" + name?.replace(/_/g, " ");

return (
parts?.length > 0 &&
parts?.map((part, i) => {
if (keywords?.includes(part)) {
return (
<Text
key={i}
style={part === userName ? styles.highlight : styles.normal}
>
{part}

);
}
return part;
})
);
};

export const HighlightMentionedUserText = ({
description,
additionalStyle,
}) => {

const rawDescription = description?.split(" ");
const otherIds = [];
rawDescription?.forEach((word) => {
if (word?.startsWith("@")) {
otherIds?.push(word?.replace(//g, " "));
}
});
return (

{highlightKeywords(
description?.replace(//g, " "),
otherIds,
"Manisha_Prajapati"
)}

);
};
reference images for iphone 13 ios:15.0 :

@manisha351 help me replicate the issue so that I can resolve it. Share code that I can run and see what's happening ?

[fawaz-ahmed]

@manisha351 in your case, I see empty see more text. You can pass a prop seeMoreOverlapCount={5}, the default value for this is 2, passing a higher value can resolve the issue.

[Nisha-syngenta]

Hie @fawaz-ahmed i am also facing the same issue on android. could you please provide solution to it.
my code is:

<View style={{ flex: 1, padding: 10 }}>
          <ReadMore
            numberOfLines={4}
            style={{
              fontSize: SIZES(15),
              paddingTop: SIZES(7),
              fontFamily: fontFamily.regular,
              color: colors.black10,
              lineHeight: SIZES(22),
            }}
            seeMoreStyle={{
              fontSize: SIZES(15),
              fontFamily: fontFamily.regular,
              color: colors.blue,
              lineHeight: SIZES(22),
            }}
            seeMoreText={"READ MORE"}
            collapsed={true}
            onSeeMore={props.onHyperLinkPress} >
            {item.recommendation}
        </ReadMore>
    </View>

[fawaz-ahmed]

@Nisha-syngenta tried with your code, but it shows up fine. If you can create another react native project and share it somehow(a zip or github repo) where it can be reproduced. Then I will be able to debug the issue.

[eminsr]

This issue is not consistent between devices. No overlapping in iPhone 14 but same text overlaps in iPhone 14 Pro Max.

@Nisha-syngenta if you can give us the returned numbers for your SIZES function along with the text and the device information, I think this issue can be reproduced.