UI Kitten: can't find variable index (BottomNavigation)

Question

Actually i'm trying to use BottomNavigation from UI Kitty but when i'm trying to swap from one navigation tab to another the app crash with the following error:

can't find variable index

Here is the code from BottomNavigation where i use index

import React from 'react';
import { BottomNavigation, BottomNavigationTab } from 'react-native-ui-kitten';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import Dashboard from '../navigation/Dashboard';
import Settings from '../navigation/Settings';

export const BottomNavigationShowcase = (props) => {


 const onTabSelect = (selectedIndex) => {
   const { [index] : selectedRoute } = props.navigation.state.routes; // INDEX IS USED HERE
   props.navigation.navigate(selectedRoute.routeName);
 };

 return (
   <BottomNavigation
     selectedIndex={props.navigation.state.index}
     onSelect={onTabSelect}>
     <BottomNavigationTab title='Dashboard' />
     <BottomNavigationTab title='Settings' />
   </BottomNavigation>
  );
}

export const BottomTabNavigator = createBottomTabNavigator({
  Dashboard: Dashboard,
  Settings: Settings,
}, {
  initialRouteName: 'Dashboard',
  tabBarComponent: BottomNavigationShowcase,
});

export default createAppContainer(BottomTabNavigator)

And here is App.JS

import NavigationContainer from './components/BottomNavigation';

const App: () => React$Node = () => {

  return (
    <ApplicationProvider mapping={mapping} theme={lightTheme}>
    <IconRegistry icons={EvaIconsPack} />
    <Header/>
    <NavigationContainer/>
    </ApplicationProvider>
  );
};

Answer 1

There seems to be a problem in const { [index] : selectedRoute } = props.navigation.state.routes; // INDEX IS USED HERE which is not the right way to read an object. It seems like you want to read the routes from the props. Why not do something like

 const routes = props.navigation.state.routes;
 const selectedRoute = routes[selectedIndex];
 props.navigation.navigate(selectedRoute.routeName);

This should fix the app from crashing due to not finding index