CODEWITHSUNDEEP
react-native
ajonno
ajonno

Reputation: 2240

How to place <Text> on TOP of <Text> in React Native?

Im having trouble working out how to place a <Text> component ON TOP OF another <Text> component.

I tried zIndex but isn't making any change to layout. The "More..." text component is still rendering after the main <Text> area.

Appreciate some assistance, I'd like to have the "More..." Text item, render ON TOP OF the last word ("elite").

```

<View style={{paddingTop: 50, margin: 20}}>
  <Text
    style={{
    zIndex: 100,
   }}>
     <Text
       style={{
           zIndex: 104,
           backgroundColor: "green",
       }}>
           More...
     </Text>
  </Text>
</View>

``` enter image description here

Upvotes: 2

Views: 2457

Answers (1)

Gee
Gee

Reputation: 1418

Try using position: "absolute" in the styles for the second Text component, then play around with sizing and left/top positioning to get it where you want.

Upvotes: 4

Related Questions