3.1.3.2 useSafeAreaInsets로 StatusBar 높이 구하기

useSafeAreaInsets라는 Hook 함수를 사용하면 StatusBar의 높이를 구할 수 있습니다. 높이를 구해서 그만큼 공백을 만들어주면 날짜가 보이는 부분이 StatusBar와 겹치지 않겠죠?

DateHead 컴포넌트에서 다음과 같이 useSafeAreaInsets를 불러와 사용해보세요.

components/DateHead.js

import React from 'react';
import {View, Text, StyleSheet, StatusBar} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';

function DateHead({date}) {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();

  const {top} = useSafeAreaInsets();

  return (
    <>
    <View style={[styles.statusBarPlaceholder, {height: top}]} />
      <StatusBar backgroundColor="#26a69a" />
      <View style={styles.block}>
        <Text style={styles.dateText}>
          {year}년 {month}월 {day}일
        </Text>
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  statusBarPlaceholder: {
    backgroundColor: '#26a69a',
  },
  block: {
    padding: 16,
    backgroundColor: '#26a69a',
  },
  dateText: {
    fontSize: 24,
    color: 'white',
  },
});

export default DateHead;