React-Native : padding, margin Text Component in Text (Nested Text) not working

Problem

<Text>
  <Text style={{ padding: 50, backgroundColor: 'yellow' }}>
    it should padding area
  </Text>
    hhihihi
</Text>

 

Solution

 

1) use lineHeight

 

<Text>
  <Text style={{ fontSize:11, lineHeight:11+11+10 }}>
    It should padding area
  </Text>
    hi hi hi hi
</Text>

 

2) add space between Text components if you want to put marginLeft in last text component...(very tricky way)

 

<Text>
  <Text style={{ padding: 100, backgroundColor: 'green' }}>
    It should padding area
  </Text>
   {" "}hi hi hi hi 
</Text>

 

Reference

 

react-native Nested Text Description