Struggling with navigation after login - react native - react-native

Question

Am facing a problem in navigating from Login screen to Dashboard in react-native and getting issue like TypeError: undefined is not an object (evaluating '_this.props.navigation.navigate') for more clarification, am attaching screenshot and images. Any help will be appreciable.
App.js
import React, {Component} from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import {createSwitchNavigator, createAppContainer} from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import {createDrawerNavigator} from 'react-navigation-drawer';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import Icon from 'react-native-vector-icons/FontAwesome';
import WelcomeScreen from './screens/Welcome';
import LoginScreen from './screens/Login';
import DashboardScreen from './screens/Dashboard';
import SearchScreen from './screens/Search';
import ProfileScreen from './screens/Profile';
import BookingScreen from './screens/Booking';
import SupportScreen from './screens/Support';
const App: () => React$Node = () => {
return (
<AppContainer />
);
};
const DashboardTabNavigator = createBottomTabNavigator(
{
Search :{screen : SearchScreen,
navigationOptions:{
headerTitle: 'Search',
tabBarLabel:'Search',
tabBarIcon:({tintColor})=>(
<Icon name="search" color={tintColor} size={30}/>
)
}
},
Booking :{screen : BookingScreen,
navigationOptions:{
headerTitle: 'Booking',
tabBarLabel:'Booking',
tabBarIcon:({tintColor})=>(
<Icon name="list" color={tintColor} size={30}/>
)
}
},
Support :{screen : SupportScreen,
navigationOptions:{
headerTitle: 'Support',
tabBarLabel:'Support',
tabBarIcon:({tintColor})=>(
<Icon name="support" color={tintColor} size={30}/>
)
}
},
Profile :{screen : ProfileScreen,
navigationOptions:{
headerTitle: 'Profile',
tabBarLabel:'Profile',
tabBarIcon:({tintColor})=>(
<Icon name="user" color={tintColor} size={30}/>
)
}
},
},
{
tabBarOptions: {
showIcon: 'true', // Shows an icon for both iOS and Android
},
}
);
const DashboardStackNavigator = createStackNavigator({
Welcome :{screen : WelcomeScreen},
DashboardTabNavigator : DashboardTabNavigator
});
const AppSwitchNavigator = createSwitchNavigator({
Welcome :{screen : WelcomeScreen},
Dashboard :{screen : DashboardStackNavigator}
});
const AppContainer = createAppContainer(AppSwitchNavigator);
const styles = StyleSheet.create({
scrollView: {
backgroundColor: Colors.lighter,
},
engine: {
position: 'absolute',
right: 0,
},
body: {
backgroundColor: Colors.white,
},
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: Colors.black,
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
color: Colors.dark,
},
highlight: {
fontWeight: '700',
},
footer: {
color: Colors.dark,
fontSize: 12,
fontWeight: '600',
padding: 4,
paddingRight: 12,
textAlign: 'right',
},
});
export default App;
Script for Welcome.js
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
Animated,
Button,
Dimensions,
TouchableOpacity,
TouchableHighlight,
Image,
ImageBackground,
ScrollView,
StatusBar,
Alert
} from 'react-native';
let { height, width } = Dimensions.get('window');
let InputWidth = width - ((width * 10) /100);
import Icon from 'react-native-vector-icons/FontAwesome';
import LoginScreen from './Login';
class WelcomeScreen extends Component{
constructor(props) {
super(props);
this.state = { isAnimationVisible: true, animationProgress: new Animated.Value(0) };
//this.LoginScreen = this.LoginScreen.bind(this);
}
componentDidMount() {
Animated.timing(this.state.animationProgress, { toValue: 1, duration: 5000 })
.start(() => this.setState(s => ({ ...s, isAnimationVisible: false })));
}
render() {
if (this.state.isAnimationVisible) {
const interpolation = this.state.animationProgress.interpolate({ inputRange: [0, 1], outputRange: [0, 1] });
return (
<View style={styles.backgroundColor}>
<Text style={styles.textAlignmentSplashHeader}>Text App</Text>
<View style={styles.textAlignmentSplashCenter}>
<Text style={styles.textAlignmentSplash}> <Icon name="check-square-o" color="#00bfff" size={20}/> Verified Provider</Text>
<Text style={styles.textAlignmentSplash}> <Icon name="check-square-o" color="#00bfff" size={20}/> Trained Professional</Text>
<Text style={styles.textAlignmentSplash}> <Icon name="check-square-o" color="#00bfff" size={20}/> Compare Prices</Text>
<Text style={styles.textAlignmentSplash}> <Icon name="check-square-o" color="#00bfff" size={20}/> At door step</Text>
</View>
</View>
);
}
else {
return (<LoginScreen />);
}
}
}
export default WelcomeScreen;
const styles = StyleSheet.create({
backgroundColor: {
flex: 1,
resizeMode: 'cover', // or 'stretch',
justifyContent: 'center',
backgroundColor: '#ffffff'
},
textAlignmentSplashHeader :{
textAlign:'center',
fontSize:35,
//color : '#70AB8F',
color : '#DC5B21'
},
textAlignmentSplashCenter :{
width: InputWidth,
margin : '20%',
justifyContent: 'center',
},
textAlignmentSplash :{
textAlign:'left',
fontSize:20,
color : '#808080'
},
});
Login.js
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
Button,
TouchableOpacity,
TouchableHighlight,
Image,
ImageBackground,
ScrollView,
StatusBar,
Alert
} from 'react-native';
import { Dashboard } from './Dashboard';
class LoginScreen extends Component{
static navigationOptions = {
header : 'Login'
}
constructor(props){
super(props);
this.state={
mobile : null
}
this.__login = this.__login.bind(this);
}
render(){
return(
<View style={{flex : 1, alignItems : 'center', justifyContent : 'center'}}>
<Text>LoginScreen</Text>
<Button
title ="Login"
onPress={this.__login}
/>
</View>
);
}
__login = ()=>{
this.props.navigation.navigate('Dashboard')
}
}
export default LoginScreen;
Dashboard.js
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
Button,
TouchableOpacity,
TouchableHighlight,
Image,
ImageBackground,
ScrollView,
StatusBar,
Alert
} from 'react-native';
class DashboardScreen extends Component{
render(){
return(
<View style={{flex : 1, alignItems : 'center', justifyContent : 'center'}}>
<Text>DashboardScreen</Text>
</View>
);
}
}
export default DashboardScreen;
And Below is error after clicking Login Button in Login Screen
below am getting error after clicking login button, navigation code is in Login.js
Please help me.

Answer 1

udpate your createSwitchNavigator
const AppSwitchNavigator = (signedIn = false)=>createSwitchNavigator({
Welcome :{screen : WelcomeScreen},
DashboardTabNavigator : DashboardTabNavigator
},
{
initialRouteName: signedIn ? 'DashboardTabNavigator' : 'Welcome',
},
);
const AppContainer = createAppContainer(AppSwitchNavigator(isLogin));
save isLogin in redux or context api when user login just update isLogin value to true and you will navigate to Dashboard.

Answer 2

You have to use WithNavigation in LoginScreen component like this:
import React, {Component} from 'react';
import { withNavigation } from 'react-navigation';
...
export default withNavigation(LoginScreen);
You are using LoginScreen as a component instead of a page and LoginScreen is not defined in your route definition so it has no access to this.props.navigation by default.