RN navigator 1개의 STACK으로 관리 쉽게 하자.

PURPOSE AND GOAL:
Root Stack Navigation 하나만을 사용하여 히스토리 관리를 쉽게 하고자 함.
협업을 위해서 카테고리별로 STACK.GROUP으로 나눠서 충돌을 피하고자 함.

처음 구현할때는 안됬는데 정신차리고 하니까 잘됨.

RootStack in app.tsx

export const RootStack = createNativeStackNavigator<RootStackParamsList>();

export type RootStackParamsList = AuthStackParams & ChatStackParams & UserStack;
const App = () => {
    return (
        <NavigationContainer>
            <RootStack.Navigator screenOptions={{ headerShown: true }}>
                {renderChatStackGroup()}
                {renderAuthStackGroup()}
                {renderUserStackGroup()}
            </RootStack.Navigator>
        </NavigationContainer>
    );
};

RootStack.group as a branch

import React from 'react';
import { RootStack } from '../../App';
import ChatHome from '../screens/chat/ChatHome';
import ChatList from '../screens/chat/ChatList';
import ChatRoom from '../screens/chat/ChatRoom';

export type ChatStackParams = {
    ChatHome: undefined;
    ChatList: undefined;
    ChatRoom: undefined;
};

export const renderChatStackGroup = () => {
    return (
        <RootStack.Group>
            <RootStack.Screen name='ChatHome' component={ChatHome} />
            <RootStack.Screen name='ChatList' component={ChatList} />
            <RootStack.Screen name='ChatRoom' component={ChatRoom} />
        </RootStack.Group>
    );
};