React Native 스크린크기만큼 width 꽉 채우기

 

React Native에서 스크린의 세로를 꽉 채우는건 flex: 1로 쉽게 할 수 있을 것 같은데, 스크린의 가로를 꽉 채우는게 생각보다 쉽지 않다.

흔히들 먼저 떠올리는 100%를 써봤는데 안된다

 

이 때는 react-native에서 제공하는 Dimensions를 활용하면 된다

import {Dimensions} from 'react-native';
const fullWidth = Dimensions.get('window').width
const fullHeight = Dimensions.get('window').height

 

border-radius를 고정값으로 설정하면, 화면 사이즈에 따라서 굴곡의 비율이 달라질 수 있다. 이런 문제 또한 전체 스크린 사이즈를 받아서 그 일부 비율로 설정해주면 해결할 수 있다!

import React from 'react';
import Styled from 'styled-components/native';
import {Dimensions} from 'react-native';

const Container = Styled.View`
  width: ${Dimensions.get('window').width * 0.9}px;
  height: 200px;
  margin-vertical: 5px;
  padding: 10px;
  border-radius: ${Dimensions.get('window').width * 0.05}px;
  background-color: pink;
`;

interface Props {
  contents: React.ReactNode;
}
const Card = ({contents}: Props) => {
  return <Container>{contents}</Container>;
};

export default Card;