인프런 커뮤니티 질문&답변

따로 프로젝트를 진행중에 BottomTab과 SafeAreaView (react-native-safe-area-context)를 동시에 사용하는 경우 BottomTab위에 여백이 생깁니다. 찾아본 결과 edges 속성을 적용하면 없어지긴 하는데 매번 SafeAreaView를 사용할 때 마다 edges 속성을 주는건 중복이 발생하는 느낌이 들어서요! 좋은 방법이 있을까요 ?

이미지와 코드는 아래와 같습니다!

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="BottomTab">
        <Stack.Screen
          name="BottomTab"
          component={BottomTabScreen}
          options={{ headerShown: false }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const BottomTabScreen = ({}: BottomTabScreenProps) => {
  return (
    <Tab.Navigator initialRouteName="Todos" screenOptions={{ headerShown: false }}>
      <Tab.Screen name="Todos" component={TodosScreen} />
      <Tab.Screen name="AddTodo" component={AddTodoScreen} />
      <Tab.Screen name="Calendar" component={CalendarScreen} />
    </Tab.Navigator>
  );
};

const TodosScreen = ({}: TodosScreenProps) => {
  const renderItem = useCallback(({ item }: { item: TodoType }) => <Todo item={item} />, []);

  return (
    <SafeAreaView>
      <StatusBar backgroundColor="#4367FE" barStyle="light-content" />

      <FlatList data={TODOS} keyExtractor={todo => todo.id} renderItem={renderItem} />
    </SafeAreaView>
  );
};