How to calc() height in react native for styling

Question

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
}

score 11 · Accepted Answer · answered Mar 18 '20 at 04:11

11

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.

answered Mar 18 '20 at 04:11

SDushan

4,341
2
16
34

thanks for your reply, is there any comment on structure of the code so that maybe can use another method. – GG program Mar 18 '20 at 04:24
@GGprogram bit confused about your comment. what exactly you want to achieve? – SDushan Mar 18 '20 at 04:37
Would this approach still work if you switch between landscape and portrait mode on a tablet device? In such a scenario, an eventListener hook would be needed to obtain the updated dimensions, which can impact performance since styling and state management would be combined. – Hannibal B. Moulvad Mar 16 '23 at 10:14

score 4 · Answer 2 · answered Mar 18 '20 at 04:26

useWindowDimensions automatically updates width and height values when screen size changes. You can get your application window's width and height like so:

import {useWindowDimensions} from 'react-native';

const windowWidth = useWindowDimensions().width;
const windowHeight = useWindowDimensions().height;

Here is the example

https://snack.expo.io/@asad_4561/87dc08?session_id=snack-session-FGVnhyoDp&preview=true&platform=web&iframeId=ufwds87fh5&supportedPlatforms=ios,android&name=useWindowDimensions&description=Example%20usage&waitForData=true

This is one of the options, but it may be only used for inline css because hooks are available inside a component. — gildniy, Oct 22 '22 at 12:39

How to calc() height in react native for styling

2 Answers2