React Native: borderRadius and padding styling for nested text

Question

I want to apply a different borderRadius and padding styling to nested texts, but as far as I could understand this is not supported by react native yet. Is there a workaround for this ?

What I tried so far is :

     <Text>
        <Text
          style={{
            backgroundColor: 'green',
            borderRadius: 12,
          }}>
          Text1
        </Text>
        <Text
          style={{
            backgroundColor: 'blue',
            borderRadius: 12,
          }}>
          Text2
        </Text>
      </Text>

Expected Result: Text with different backgrounds and with a borderRadius.

Actual Result: backgrounds are differnet but no borderRadius is applied

Answer 1

You can put this code in the text style

<View
      style={{
        backgroundColor: 'green',
        borderRadius: 10,
        borderWidth: 1,
        borderColor: '#fff',
        padding: 10
      }}>
     <Text>Text1</Text>
    </View>