'how to set absolute position to top view, not parent in react native

I want to a view positioned absolutely to root view. For example, if there are 3 views, GrandFatherView, FatherView, ChildView. I want ChildView to be positioned absolutely to GrandFatherView without changing FatherView style.

<View> // GrandFatherView
  <View style={{marginTop: 100}}> // FatherView
    <View style={{position:'absolute', left: 0, top: 0, right: 0, height: 10}}> // ChildView
      {{ some contents}}
    </View>
  </View>
</View>

So I want ChildView to be at top, but it shows in top 100 as it's inside FatherView I don't want to change FatherView position for this.

Is this impossible without changing hierarchy? Please help!

Thanks

Solution 1:^[1]

If we have a margin with the value of x which in your example 100, then set -x for top value .

like this:

<View> // GrandFatherView
  <View style={{marginTop: 100}}> // FatherView
    <View style={{position:'absolute', left: 0, top: -100, right: 0, height: 10}}> // ChildView
      {{ some contents}}
    </View>
  </View>
</View>

Solution 2:^[2]

You can make FatherView Fragment instead of a View. as for the rest, you want to know precisely the exact Views sizes, padding, or margins to position your ChildView. Set top value of ChildView to 100 from the FatherView's margin

<View> // GrandFatherView
  <> // FatherView
   <View style={{position:'absolute', left: 0, top: 100, right: 0, height: 10}}> // ChildView
     {{ some contents}}
   </View>
  </>
</View>

Solution 3:^[3]

<View style={{position:'relative'}}/> // GrandFatherView

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Mohammad
Solution 2	Kcyr
Solution 3	rezaabaskhanian

'how to set absolute position to top view, not parent in react native

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]