1. issue

디자인에 따라 react native navigation에서 기본 header style을 customizing할 필요가 생겼다.

2. solution

Stack.Screen의 options를 다음과 같이 바꿔준다.

const AuthNavigation: FC = () => {
  return (
    <AuthStack.Navigator
      headerMode="screen"
      initialRouteName="Login"
      screenOptions={{
        headerStyle: {
          elevation: 0,
          shadowOpacity: 0,
        },
        cardStyle: styles.cardStyle,
      }}>
      {Object.entries({
        ...authScreens,
        ...signupScreens,
      }).map(([name, component]) => {
        return (
          <AuthStack.Screen
            key={name}
            name={name}
            component={component}
            options={{
              headerTitle: '회원가입',
              headerTitleStyle: {
                lineHeight: 22,
                letterSpacing: -0.6,
                fontFamily: 'NotoSansKR-Regular',
                fontSize: ms(16),
                color: color.PrimaryP900,
              },
              headerTitleContainerStyle: {
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center',
                paddingVertical: ms(17),
              },
              headerLeftContainerStyle: {
                marginHorizontal: ms(8),
                marginVertical: ms(8),
              },
              headerBackImage: () => <NavBack style={styles.iconSize} />,
              headerBackTitle: ' ',
              headerRight: () => <HeaderCloseButton />,
              headerRightContainerStyle: styles.headerRightContainerStyle,
            }}
          />
        );
      })}
    </AuthStack.Navigator>
  );
};
export default AuthNavigation;
const styles = ScaledSheet.create({
  cardStyle: { backgroundColor: '#fff' },
  iconSize: { width: ms(16), height: ms(16) },
  headerRightContainerStyle: {
    paddingVertical: ms(20),
    paddingHorizontal: ms(20),
  },
});

navigation.dispatch(StackActions.popToTop()으로 navigation에 쌓여 있던 stack을 모두 없애고 초기 화면(로그인)으로 이동한다.

import React from 'react';
import { TouchableOpacity } from 'react-native';
import ClosePrimary from '~/Assets/Icons/close_primary.svg';
import { useNavigation, StackActions } from '@react-navigation/native';

const HeaderCloseButton = () => {
  const navigation = useNavigation();
  return (
    <TouchableOpacity
      style={{ width: 24, height: 24 }}
      onPress={() => navigation.dispatch(StackActions.popToTop())}>
      <ClosePrimary width={16} height={16} />
    </TouchableOpacity>
  );
};
export default HeaderCloseButton;