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

bottom-home.component.tsx

import React from 'react';
import { BottomNavigation, BottomNavigationTab, Divider } from 'react-native-ui-kitten';
import { SafeAreaLayout, SafeAreaLayoutElement, SaveAreaInset } from '@app-components/safe-area-layout.component';
import { LayoutIcon, PersonIcon } from '@app-assets/icons';

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

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

  return (
    <SafeAreaLayout insets={SaveAreaInset.BOTTOM}>
      <Divider/>
      <BottomNavigation
        appearance='noIndicator'
        selectedIndex={props.state.index}
        onSelect={onSelect}>
        <BottomNavigationTab icon={LayoutIcon} title='TODO'/>
        <BottomNavigationTab icon={PersonIcon} title='PROFILE'/>
      </BottomNavigation>
    </SafeAreaLayout>
  );
};