SafeAreaView의 상단을 참조안하는 방법에 대해

기존 소스를 파악 하던도중 이러한 부분을 만났다.

검색해보니 '아마 safearea에서 상단을 참조안하고 해당 뷰를 화면 상단에 꽉 채우는 내용일터이다. ' 라 판단했었다.

<SafeAreaView forceInset={{top: 'never',}}>
</SafeAreaView>

 

열심히 따라해 보았으나 전혀 변함이없다

 

 

해당 라이브러리를 제공해주는 홈페이지에 찾아가서 보니

해당 내용이없다....

 

5.x 버전 기준으론 해당 내용을 하려면

 

import { useSafeAreaInsets } from 'react-native-safe-area-context';

function Demo() {
  const insets = useSafeAreaInsets();

  return (
    <View
      style={{
        paddingTop: insets.top,
        paddingBottom: insets.bottom,

        flex: 1,
        justifyContent: 'space-between',
        alignItems: 'center',
      }}
    >
      <Text>This is top text.</Text>
      <Text>This is bottom text.</Text>
    </View>
  );
}

와 같이 하라고한다....

 

저 소스에서 paddingTop을 추가안해주면 될듯하다.

 

몇 시간을 왜 안되지 라며 다른 부분에 의한 문제인가 코드를 다시 보았으나 

참담한 결과이다.

 

이글을 보는 사람은 그런일을 겪지 않았으면 한다.

 

참고로 해당 예제를 바로 따라해보면 오류가 난다

최상단을 

<SafeAreaProvider>로 감싸야해! 라는 에러이다

해당 에러 내용 그대로 최상단을 감싸주면 된다.

무슨 용도인지는 모르겠지만 시키니 따라했다.