Set padding to nested React Native Text component not working in Android

Question

What I want to is set padding to nested <Text>in React Native, it's working in web based react-native, but Android device or emulator it doesn't work properly. Below is what I desired to.

---

But, like below capture, in Android device or emulator, You can see info 's padding is not affected. How do I do that propery?

---

https://snack.expo.io/HJBd!h2l8

The code is simple.

 <Text>
   <Text style={{ padding: 10, backgroundColor: "yellow"}}>Info</Text> What I want to is simple.
 </Text>

Answer 1

Because padding inside <Text> component in react-native is not supported, your desire approach is slightly tricky and may cause some unwanted layout. You can use the following sample code to see the problem of this approach without some complex ways like passing Props or create your own components, etc.

import * as React from 'react';
import { Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={{flexDirection: "column", paddingTop:50}}>
        <View style={{flexDirection:'row', flexWrap: 'wrap'}}>
          <Text style={{ padding:10, fontSize: 11, backgroundColor: "yellow"}}>Info</Text>
          <Text style={{paddingTop:10}}>This line need to set padding too</Text>
          <Text>Below long long long long long long long long text</Text>
        </View>

        <View style={{paddingTop: 20, flexDirection:'row', flexWrap: 'wrap'}}>
          <Text style={{ padding:10, fontSize: 11, backgroundColor: "yellow"}}>Info</Text>
          <Text style={{paddingTop:10}}>what happen if the line is too long long long long long long long </Text>
          <Text>Below long long long long long long long long text</Text>
        </View>
      </View>
    );
  }
}

Update: the dirty and bad way. Use lineHeight is simulating padding top and bottom, add whitespace to create padding left and right.

import * as React from 'react';
import { StyleSheet,Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={{ paddingTop: 60 }}>

      <Text>
      <Text style={ style.TextHightlight }>    Info    </Text> What I want to is simple. if longlon g longlong longlongl  onglonglong longlonglonglo nglonglonglonglongl ongtext
       </Text> 

      </View>
    );
  }
}

const style = StyleSheet.create({
    TextHightlight: {
    fontSize:11,
    lineHeight: 11+11+10,
    backgroundColor: 'yellow'
  },
});

This is a static example.

For dynamic fontSize. You want to create something like const DYN_FSIZE = 10; Then fontSize: DYN_FONTSIZE and lineHeight: DYN_FSIZE*3.

Same idea apply to the whitespace, create your own addWhiteSpace function.

Answer 2

I had encountered the same problem recently and what I did is that I did not put the Text component inside another text component, but put it inside a View Component. I believe you have done former case because you want something like span effect of HTML in react native. So making the outside element View does the trick. For View Component you can add the following style,

flexDirection : "row",
justifyContent : "flex-end",

and Now the Text Component works. I belive that this is what you were looking for.