TIL: RN | React Navigation default background color, lazy loading

default color

React Navigation 의 기본 색상은 약간 회색인 듯 보인다

NavigationContainer 의 theme 속성에 색상 설정을 하여 색을 변경할 수 있다

import { NavigationContainer, DefaultTheme } from '@react-navigation/native';

const navTheme = {
    ...DefaultTheme,
    colors: {
      ...DefaultTheme.colors,
      background: 'white',
    },
  };

<NavigationContainer theme={navTheme}>
	<RootStack.Navigator>
 		 <RootStack.Screen name="name" component={component} />
	</RootStack.Navigator>
</NavigationContainer>

lazy loading

Tab.Navigator 의 screenOptions 속성에
{lazy: true}를 설정해주면 각 페이지(screen)에 대한 lazy load 를 걸 수 있다

 <Tab.Navigaton
      screenOptions={{ lazy: true }}
      tabBar={(props: MaterialTopTabBarProps) => <TabBar {...props} />}
  >