textAlign: 'justify' not working #202

rochapablo · 2018-11-30T21:09:10Z

Is this a bug report or a feature request?

bug report.

Have you read the guidelines regarding bug report?

Yes, I did.

Have you read the documentation in its entirety?

Yes, I did.

Have you made sure that your issue hasn't already been reported/solved?

I'm sure of that.

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

I'm only testing on Android.

Is the bug reproductible in a production environment (not a debug one)?

Never tried. But pretty sure that gets the same result.

Have you been able to reproduce the bug in the provided example?

I'm gonna say no and keep going, hopping for the best.

Environment

Environment:
React: 16.6.0-alpha.8af6728
React native: 0.57.4
react-native-render-html: 3.10.0

Target Platform:
Android (7.0)

Steps to Reproduce

I'm just expecting for textAlign:'justify' work, so...

import HTML from 'react-native-render-html';

const styles = {
      a: {
        color: style.content.link.color,
        fontWeight: '300',
      },
      p: {
        color: this.props.data.color,
        fontSize: this.props.data.fontSize,
        lineHeight: this.props.data.lineHeight,
        marginBottom: 0,
        marginTop: 0,
        paddingBottom: 0,
        paddingTop: 0,
        textAlign: 'justify',
      },
    };

<HTML html={this.props.content} imagesMaxWidth={Dimensions.get('window').width}
                tagsStyles={styles}
                baseFontStyle={styles.p}
              />

Expected Behavior

Expect justified paragraphs. But only works with textAlign right or center.

Actual Behavior

It gets align to left as default I guess.

Reproducible Demo

Sorry, but I'm just hopping for the best.

The text was updated successfully, but these errors were encountered:

clytras · 2019-01-23T13:56:01Z

~~Maybe~~ This is related to this RN spec:

textAlign: enum('auto', 'left', 'right', 'center', 'justify')

Specifies text alignment. The value 'justify' is only supported on iOS and fallbacks to left on Android.

Android does not support justify for textAlign.

https://facebook.github.io/react-native/docs/text

jariwalabhavesh · 2019-03-12T05:26:28Z

@clytras : Yes justify is not working in android. In ios, it just works fine. Is there any workaround for android?

poison8 · 2019-04-01T16:09:59Z

react-native 0.59 render-html 4.1.2 not working justify for textAlign .

successanil · 2019-06-11T03:05:06Z

@clytras : Yes justify is not working in android. In ios, it just works fine. Is there any workaround for android?

Yes that feature is not supported natively by Android OS , thats why react native can't do it from outside but as a workaround you can use webview (kinda dirty solution) .

GabrielePrestifilippo · 2019-09-04T14:31:08Z

As of now, from react-native 0.60, the justify works on android too (API >=26) https://facebook.github.io/react-native/docs/text#docsNav

jsamr · 2020-07-05T14:08:11Z

I am closing because the issue is upstream (react native) and has been fixed since release 0.60.

noumantahir · 2022-01-26T19:11:46Z

@jsamr Apparently I am facing this issue on RN 0.60+ and Android API 31, rendering with textAlign:'justify' not working as expected.. it works with regular Text component but not working with RenderHtml package... I did double check if prop is actually being passed to right tag as well.

Facing issue only on Android, iOS side words as expected. Moreover on android side the textAligh:'justify' is rather causing the text lines to be clipped at the end, it may be our clue to resolving the issue.

Github issue reference: ecency/ecency-mobile#2157

jsamr · 2022-01-26T20:50:29Z

it works with regular Text component but not working with RenderHtml package...

@noumantahir I suggest that you provide a full reproduction in a separate ticket, with the exact HTML snippet, library version and React Native version, and I will be happy to investigate and test on my machine! https://github.com/meliorence/react-native-render-html/issues/new/choose

noumantahir · 2022-01-27T07:28:36Z

@jsamr apologies for inconvenience, I dug more deep today, apparently if we set selectable prop to true, the textAlign:'justify' stops working. That makes it an issue with react-native and not with render-html.

Sample code attached anyways, if we set selectable to false, the text will start justifying.

    <RenderHTML 
      source={{ html:`<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's  </p>` }}
      tagsStyles={{
        p:{textAlign:'justify'}
      }}
      defaultTextProps={{
        selectable:true
      }}
    />

jsamr · 2022-01-27T11:35:27Z

@noumantahir No worries! It is yet another layout bug in React involving Text... that is worth mentioning in the FAQ page.

dimmu123 · 2022-12-09T22:43:41Z

@jsamr apologies for inconvenience, I dug more deep today, apparently if we set selectable prop to true, the textAlign:'justify' stops working. That makes it an issue with react-native and not with render-html.

Sample code attached anyways, if we set selectable to false, the text will start justifying.
    <RenderHTML 
      source={{ html:`<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's  </p>` }}
      tagsStyles={{
        p:{textAlign:'justify'}
      }}
      defaultTextProps={{
        selectable:true
      }}
    />

This fixed my issue. Thanks!

agunbuhori · 2023-02-27T14:36:27Z

In 2023, still not working to add 'textAlign: justify' on android. Please help

longhaha1998 · 2024-04-28T07:35:02Z

In 2024, still not working to add 'textAlign: justify' on android.

jsamr added the bug Crush'em all. label Jul 4, 2020

jsamr closed this as completed Jul 5, 2020

jsamr added the bug:upstream The bug is caused by a third party library. label Jul 5, 2020

noumantahir mentioned this issue Jan 26, 2022

Bug: text-justify not working ecency/ecency-mobile#2157

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

textAlign: 'justify' not working #202

textAlign: 'justify' not working #202

rochapablo commented Nov 30, 2018

clytras commented Jan 23, 2019 •

edited

Loading

jariwalabhavesh commented Mar 12, 2019

poison8 commented Apr 1, 2019

successanil commented Jun 11, 2019

GabrielePrestifilippo commented Sep 4, 2019

jsamr commented Jul 5, 2020

noumantahir commented Jan 26, 2022 •

edited

Loading

jsamr commented Jan 26, 2022

noumantahir commented Jan 27, 2022 •

edited

Loading

jsamr commented Jan 27, 2022

dimmu123 commented Dec 9, 2022

agunbuhori commented Feb 27, 2023

longhaha1998 commented Apr 28, 2024

textAlign: 'justify' not working #202

textAlign: 'justify' not working #202

Comments

rochapablo commented Nov 30, 2018

Is this a bug report or a feature request?

Have you read the guidelines regarding bug report?

Have you read the documentation in its entirety?

Have you made sure that your issue hasn't already been reported/solved?

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

Is the bug reproductible in a production environment (not a debug one)?

Have you been able to reproduce the bug in the provided example?

Environment

Steps to Reproduce

Expected Behavior

Actual Behavior

Reproducible Demo

clytras commented Jan 23, 2019 • edited Loading

jariwalabhavesh commented Mar 12, 2019

poison8 commented Apr 1, 2019

successanil commented Jun 11, 2019

GabrielePrestifilippo commented Sep 4, 2019

jsamr commented Jul 5, 2020

noumantahir commented Jan 26, 2022 • edited Loading

jsamr commented Jan 26, 2022

noumantahir commented Jan 27, 2022 • edited Loading

jsamr commented Jan 27, 2022

dimmu123 commented Dec 9, 2022

agunbuhori commented Feb 27, 2023

longhaha1998 commented Apr 28, 2024

clytras commented Jan 23, 2019 •

edited

Loading

noumantahir commented Jan 26, 2022 •

edited

Loading

noumantahir commented Jan 27, 2022 •

edited

Loading