this.props.navigation.navigate() is not working for AppDrawerNavigator - react-native

Question

I'm facing issue in navigation in android app. When button is clicked app screen freezes, it does not redirect to next screen which is createDrawerNavigator() screen. Calling it from the Country selection screen.
import React, { Component } from "react";
import { View, Image, StyleSheet } from "react-native";
import AsyncStorage from "#react-native-community/async-storage";
import {
createSwitchNavigator,
createStackNavigator,
createDrawerNavigator,
createAppContainer
} from "react-navigation";
import CustomizedStatusBar from "./src/components/CustomizedStatusBar";
import Splash from "./src/screens/Splash";
import Login from "./src/screens/Login";
import CountrySelection from "./src/screens/CountrySelection";
import Dashboard from "./src/screens/Dashboard";
import ImportantNotice from "./src/screens/ImportantNotice";
import ApplicationForm from "./src/screens/ApplicationForm";
import ApplicationForm2 from "./src/screens/ApplicationForm2";
import ApplicationForm3 from "./src/screens/ApplicationForm3";
import ApplicationForm4 from "./src/screens/ApplicationForm4";
import Instructions from "./src/screens/Instructions";
import TravelHistory from "./src/screens/TravelHistory";
import TravelHistoryDetails from "./src/screens/TravelHistoryDetails";
import DownloadStamp from "./src/screens/DownloadStamp";
import LearnAbout from "./src/screens/LearnAbout";
import Advices from "./src/screens/Advices";
import TellAFriend from "./src/screens/TellAFriend";
import Contact from "./src/screens/Contact";
import SideMenu from "./src/screens/SideMenu";
import SignatureCapture from "./src/screens/SignatureCapture";
import CMS from "./src/screens/CMS";
import GLOBAL from "./src/config/constants";
import { Provider } from "react-redux";
import store from "./src/redux/store/index";
import NavigationDrawerStructure from "./src/components/NavigationDrawerStructure";
import NavigationService from "./src/config/NavigationService";
const CMSStackNavigator = createStackNavigator({
CMS: {
screen: CMS
}
});
const HomeStackNavigator = createStackNavigator({
Home: {
screen: Dashboard
}
});
const ApplicationFormStackNavigator = createStackNavigator({
ApplicationForm: {
screen: ApplicationForm,
navigationOptions: ({ navigation }) => ({
title: "",
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: GLOBAL.COLOR.PRIMARY_COLOR
},
headerTintColor: GLOBAL.COLOR.HEADER_TINT_COLOR
})
}
});
const ApplicationForm2StackNavigator = createStackNavigator({
ApplicationForm2: {
screen: ApplicationForm2,
navigationOptions: ({ navigation }) => ({
title: "",
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: GLOBAL.COLOR.PRIMARY_COLOR
},
headerTintColor: GLOBAL.COLOR.HEADER_TINT_COLOR
})
}
});
const ApplicationForm3StackNavigator = createStackNavigator({
ApplicationForm3: {
screen: ApplicationForm3,
navigationOptions: ({ navigation }) => ({
title: "",
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: GLOBAL.COLOR.PRIMARY_COLOR
},
headerTintColor: GLOBAL.COLOR.HEADER_TINT_COLOR
})
}
});
const SignatureCaptureStackNavigator = createStackNavigator({
SignatureCapture: {
screen: SignatureCapture,
navigationOptions: ({ navigation }) => ({
title: "",
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: GLOBAL.COLOR.PRIMARY_COLOR
},
headerTintColor: GLOBAL.COLOR.HEADER_TINT_COLOR
})
}
});
const ApplicationForm4StackNavigator = createStackNavigator({
ApplicationForm4: {
screen: ApplicationForm4,
navigationOptions: ({ navigation }) => ({
title: "",
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: GLOBAL.COLOR.PRIMARY_COLOR
},
headerTintColor: GLOBAL.COLOR.HEADER_TINT_COLOR
})
}
});
const TravelHistoryStackNavigator = createStackNavigator({
TravelHistory: {
screen: TravelHistory
}
});
const TravelHistoryDetailsStackNavigator = createStackNavigator({
TravelHistoryDetails: {
screen: TravelHistoryDetails
}
});
const DownloadStampStackNavigator = createStackNavigator({
DownloadStamp: {
screen: DownloadStamp,
navigationOptions: ({ navigation }) => ({
title: "IMMIGRATION STAMP",
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: GLOBAL.COLOR.PRIMARY_COLOR
},
headerTintColor: GLOBAL.COLOR.HEADER_TINT_COLOR
})
}
});
const TellAFriendStackNavigator = createStackNavigator({
TellAfriend: {
screen: TellAFriend,
navigationOptions: ({ navigation }) => ({
title: "TELL A FRIEND",
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: GLOBAL.COLOR.PRIMARY_COLOR
},
headerTintColor: GLOBAL.COLOR.HEADER_TINT_COLOR
})
}
});
const AppDrawerNavigator = createDrawerNavigator(
{
home: {
screen: HomeStackNavigator
},
application_form: {
screen: ApplicationFormStackNavigator,
navigationOptions: {
drawerLabel: "",
drawerIcon: ({ tintColot }) => (
<Image source={GLOBAL.MENU_ICON} style={{ width: 20, height: 20 }} />
)
}
},
application_form2: {
screen: ApplicationForm2StackNavigator,
navigationOptions: {
drawerLabel: "",
drawerIcon: ({ tintColot }) => (
<Image source={GLOBAL.MENU_ICON} style={{ width: 20, height: 20 }} />
)
}
},
application_form3: {
screen: ApplicationForm3StackNavigator,
navigationOptions: {
drawerLabel: "",
drawerIcon: ({ tintColot }) => (
<Image source={GLOBAL.MENU_ICON} style={{ width: 20, height: 20 }} />
)
}
},
signature_capture: {
screen: SignatureCaptureStackNavigator,
navigationOptions: {
drawerLabel: "",
drawerIcon: ({ tintColot }) => (
<Image source={GLOBAL.MENU_ICON} style={{ width: 20, height: 20 }} />
)
}
},
application_form4: {
screen: ApplicationForm4StackNavigator,
navigationOptions: {
drawerLabel: "",
drawerIcon: ({ tintColot }) => (
<Image source={GLOBAL.MENU_ICON} style={{ width: 20, height: 20 }} />
)
}
},
travel_history: {
screen: TravelHistoryStackNavigator
},
travel_history_details: { screen: TravelHistoryDetailsStackNavigator },
download_stamp: {
screen: DownloadStampStackNavigator,
navigationOptions: {
drawerLabel: "IMMIGRATION STAMP",
drawerIcon: ({ tintColot }) => (
<Image source={GLOBAL.MENU_ICON} style={{ width: 20, height: 20 }} />
)
}
},
tellafriend: {
screen: TellAFriendStackNavigator,
navigationOptions: {
drawerLabel: "TELL A FRIEND",
drawerIcon: ({ tintColot }) => (
<Image source={GLOBAL.MENU_ICON} style={{ width: 20, height: 20 }} />
)
}
},
cms: {
screen: CMSStackNavigator
}
},
{
contentComponent: SideMenu
}
);
export default class App extends Component {
constructor(props) {
super(props);
}
componentWillMount() {}
componentDidMount() {}
getPreferenceInfo = async () => {
const isLoggedIn = await AsyncStorage.getItem(
GLOBAL.PREFERENCE_STORAGE_KEY.IS_LOGGED_IN
);
const isLanguageSelected = await AsyncStorage.getItem(
GLOBAL.PREFERENCE_STORAGE_KEY.IS_LANGUAGE_SELECTED
);
return { isLoggedIn: isLoggedIn, isLanguageSelected: isLanguageSelected };
};
render() {
const AppSwitchNavigator = createSwitchNavigator(
{
SplashScreen: { screen: Splash },
LoginScreen: { screen: Login },
CountryScreen: { screen: CountrySelection },
DashboardScreen: { screen: AppDrawerNavigator }
},
{
initialRouteName: "AppScreen"
}
);
const AppContainer = createAppContainer(AppSwitchNavigator);
return (
<Provider store={store}>
<View style={{ flex: 1 }}>
<CustomizedStatusBar />
<AppContainer />
</View>
</Provider>
);
}
}
const styles = StyleSheet.create({
bg: {
width: "100%",
height: "100%"
}
});
// Calling it from CountrySelection.js (CountryScreen)
import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
Image,
Keyboard,
TouchableWithoutFeedback,
TouchableOpacity,
SafeAreaView,
KeyboardAvoidingView,
ActivityIndicator,
Alert
} from "react-native";
import AsyncStorage from "#react-native-community/async-storage";
import { StackActions, NavigationActions } from "react-navigation";
import CustomInputBox from "../components/CustomInputBox";
import GLOBAL from "../config/constants";
import { connect } from "react-redux";
import {
selectCountryWithIndex,
openCountrySelectionView,
getCountries,
openLanguageSelectionView
} from "../redux/actions/index";
import CountrySelectionPicker from "../components/CountrySelectionPicker";
import LanguageSelectionPicker from "../components/LanguageSelectionPicker";
class CountrySelection extends Component {
constructor(props) {
super(props);
this.didPressSubmit = this.didPressSubmit.bind(this);
this.navigateAfterFinish = this.navigateAfterFinish.bind(this);
this.state = {
isLoading: true,
animating: false,
selectedCountry: null,
stores: []
};
}
static navigationOptions = {
header: null
};
navigateAfterFinish = screen => {
const resetAction = StackActions.reset({
actions: [NavigationActions.navigate({ routeName: "DashboardScreen" })]
});
this.props.navigation.dispatch(resetAction);
};
getSelectedCountryInfo = async () => {
try {
let value = await AsyncStorage.getItem(
GLOBAL.PREFERENCE_STORAGE_KEY.SELECTED_COUNTRY
);
let selectedIndex = await AsyncStorage.getItem(
GLOBAL.PREFERENCE_STORAGE_KEY.SELECTED_COUNTRY_INDEX
);
return { selectedCountry: value, selectedIndex: selectedIndex };
} catch (e) {
console.log(e);
}
};
onSelectLanguage = async (langCode, langId) => {
// Alert.alert(
// "Error",
// langCode + "==" + langId,
// [
// {
// text: "OK"
// }
// ],
// { cancelable: false }
// );
try {
await AsyncStorage.setItem(
GLOBAL.PREFERENCE_STORAGE_KEY.SELECTED_COUNTRY,
JSON.stringify(this.props.countrySelectionReducers.selectedCountry)
);
await AsyncStorage.setItem(
GLOBAL.PREFERENCE_STORAGE_KEY.SELECTED_COUNTRY_LANGUAGE_CODE,
langCode
);
await AsyncStorage.setItem(
GLOBAL.PREFERENCE_STORAGE_KEY.SELECTED_COUNTRY_LANGUAGE_CODE_ID,
langId
);
await AsyncStorage.setItem(
GLOBAL.PREFERENCE_STORAGE_KEY.IS_LANGUAGE_SELECTED,
"true"
);
return true;
} catch (e) {
// Alert.alert(
// "Error",
// e,
// [
// {
// text: "OK"
// }
// ],
// { cancelable: false }
// );
console.log(e);
return false;
}
};
getAllDatas = () => {
AsyncStorage.getAllKeys((err, keys) => {
AsyncStorage.multiGet(keys, (err, stores) => {
this.setState({ stores });
});
});
};
didPressSubmit = () => {
this.props.navigation.navigate("DashboardScreen");
};
componentWillMount() {}
componentDidMount() {
this.props.getCountries();
this.getAllDatas();
// this.getSelectedCountryInfo().then(data => {
// this.props.selectCountryWithIndex(
// JSON.parse(data.selectedCountry),
// parseInt(data.selectedIndex)
// );
// });
}
render() {
const { navigate } = this.props.navigation;
return (
<KeyboardAvoidingView behavior={"padding"} style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<SafeAreaView style={{ flex: 1 }}>
<TouchableWithoutFeedback
onPress={Keyboard.dismiss}
accessible={false}
>
<View style={styles.container}>
<Image style={styles.bg} source={GLOBAL.LOGIN_BGIMG} />
<View style={styles.formContainer}>
<Text style={styles.textContainer}>
{GLOBAL.SELECT_COUNTRY}
</Text>
<View style={{ flex: 1 }}>
<CustomInputBox
icon={
this.props.countrySelectionReducers.selectedCountry !==
null
? {
uri: this.props.countrySelectionReducers
.selectedCountry.country_logo
}
: null
}
leftInputIconStyle={
this.props.countrySelectionReducers.selectedCountry !==
null
? {
width: 32,
height: 20,
borderWidth: 0.5,
borderColor: "#c6c6c6"
}
: null
}
keyboardType="default"
returnKeyType="next"
showPlaceholder={false}
_placeholder={GLOBAL.COUNTRY_PLACEHOLDER}
showRightIcon={true}
rightIcon={GLOBAL.COUNTRY_RIGHT_ICON}
defaultValue={
this.props.countrySelectionReducers.selectedCountry !==
null
? this.props.countrySelectionReducers.selectedCountry
.country_name
: null
}
/>
<TouchableOpacity
style={{
backgroundColor: "transparent",
top: 0,
bottom: 0,
left: 0,
right: 0,
position: "absolute"
}}
onPress={() => this.props.openCountrySelectionView()}
/>
</View>
<View style={{ flex: 1 }}>
<CustomInputBox
icon={
this.props.countrySelectionReducers.selectedLanguage !==
null
? {
uri:
GLOBAL.URL.uploads +
this.props.countrySelectionReducers
.selectedLanguage.language_code +
".png"
}
: null
}
leftInputIconStyle={
this.props.countrySelectionReducers.selectedLanguage !==
null
? {
width: 32,
height: 20,
borderWidth: 0,
borderColor: "#c6c6c6"
}
: null
}
keyboardType="default"
returnKeyType="done"
showPlaceholder={false}
_placeholder={GLOBAL.LANGUAGE_PLACEHOLDER}
showRightIcon={true}
rightIcon={GLOBAL.COUNTRY_RIGHT_ICON}
customStyle={{ marginTop: 20 }}
defaultValue={
this.props.countrySelectionReducers.selectedLanguage !==
null
? this.props.countrySelectionReducers.selectedLanguage
.language_name
: null
}
/>
<TouchableOpacity
style={{
backgroundColor: "transparent",
top: 0,
bottom: 0,
left: 0,
right: 0,
position: "absolute"
}}
onPress={() => this.props.openLanguageSelectionView()}
/>
</View>
<TouchableOpacity
style={[styles.btn, { marginTop: 30 }]}
onPress={() => this.didPressSubmit()}
>
<Image
style={styles.btnImg}
resizeMode="contain"
source={GLOBAL.BTN_BGIMG}
/>
<View style={styles.btnContainer}>
<Text style={styles.btnText}>{GLOBAL.LOGINBTN}</Text>
</View>
</TouchableOpacity>
</View>
{this.props.countrySelectionReducers.isAnimating ? (
<View
style={{
width: "100%",
height: "100%",
position: "absolute",
justifyContent: "center",
alignItems: "center"
}}
>
<View
style={{
flex: 1,
backgroundColor: "#000000",
width: "100%",
height: "100%"
}}
opacity={0.6}
/>
<ActivityIndicator
style={{ alignSelf: "center", position: "absolute" }}
size="large"
color="#ffffff"
/>
</View>
) : null}
</View>
</TouchableWithoutFeedback>
<CountrySelectionPicker />
<LanguageSelectionPicker />
</SafeAreaView>
</View>
</KeyboardAvoidingView>
);
}
}
const mapStateToProps = state => {
return {
countrySelectionReducers: state.CountrySelectionReducers
};
};
export default connect(
mapStateToProps,
{
selectCountryWithIndex,
openCountrySelectionView,
getCountries,
openLanguageSelectionView
}
)(CountrySelection);
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center"
},
bg: {
width: "100%",
height: "100%"
},
formContainer: {
position: "absolute",
width: "100%",
paddingHorizontal: 30,
flexGrow: 1
},
textContainer: {
fontSize: 20,
fontWeight: "bold",
color: "#ffffff",
alignSelf: "center",
textAlign: "center",
marginBottom: 30
},
btn: {
alignItems: "center",
justifyContent: "center"
},
btnText: {
fontSize: 20,
fontWeight: "bold",
color: "#ffffff",
alignSelf: "center"
},
btnContainer: {
alignItems: "center",
justifyContent: "center",
position: "absolute"
},
btnImg: {
resizeMode: "contain",
left: 0,
right: 0,
top: 0,
bottom: 0,
height: 46
}
});
Wanted to redirect user to DashboardScreen from CountryScreen using this.props.navigation.navigate("DashboardScreen"). But it fails. No error is thrown.

Answer 1

This has been resolved. The issue was with hybrid-crypto-js library. It was throwing an exception due to which navigation stops.