React-Native 콘텐츠 영역 높이 구하기

import React from 'react'
import { Dimensions, StatusBar, View } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import styled from '@emotion/native'

const FullScreenComponent = () => {
  const { height: SCREEN_HEIGHT } = Dimensions.get('window')
  const STATUSBAR_HEIGHT = StatusBar.currentHeight || 0
  const insets = useSafeAreaInsets()
  
  const CONTENT_HEIGHT = SCREEN_HEIGHT - STATUSBAR_HEIGHT - insets.bottom
  
  return (
    <Container height={CONTENT_HEIGHT}>
      <Content>상태바와 하단 안전영역 제외한 높이: {CONTENT_HEIGHT}px</Content>
    </Container>
  )
}

const Container = styled(View)<{ height: number }>`
  height: ${({ height }) => `${height}px`};
`

export default FullScreenComponent