RN에서 safeArea 가져오는 방법

개발
1

RN으로 게임을 만들면서 safeArea를 구하려고 하는데 웹 프레임워크는 사용 불가능한것 같아보여서 지금은 아래와 같이 처리하고 있습니다.

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


      <SafeAreaView edges={['top']} style={styles.safeHeader}>
          {/* 중앙 제목 */}
          <Text style={[styles.title, { position: 'absolute', left: 0, right: 0, textAlign: 'center' }]}>
            프룻 체스
          </Text>
        </View>
      </SafeAreaView>

이걸로 설정해도 토스에서 화면이 잘 보이나요?

getSafeAreaInsets에서는 다른 UI여백이나 토스에서 제공하는 UI의 여백도 구해서 값을 주는건지 알고싶습니다.

2

가이드를 안내드립니다

1개의 좋아요
3

업데이트 되었군요! 감사합니다 :blush:

1개의 좋아요
4

혹시 RN에서는 아직 게임 모드는 없는건가요?

5

RN으로 게임을 만드는데 시원한 전체 화면으로 만들 수 있을까 방법이 있나 궁금합니다

6

안녕하세요 선정님! 링크주신 가이드 참고해서 작업해봤는데요, RN 기반에서는 @apps-in-toss/web-framework 가 import 되지 않고 아래와 같은 에러가 나오네요.
Type Error: Cannot read properties of undefined (reading ‘commands’)

원글의 **‘react-native-safe-area-context’ 같은 경우 그냥 단순 import하면 버전 충돌이나서 아래처럼 작업했더니 충돌없이 잘 동작하네요!
**
import { useSafeAreaInsets } from ‘@granite-js/native/react-native-safe-area-context’;

export const BottomNavigation: React.FC = () => {

const insets = useSafeAreaInsets()
<View style={[styles.bottomNav, { paddingBottom: insets.bottom }]}>

}

7

@ssaebbak @fruit-chess 님 안녕하세요

너무 늦게 답변 드려 죄송합니다.

RN에서 게임 모드가 개발 되어 SDK 1.3.0 버전으로 업데이트 부탁드립니다.