how to set view on top of another view (having just borders) in react native

Question

I'm not too much familiar with CSS styling and want to achieve this screen. I made a view which is splitted(diagonally), but actually I achieved it by using famous border trick in CSS,

const App = () => {
   const Height=Dimensions.get("window").height
   const Width=Dimensions.get("window").width

   return <View
   style={{
      flex:1,
      borderTopWidth:Height/2,
      borderBottomWidth:Height/2,
      borderRightWidth:Width/2,
      borderLeftWidth:Width/2,
      borderTopColor:"gray",
      borderBottomColor:"red",
      borderRightColor:"red",
      borderLeftColor:"gray",
   }}>
 
   </View>; 
}

Resulting View looks like this:

As you can observe that just borders are used in this view (View A) to construct trianglular view, and this view will behave like a background, and I want to put another view (View B) on top of View A having background transparent, so I can easily design my screen by staying in View B.

I tried setting position of View B to absolute but that is not working properly, Kindly tell me comprehesive solution to this issue...

Dear, I just wanted to add any content inside "View A", but there was no space inside "View A" so now I've fixed it, and also post my answer. Thanks for showing your concern. — Faizan Muhammad, Dec 31 '21 at 18:58

score 1 · Answer 1 · answered Dec 31 '21 at 09:10

There is a style property called zIndex which tells the component to show in front or back depending on the value you give it to. zIndex default is 0 but you can give a bigger number than 0 to one of them and the component that has the higher value will show in front of the others.

Like;

<View>
    <View style={{zIndex: 1}} />
    <View style={{zIndex: 0}} />
</View>

In this example the first component will show in front of the other. Make sure they have the same parent.

score 1 · Accepted Answer · edited Dec 31 '21 at 09:36

Hre is a sample example. First you need to have a container with a position: relative. Then you could position the inner divs with positions absolute and with a z-index.

.container {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        position: relative;
    }
    .viewA {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50%;
        height: 50%;
        z-index: 2;
        background: yellow;
        opacity: 0.5;
    }
    .viewB{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: green;
        z-index: 1;
    }

<div class="container">
        <div class="viewA">View B</div>
        <div class="viewB">View A</div>
    </div>

Thanks a lot, Guys, your code gives me directions to think like this :) — Faizan Muhammad, Dec 31 '21 at 13:39

score 1 · Answer 3 · answered Dec 31 '21 at 18:44

Detailed Answer for those who are also trapped in such issues. Finally now I'm able to design the screen in a way I want, According to my question it was becoming difficult for me to put view on top of another view, due to a reason, which was this that my Root View (View A), was totally built using borders.

Question: Why I'm using just border?

Answer: Actually I wanted to design background of my screen in such way(diagonally intersected), which was easy for me to build in a triangular way, It is also a detailed discussion how triangles can be created, although there were many ways, but I opt the one which was easy for me. I don't want to go in detailed discussion about triangle formation, I have already answered it on stackoverflow interested people can check out:

Now I'm assuming nobody would have an issue in this matter that why I'm using just borders.

Coming Back to actual issue, I had just borders in main/root View (View A), means having no space inside the view to accomodate other Views as a Child. I tried my things but was not working... People are talking about some fancy words like zIndex, relative position, absolute position.

zIndex: lets the developer control the order in which components are displayed over one another.
relative position: it is default position of every component in each react native, which means our components will follow the normal order (in which components are written)
absolute position: you can explicitly change position of any component to absolute and that component now will not follow the order it will move to the top position inside the parent component (or to the top any direction which is mentioned by developer using Flex Direction)

As I didn't had space inside View A in my case, so it is even not looking apparently fine to put something inside a view having no space (just borders). So I made a new parent on top of View A and View B, and my issue is resolved, because View A and View B are locating at same level, so we don't care eithor View A has a space inside it or not, we can simply overlap both Views...

Before showing exact code let me give some examples, According to the code below, all the Views will be layed out one after other, and all have default position (relative)

const App = () => {

const Height=Dimensions.get("screen").height
const Width=Dimensions.get("screen").width

return <View style={{height:Height,width:Width}}>
  <View style={{height:300,width:300,backgroundColor:'purple',}}></View>    
  <View style={{height:200,width:200,backgroundColor:'blue',}}></View>    
  <View style={{height:100,width:100,backgroundColor:'gray',}}></View>
</View>
}

But as i change position of all views to absolute, they all move to the top of their primaryAxis (primaryAxis is defined by flexDirection it could be row or colum, by default it is column in react-native)...

const App = () => {

const Height=Dimensions.get("screen").height
const Width=Dimensions.get("screen").width

return <View style={{height:Height,width:Width}}>
  <View style= 
   {{height:300,width:300,backgroundColor:'purple',position:'absolute'}}></View>    
  <View style= 
   {{height:200,width:200,backgroundColor:'blue',position:'absolute'}}></View>    
  <View style= 
   {{height:100,width:100,backgroundColor:'gray',position:'absolute'}}></View>
</View>
}

I fix my code like this.

const App = () => {


const Height=Dimensions.get("screen").height
const Width=Dimensions.get("screen").width

return <View style={{height:Height,width:Width}}>
<View style={{
  flex:1,
  borderTopWidth:Height/2,
  borderBottomWidth:Height/2,
  borderRightWidth:Width/2,
  borderLeftWidth:Width/2,
  borderTopColor:"gray",
  borderBottomColor:"red",
  borderRightColor:"red",
  borderLeftColor:"gray",
}}></View>

<View style={{
  position:'absolute',
  height:Height,
  width:Width,
  backgroundColor:'transparent',
  justifyContent:'center',
  alignItems:'center'
 }}>
  
  <View style= 
    {{height:100,width:100,backgroundColor:'purple',borderRadius:20,margin:10}}> 
  </View>
  <View style= 
    {{height:100,width:100,backgroundColor:'cyan',borderRadius:20,margin:10}}> 
  </View>
  <View style= 
    {{height:100,width:100,backgroundColor:'pink',borderRadius:20,margin:10}}> 
  </View>

 </View>
</View>;
}

how to set view on top of another view (having just borders) in react native

3 Answers3