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...

CodePudding user response：

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.

CodePudding user response：

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 >
        <div >View B</div>
        <div >View A</div>
    </div>