마이그레이션 이후 top navigation에 앱 이름, 로고가 잘 나오고 있었는데 특정 화면에서만 accessory button 을 추가하고 싶어 useFocusEffect로 addAccessoryButton 사용 후 앱 이름, 로고가 나오지 않는 현상이 발생했습니다.
# granite.config.ts
import { appsInToss } from '@apps-in-toss/framework/plugins';
import { router } from '@granite-js/plugin-router';
import { env } from '@granite-js/plugin-env';
import { defineConfig } from '@granite-js/react-native/config';
import { LOGO } from './src/assets/images';
export default defineConfig({
scheme: 'intoss',
appName: 'appName',
plugins: [
appsInToss({
brand: {
displayName: 'appName',
primaryColor: '#3182F6',
icon: LOGO,
bridgeColorMode: 'basic',
},
permissions: [],
navigationBar: {
withBackButton: true,
withHomeButton: true,
initialAccessoryButton: {
id: 'notification',
title: '알림',
icon: { name: 'icon-alarm-mono' },
},
},
}),
env({
}),
router(),
],
});
# package.json
{
"name": "appName",
"private": true,
"scripts": {
"dev": "granite dev",
"build": "granite build",
"test": "jest --passWithNoTests",
"typecheck": "tsc --noEmit",
"lint": "eslint . --ext .ts,.tsx --fix",
"format": "prettier --write .",
"adb": "adb reverse tcp:8081 tcp:8081 && adb reverse tcp:8000 tcp:8000"
},
"dependencies": {
"@apps-in-toss/framework": "^1.1.2",
"@granite-js/native": "0.1.21",
"@granite-js/plugin-env": "0.1.21",
"@granite-js/react-native": "0.1.24",
"@shopify/flash-list": "^1.7.1",
"@tanstack/react-query": "^5.55.0",
"@toss-design-system/react-native": "^1.1.2",
"axios": "^1.11.0",
"jotai": "^2.8.3",
"react": "18.2.0",
"react-native": "0.72.6",
"react-native-shadow-2": "^7.1.2",
"zod": "^4.1.5"
},
"devDependencies": {
"@babel/core": "7.23.9",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
"@babel/plugin-proposal-numeric-separator": "^7.16.7",
"@babel/plugin-proposal-optional-chaining": "^7.16.7",
"@babel/plugin-proposal-private-methods": "^7.18.6",
"@babel/plugin-proposal-private-property-in-object": "^7.18.6",
"@babel/plugin-transform-class-properties": "^7.23.3",
"@babel/plugin-transform-flow-strip-types": "^7.19.0",
"@babel/preset-env": "^7.15.0",
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
"@babel/runtime": "7.18.9",
"@granite-js/plugin-router": "0.1.21",
"@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": "18.3.3",
"@typescript-eslint/eslint-plugin": "^8.39.0",
"@typescript-eslint/parser": "^8.39.0",
"babel-plugin-module-resolver": "^5.0.2",
"eslint": "^9.32.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.3",
"eslint-plugin-unused-imports": "^4.1.4",
"jest": "^29.7.0",
"prettier": "^3.6.2",
"react-test-renderer": "18.2.0",
"typescript": "^5.8.3"
}
}
# _app.tsx
import { Granite, InitialProps } from '@granite-js/react-native';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { TDSProvider } from '@toss-design-system/react-native';
import { PropsWithChildren } from 'react';
import { context } from '../require.context';
function AppContainer({ children }: PropsWithChildren<InitialProps>) {
const queryClient = new QueryClient({
defaultOptions: {
queries: {
gcTime: 1000 * 60 * 60 * 24,
staleTime: 1000 * 60 * 5,
},
},
});
return (
<QueryClientProvider client={queryClient}>
<TDSProvider>{children}</TDSProvider>
</QueryClientProvider>
);
}
export default Granite.registerApp(AppContainer, {
appName: 'appName',
context,
});
# 특정 화면에서 사용한 useFocusEffect 로직
const { addAccessoryButton, removeAccessoryButton } = useTopNavigation();
useFocusEffect(() => {
addAccessoryButton({
title: '알림',
id: 'notification',
icon: {
name: 'icon-alarm-mono',
},
onPress: showAlarmBottomSheet,
});
return () => {
removeAccessoryButton();
};
});