Setting padding in nested text elements has no effect

[muzea]

I want to make a component like antd divider, but setting the width and padding on the nested text has no effect. If want to leave a little space in the middle of the text and place a vertical dividing line, what do I need to do?

const Demo = () => (
  <Document>
    <Page>
      <Text style={styles.text}>padding take effect</Text>
      <Text><Text style={styles.text}>Not take effect</Text><Text> some word</Text></Text>
    </Page>
  </Document>
);

const styles = StyleSheet.create({
  text: {
    padding: '0 48pt',
  },
});

ReactPDF.render(<Demo />);

[DewangS]

How about if you could please try the below? Not sure what will be the outcome though...

<Document>
    <Page>

      <Text style={styles.text}>padding take effect</Text>
      <View><Text style={styles.text}>Not take effect</Text><Text> some word</Text></View>
    </Page>
  </Document>

[muzea]

I want Not take effect and some word to be in the same row, so this way does not solve my problem. @DewangS

[DewangS]

fair enough. I don't think it supports inline styling.

[DewangS]

Just noticed that you are wrapping Text within Text and the outer Text doesn't have any text in it. Any particular reason why you are doing this? I just tried something similar with 2 different styles and had text in both elements .. it seems to have worked.

const styles = StyleSheet.create({
    textName: {
      marginLeft: 12,
      fontSize: 12,

      fontWeight: 'heavy',
      textAlign: "justify",
      fontFamily: "Helvetica",
    },
    text: {
      marginLeft: 12,
      fontSize: 12,
      textAlign: "justify",
      fontFamily: "Helvetica",
    },
});
<Text style={styles.textName}>John <Text style={styles.textName}>Doe</Text></Text>

[muzea]

@DewangS I want to implement a divider to separate the text in the same line, like this codepen, it should have a margin that can be set. So I think divider should be an independent element, or is there any better way to implement this?

[athif23]

@muzea how about you put the View element between the text, and style the view element?

[DewangS]

@muzea

Please try below ... though as per your earlier observation, it doesn't respect the style for margins\paddings etc so, the ONLY way I could get space between WORD and the pipe '|' was by manually adding space after the WORD or you can do that by adding required spaces before and after the pipe char e.g. ' |. ' .. it's not an ideal solution...

const styles = StyleSheet.create({
    lh: {
        paddingRight: 8
      },
    split: {

        width: '1px',
        color: 'red',
        height: '1rem'
      },
});

<View >
        <Text>
         <Text style={styles.lh}>WORD</Text> 
         <Text style={styles.split}>     |     </Text> 
         <Text style={styles.lh}>WORD</Text>
         </Text>
</View>

[Mariam-Haitham]

Hi, I am having the same issue and I can't find a way to solve it.

`

          <Text style={styles.iconText}> {mobile_number}</Text>

`

I want the mobile number and the icon to be in the same line, but I need to give the mobile number extra padding so that it's vertically centered with the icon, any hints?