React-native-render-html: Last pragraph sentence of some html text gets cuts off i.e not shown
This is problem In smaller device in Android i.e. Google pixel 2xl or 2a and not problem in larger device. Could somebody tell what is wrong?
kamalpandey
All 19 comments
Try add this to your props, worked for me.
customWrapper: (content) => {
return <Text textBreakStrategy="simple">{content}</Text>;
},
ohitslaurence
on 5 May 2020
Try add this to your props, worked for me.
customWrapper: (content) => { return <Text textBreakStrategy="simple">{content}</Text>; },
hi,
can you give me full sample?
nolife08021
on 6 May 2020
Try add this to your props, worked for me.
customWrapper: (content) => { return <Text textBreakStrategy="simple">{content}</Text>; },
I tried, it cut off more content. lol
nolife08021
on 6 May 2020
nolife08021
on 9 May 2020
@kamalpandey @ohitslaurence do you guys have any solution on this?
nolife08021
on 9 May 2020
I tried
customWrapper={(content) => {return <TextInput multiline={true} editable={false} selectTextOnFocus={false}>{content}</TextInput>;}}
An error show out.
Invariant Violation: Nesting of <View> within <Text> is not currently supported
nolife08021
on 9 May 2020
@nolife08021 No Waiting for some one to reply on this.
kamalpandey
on 9 May 2020
@kamalpandey
try this
<HTML
tagsStyles={{p:{ flex:1 }}}
allowFontScaling={false}
customWrapper={(content) => {return <TextInput style={{backgroundColor:'white'}} multiline={true} editable={false} selectTextOnFocus={false}>{content}</TextInput>;}}
baseFontStyle={{flex:1, fontSize:14, fontFamily: "System"}} ignoredStyles={["font-family"]}
html={html}/>
nolife08021
on 9 May 2020
@kamalpandey Also try adding lineHeight to your html tags. Like 1.4x your font size
ohitslaurence
on 9 May 2020
@kamalpandey Also try adding
lineHeightto your html tags. Like 1.4x your font size
lineHieght works for me. Thanks
nolife08021
on 9 May 2020
@nolife08021 @ohitslaurence
I am using like this
<HTML
html={postBody}
onLinkPress={handleLinkPress}
imagesMaxWidth={imagesMaxWidth()}
ignoredStyles={[...IGNORED_STYLES]}
baseFontStyle={baseFontStyle()}
alterChildren={node => alterChildren(node)}
alterNode={node => alterNode(node)}
staticContentMaxWidth={staticContentMaxWidth()}
/>
where should i be using?
kamalpandey
on 11 May 2020
@nolife08021 @ohitslaurence
I am using like this
<HTML html={postBody} onLinkPress={handleLinkPress} imagesMaxWidth={imagesMaxWidth()} ignoredStyles={[...IGNORED_STYLES]} baseFontStyle={baseFontStyle()} alterChildren={node => alterChildren(node)} alterNode={node => alterNode(node)} staticContentMaxWidth={staticContentMaxWidth()} />
where should i be using?
@kamalpandey You can put the lineHeight inside your baseFontStyle
ohitslaurence
on 11 May 2020
@ohitslaurence
I added this
const MOBILE_FONT_SIZE = 15;
export const baseFontStyle = () => {
return {
fontSize: isTablet ? TABLET_FONT_SIZE : MOBILE_FONT_SIZE,
lineHeight: MOBILE_FONT_SIZE * 1.4,
color: Colors.darker
};
};
but still issue persists.
kamalpandey
on 11 May 2020
@kamalpandey
I set the lineHeight in tagStyle.
<HTML
allowFontScaling={false}
tagsStyles={{p:{fontSize:18, padding:10, minHeight:60, lineHeight:22 }}}
baseFontStyle={{fontSize:scaledSize(18), fontFamily: "System", justifyContent:'center' }} ignoredStyles={["font-family"]}
html={JSON.parse(optionText)} {...htmlConfig}/>
nolife08021
on 13 May 2020
Facing same issues on MIUI and oneplus OS.
Any updates?
Tyki
on 27 May 2020
@Tyki
For now you can use
this pr
Until this pr get merged
kamalpandey
on 3 Jun 2020
So this bug has reportedly appeared with React Native on Android Q (https://github.com/facebook/react-native/issues/25258). Since v5 release, you can use defaultTextProps and set textBreakStrategy to highQualitysimple in order to circumvent this bug. I'm closing this thread now as there is an easy workaround and the bug is upstream.
jsamr
on 16 Jan 2021
So this bug has reportedly appeared with React Native on Android Q (facebook/react-native#25258). Since v5 release, you can use
defaultTextPropsand settextBreakStrategytohighQualityin order to circumvent this bug. I'm closing this thread now as there is an easy workaround and the bug is upstream.
defaultTextProps={{ textBreakStrategy: 'highQuality' }}
not worked for me, set to simple not worked too.
hotaryuzaki
on 8 Mar 2021
sorry, mine was v4 so i need to update to v5.
now it works, but i had to set to simple, not highQuality
defaultTextProps={{ textBreakStrategy: 'simple' }}
oh dont forget after update version we have to reset Metro bundler cache, i found here https://github.com/meliorence/react-native-render-html/issues/375#issuecomment-643134215
hotaryuzaki
on 8 Mar 2021
Related issues
sayem314
路
6Comments
Aparus
路
3Comments
duansiyu
路
4Comments
xipgroc
路
6Comments
KimJeonghun91
路
4Comments
Most helpful comment
@kamalpandey Also try adding
lineHeightto your html tags. Like 1.4x your font size