Todo Navigator with Tabs at the top (Binding React Navigation 5 to Eva Design System)

todo.navigator.tsx

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { TodoScreen, TodoInProgressScreen, TodoDoneScreen } from '@app-scenes/todo';
import { AppRoute } from './app-routes';

const Stack = createStackNavigator();
const TopTab = createMaterialTopTabNavigator();

export const TodoNavigator = (): React.ReactElement => (
  <TopTab.Navigator tabBarComponent={TodoScreen}>
    <TopTab.Screen name={AppRoute.TODO_IN_PROGRESS} component={TodoInProgressScreen}/>
    <TopTab.Screen name={AppRoute.TODO_DONE} component={TodoDoneScreen}/>
  </TopTab.Navigator>
);