Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

textAlign: 'justify' not working

See original GitHub issue

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.

Issue Analytics

State:
Created 5 years ago
Reactions:5
Comments:11

Top GitHub Comments

1reaction

noumantahircommented, Jan 27, 2022

@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
      }}
    />

1reaction

clytrascommented, Jan 23, 2019

~~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

Top Results From Across the Web

text-align justify not working

Just use style="text-align:justify" . It works in all browsers.

text-align: justify; doesn't work together with white-space

This is an issue in the default WordPress editor (Gutenberg "blocks" editor), which uses white-space: pre-wrap; in the standard view. ... Applying or...

text-justify

The text-justify property in CSS is a companion to the text-align property that is used to set the justification method of text when ......

Why sometimes is text-align not working? (Example)

It's like something is blocking it, links we added class to didn't move to the center of the page. I tried text-align but...

CSS text-justify property

The text-justify property specifies the justification method of text when text-align is set to "justify". Default value: auto. Inherited: yes. Animatable: no.