UI Kitten TabBar (Binding React Navigation 5 to Eva Design System)

todo.component.tsx

import React from 'react';
import { TabBar, Tab, Divider } from 'react-native-ui-kitten';
import { SafeAreaLayout, SaveAreaInset, SafeAreaLayoutElement } from '@app-components/safe-area-layout.component';
import { Toolbar } from '@app-components/toolbar.component';
import { DoneAllIcon, GridIcon } from '@app-assets/icons';

export const TodoScreen = (props): SafeAreaLayoutElement => {

  const onTabSelect = (index: number): void => {
    const { [index]: selectedTabRoute } = props.state.routeNames;
    props.navigation.navigate(selectedTabRoute);
  };

  return (
    <SafeAreaLayout insets={SaveAreaInset.TOP}>
      <Toolbar title='React Navigation Ex 🐱'/>
      <TabBar selectedIndex={props.state.index} onSelect={onTabSelect}>
        <Tab icon={GridIcon} title='IN PROGRESS'/>
        <Tab icon={DoneAllIcon} title='DONE'/>
      </TabBar>
      <Divider/>
    </SafeAreaLayout>
  );
};