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 Right is making the text go outside of the canvas

See original GitHub issue

Bug description: Trying to generate a table with rows and columns in Hebrew For that, I’m using textAlign: 'right' method to align all my text to the right side, in addition to flexDirection: 'row-reverse'

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
  },
  rowA: {
    textAlign: 'right',
    backgroundColor: 'red',
    flexGrow: 4,
  },
  rowB: {
    textAlign: 'right',
    backgroundColor: 'red',
    flexGrow: 2
  },
  rowC: {
    textAlign: 'right',
    backgroundColor: 'red',
    flexGrow: 2
  }
});
 <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.row}>
        <Text style={[styles.rowA, styles.text]}>A</Text>
        <Text style={[styles.rowB, styles.text]}>B</Text>
        <Text style={[styles.rowC, styles.text]}>C</Text>
      </View>
    </Page>
  </Document>

You can view it here https://react-pdf.org/repl?code=1407a100818409c14c10c02eb700440f606302b816d601da253ab800ee81862c26940cec40b2027863be47802f38005004a1e00f9fb070e000f3b3cd58788952002bc00e629e804b005eb1b802200820059f7c858aa40354db003bb8462c00d9e80de4f5fd0074d1d1d805f794b4b49001558000f624f77006d589f3f3b43001a474417581f6468805d20c3491008e8e0908970a898ccd76e3704daecdf7f002174c4ef5cc402e156e2d2c4728aaae88cacfac6aca4ff480ea69ceadec801eae1c5629b7b75e2957572e2994e21e001006e60500818046471af5a061ae99e70006526b7800b5858446f4c1c090b03e1b814c90017380c1960019ab922a84d1c130884d250a100726480168e0003758341e8b04c6a41401724499286284c314dd4333934aa02163a02cafa20c916700008de0980035aa8fcd8020004d20e8673a1a0ecd804a797084401c521e063153c094f05b4e9bcc673359ecce773b5120170b45e87154a6572ac4b160ce595d9958a78545d5fe284009829dae4a400d96234b2d9e06c59a3d96c148ac592e96cbe551d16fc08b1f017b223ebb3fa29c000b9d2e0025042a294a80018af90812a25f124ac23b51c0206109680000

Expected behavior Text should not want to make me jump from a cliff and just align to the right side as it usually does

Issue Analytics

State:
Created 4 years ago
Reactions:4
Comments:5 (1 by maintainers)

Top GitHub Comments

4reactions

diegomuracommented, Aug 17, 2021

Fixed in latest build

2reactions

Apollinairecommented, Oct 31, 2020

I had the same problem, with a container that has justifyContent: 'space-between', and the rightmost item had Text with textAlign: 'right'. I had to remove space-between, and instead added flex:1 to each item inside the container. It seems that the root of this issue is some defaults that are not set on View components that are children of a display: 'flex' View. The difference between flex: 1 and flexGrow: 1 is that the flex shorthand also sets flex-shrink: 1 and flex-basis: 0. After some testing it seems that flexBasis: 0 is required when using flexGrow to wrap some aligned text.

Edit: This is also happening on the v2 : @react-pdf/renderer @2.0.0-beta.15