TabNavigator not switching tabs. navigation.navigate is not a function - react-native

Question

I just started a new project and added a TabNavigator. when i tap on either of the tabs, i get a red error stating:
"navigation.navigate is not a function(In 'navigation/navigate(navigateion.state.routes[index].routeName', 'navigation.navigate' is undefined)"
If I change the initial route, each tab will show correctly on screen, as well as highlight the correct tab on the bottom of the screen.
export default TabNavigator(
{
Home: { screen: HomeScreen },
Card: { screen: CardScreen },
Schedule: { screen: ScheduleScreen },
},
{
initialRouteName: 'Home',
}
);

Answer 1

Downgrading React-navigation from 2.0.0 down to 1.0.3 solves the issue.

Answer 2

This is what I am using to change the Tab.
This is the defination of my customeTab
const customeTab = ({ navigation }) => {
Below is the code to naviagate:
const routes = navigation.state.routes;
{routes.map((route, index) => {
return (
<TouchableOpacity
activeOpacity={1.0}
onPress={() => {
navigation.navigate(route.key);
}
}
style={styles.tab}
key={route.key}
>
// do you stuff to show title and image.
</TouchableOpacity>);
})
}

Answer 3

I thought the problem is in your navigation.
import { TabNavigator } from 'react-navigation';
import HomeScreen from "./Home"
import SettingsScreen from "./Settings"
export default TabNavigator({
Home: { screen: HomeScreen },
Settings: { screen: SettingsScreen },
});
If you want to shift one page to another page you have to use navigation method.
Jumping between tabs
Switching from one tab to another has a familiar API — this.props.navigation.navigate.
import { Button, Text, View } from 'react-native';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
<Button
title="Go to Settings"
onPress={() => this.props.navigation.navigate('Settings')}
/>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
<Button
title="Go to Home"
onPress={() => this.props.navigation.navigate('Home')}
/>
</View>
);
}
}
Click this link. This is a official doc that will help you.