[SOLVED] How to calc() height in react native for styling

How to calc() height in react native for styling

There is a grey square which positions the 4 small squares
There is a black square which there will be 4 small squares in each side's center of the black square.
For normal web, I can do it by calculation of the width
But how should I do it in react native which calc(100% - 20) is not working there

Please check the code in codepen: Codepen

index.html

<!DOCTYPE html>

<head>
    <title>squares in square</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class='container'>
        <div class='invisiblesquare'>
            <div class='bigsquare'></div>
            <div class='col1'>
                <div class="smallsquare"></div>
            </div>
            <div class='col2'>
                <div class="smallsquare"></div>
                <div class="smallsquare"></div>
            </div>
            <div class='col3'>
                <div class="smallsquare"></div>
            </div>
        </div>
    </div>
    </div>


</body>

</html>

style.css

.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;

}
.invisiblesquare{
    position: relative;
    height: 20%;
    width:20%;
    border: 1px solid grey;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bigsquare{
    position: absolute;
    width: calc(100% - 22px);
    height: calc(100% - 22px);
    border: 1px solid black;
}
.col1{
    height: 20px
}
.col2{
    height: calc(100% - 22px);
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.col3{
    height: 20px
}

.smallsquare{
    height: 20px;
    width: 20px;
    border: 1px solid black
}

Solution

You can get screen Dimension using,

import {Dimensions} from 'react-native';

const screenWidth = Dimensions.get('window').width;
const screenHeight = Dimensions.get('window').height;

Then you can do your calculations as below,

width: screenWidth - 20

Hope this helps you.