CODEWITHSUNDEEP
cssreact-nativestyled-components
Diego Bittencourt
Diego Bittencourt

Reputation: 605

Using styled-components on react-native, how can I calc the height of a component?

Using styled components I need to calc the height of a component based on screen size, something like this:

const ForgotPasswordContainer = styled.View`
   height: calc(100% - 20px);
`;

Using like this doesn't work.

Upvotes: 2

Views: 6720

Answers (1)

Merlin Attila Fejzuli
Merlin Attila Fejzuli

Reputation: 655

Styled-components does not support percentage based values on height. Use vh (percentage of height of screen) or vw (percentage of width of screen) to make it relative to screen size.

const ForgotPasswordContainer = styled.View`
    height: calc(100vh - 20px);
`;

Note

According to the docs v2 supports percentages

Edit

Upon further inspection I noticed that even for v2+ percentages do not work on height, but do work on width. So you still need to use the vh/vw or flex to have percentage based height on v2+.

Edit #2

Upon even further inspection 1.4 supported percentage on width but not on height. It seems to me that styled-components is just weird.

Upvotes: 3

Related Questions