RN) StatusBar 높이 값 구하는 방법

---

1. npx expo install expo-constants

2. import Constatns from 'expo-constants'

3. Constants.statusBarHeight

---

react native의 StatusBar는 안드로이드의 높이값만 구할 수 있기 때문에 iOS까지 지원하기 위해서는 Constants를 사용하여 StatusBar Height를 구해야 합니다.

사용예제

import { Platform, View } from 'react-native'
import React from 'react'
import Constants from 'expo-constants';

const PageContainer = ({children,style}) => {
  return (
    <View
      style={{...style,flex:1,marginTop:Platform.OS === 'android' ? +Constants.statusBarHeight : 0}}
      >
      {children}
    </View>
  )
}

export default PageContainer

const Parent = () => {

  return (
    <SafeAreaView style={{flex:1}}>
      <PageContainer style={{ backgroundColor: '#fff'}}>
        <Text>what is RN..</Text>
      </PageContainer>
    </SafeAreaView>
  )
}

export default Parent

SafeAreaView는 iOS에서만 동작합니다.