Rn 네비게이션바 적용하기

개발
1

이 글의 성격은 무엇인가요?

질문 / 문제 해결

내용을 설명해주세요

안녕하세요?
SDK나 정책이 바뀐 것도 많아 앱을 처음부터 다시 만들며 정리해 보고 있는데요.
기본 상단 네비게이선바를 만들려고 하는데 이게.. 쉽지가 않네요.
최신 샌드박스 이용중입니다.

_app.tsx

import { AppsInToss } from '@apps-in-toss/framework';
import { type InitialProps } from '@granite-js/react-native';
import React, { type PropsWithChildren } from 'react';
import { context } from '../require.context';

function AppContainer({ children }: PropsWithChildren<InitialProps>) {
  return <>
    {children}
  </>;
}
export default AppsInToss.registerApp(AppContainer, { context });

granite.config.ts

import { appsInToss } from '@apps-in-toss/framework/plugins';
import { defineConfig } from '@granite-js/react-native/config';

export default defineConfig({
  scheme: 'intoss',
  appName: 'photogenic',
  plugins: [
    appsInToss({
      brand: {
        displayName: '포토제닉',
        primaryColor: '#3182F6',
        icon: 'https://appin-photogenic.web.app/resources/icon.jpg',
      },
      navigationBar: {
        withHomeButton: false,
        withBackButton: false,
      },
      permissions: [ 
        {
          name: "camera",
          access: "access",
        },
        {
          name: "photos",
          access: "read",
        },
      ],
    }),
  ],
});

아이콘 앱이름으로 나오지 않고 아래와 같이 나옵니다.
navigationBar 값들을 조절해 보거나 아예 값을 넣지 않아도 아래와 같이 조금씩 이상한 얘들만 나옵니다.
도움 주시면 넘넘 감사하겠습니다.

{
  "name": "photogenic",
  "private": true,
  "scripts": {
    "dev": "granite dev",
    "build": "ait build",
    "test": "jest --passWithNoTests",
    "typecheck": "tsc --noEmit",
    "lint": "eslint .",
    "deploy": "ait deploy"
  },
  "dependencies": {
    "@apps-in-toss/framework": "^2.0.6",
    "@granite-js/native": "1.0.4",
    "@granite-js/react-native": "1.0.4",
    "@toss/tds-react-native": "^1.3.8", 
    "react": "19.2.3",
    "react-native": "0.84.0",
    "brick-module": "0.5.0"
  },
  "devDependencies": {
    "@babel/core": "7.23.9",
    "@babel/runtime": "7.18.9",
    "@eslint/js": "^9.17.0",
    "@granite-js/plugin-hermes": "1.0.4",
    "@granite-js/plugin-router": "1.0.4",
    "@testing-library/react-native": "^12.9.0",
    "@types/babel__core": "^7.20.5",
    "@types/jest": "^29.5.14",
    "@types/node": "^22.10.2",
    "@types/react": "19.2.3",
    "babel-preset-granite": "1.0.4",
    "eslint": "^9.17.0",
    "eslint-plugin-react": "^7.37.2",
    "jest": "^29.7.0",
    "prettier": "3.4.2",
    "react-test-renderer": "19.2.3",
    "typescript": "^5.8.3",
    "typescript-eslint": "^8.31.0"
  }
}

q2.png
q2.png5248×2728 470 KB

이걸 하고 싶은데… 아래와 같이 나옵니다..

이미지 첨부

q2.png
q2.png1397×410 18.6 KB

2

자문자답입니다.
TDS 설치전 SDK 2.x 업그레이드 진행 했더니 “@toss/tds-react-native”: “2.0.2”, 버전이 제대로 적용이 안되었던 것 같아요.
지금은 잘 됩니다.