React Native - Cannot capture hardware back button click event - react-native

Question

I used to react-native-navigation from the Wix for my app navigation. But it is not working properly. After authenticating the user by my application successfully navigate to the main screen, but the problem is when I pressed android back button it will navigate to the login screen again. I need to avoid that. How can I do it? Finally tried to completely exit from the application. But it also not working properly. I have tried a few solutions, but those solutions have not worked for me. Here I have attached few solutions that I have tried.
try 01 :
componentWillUnmount() {
if (Platform.OS === 'android') return
BackHandler.removeEventListener('hardwareBackPress')
}
componentWillMount() {
Alert.alert(
"Warning!",
"one")
if (Platform.OS === 'android' && this.props.login)
BackHandler.addEventListener('hardwareBackPress', () => {
Alert.alert(
"Warning!",
"two")
return true
})
}
try 01: this function working properly, but this isn't solving the problem.
try 02 :
constructor(props) {
super(props);
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
}
onNavigatorEvent(event) {
switch (event.id) {
case "willAppear":
this.backHandler = BackHandler.addEventListener(
"hardwareBackPress",
this.handleBackPress,
Alert.alert(
event.id,
"willAppear")
);
break;
case "willDisappear":
this.backPressed = 0;
Alert.alert(
"Warning!",
"willDisappear")
this.backHandler.remove();
break;
default:
break;
}
}
handleBackPress = () => {
console.log("handleBackPress");
if (this.backPressed && this.backPressed > 0) {
if (this.props.login) {
console.log("login");
RNExitApp.exitApp();
} else {
console.log("root");
this.props.navigator.popToRoot({ animated: false });
return false;
}
}
}
try 02: In this try "onNavigatorEvent (event)" working properly. But 1st time (1st time User login to the system, until the session saved) not working, but after that any time this function working.
This is the complete code.
LoginScreen.js
this.props.navigator.push({
screen: "auxxa.LandingScreen",
passProps: { login: true },
overrideBackPress: true,
navigatorStyle: {
navBarHidden: true
}
});
LandingScreen.js
constructor(props) {
super(props);
this.state = {
size: { width, height },
tileData: null,
isLoading: true,
user_id: null,
refetching: false,
access_token: null
};
// this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
}
onNavigatorEvent(event) {
switch (event.id) {
case "willAppear":
this.backHandler = BackHandler.addEventListener(
"hardwareBackPress",
this.handleBackPress,
Alert.alert(
event.id,
"willAppear")
);
break;
case "willDisappear":
this.backPressed = 0;
Alert.alert(
"Warning!",
"willDisappear")
this.backHandler.remove();
break;
default:
break;
}
}
handleBackPress = () => {
console.log("handleBackPress");
if (this.backPressed && this.backPressed > 0) {
if (this.props.login) {
console.log("login");
// RNExitApp.exitApp();
} else {
console.log("root");
this.props.navigator.popToRoot({ animated: false });
return false;
}
}
this.backPressed = 1;
this.props.navigator.showSnackbar({
text: "Press one more time to exit",
duration: "long"
});
return true;
};
componentWillUnmount() {
if (Platform.OS === 'android') return
BackHandler.removeEventListener('hardwareBackPress')
}
componentWillMount() {
Alert.alert(
"Warning!",
"one")
if (Platform.OS === 'android' && this.props.login)
BackHandler.addEventListener('hardwareBackPress', () => {
Alert.alert(
"Warning!",
"two")
return true
})
}
//Firebase initialization
componentDidMount() {
NetInfo.isConnected.addEventListener("change", this.handleConnectionChange);
// if network connected this will change the state --
NetInfo.isConnected.fetch().done(isConnected => {
if (isConnected) {
this.setState({ status: isConnected });
this._retrieveData();
}
else {
this.setState({ refetching: false })
// Alert.alert(
// "Warning!",
// "Please check your network connection.",
// [
// {
// text: "Cancel",
// onPress: () => console.log("Cancel Pressed"),
// style: "cancel"
// },
// { text: "OK", onPress: () => console.log("OK Pressed") }
// ],
// { cancelable: false }
// end here
// );
}
});
//Push Notification implementation
if (Platform.OS == "android") {
FCM.requestPermissions();
FCM.getFCMToken().then(token => {
console.log("TOKEN (getFCMToken)", token);
});
// This method get all notification from server side.
FCM.getInitialNotification().then(notif => {
console.log("INITIAL NOTIFICATION", notif);
});
// This method give received notifications to mobile to display.
this.notificationUnsubscribe = FCM.on(FCMEvent.Notification, notif => {
console.log("a", notif);
if (notif && notif.local_notification) {
return;
}
this.sendRemote(notif);
});
// this method call when FCM token is update(FCM token update any time so will get updated token from this method)
this.refreshUnsubscribe = FCM.on(FCMEvent.RefreshToken, token => {
console.log("TOKEN (refreshUnsubscribe)", token);
this.props.onChangeToken(token);
});
}
}
//Send Notifications method
sendRemote(notif) {
console.log("send");
FCM.presentLocalNotification({
title: notif.title,
body: notif.body,
priority: "high",
click_action: notif.click_action,
show_in_foreground: true
});
}
_retrieveData = async () => {
try {
const value = await AsyncStorage.multiGet(["id", "access_token"]);
if (value !== null) {
// We have data!!
console.log(value);
this.setState({ user_id: value[0][1] });
this.setState({ access_token: value[1][1] });
this.getLandingData();
}
} catch (error) {
// Error retrieving data
}
};
refetch = () => {
this.setState({ refetching: true })
this._retrieveData()
}
// if network state change then this method will check the isConnected true, if it is false
// this will popup the alert --
handleConnectionChange = isConnected => {
this.setState({ status: isConnected });
if (!isConnected) {
// alert dialog starting here --
Alert.alert(
"Warning!",
"Please check your network connection.",
[
{
text: "Cancel",
onPress: () => console.log("Cancel Pressed"),
style: "cancel"
},
{ text: "OK", onPress: () => console.log("OK Pressed") }
],
{ cancelable: false }
// end here
);
} else {
// this.getLandingData();
this.refetch();
}
};
// network conctivity check end here --
handleErrors(response) {
if (!response.ok) {
throw Error(response.statusText);
}
return response;
}
async getLandingData() {
// let user_id = 18;
let url =
Config.BASE_URL +
`api/BIMobile/GetInitiatlTiles?userId=${encodeURIComponent(
this.state.user_id
)}`;
console.log(url);
fetch(url, {
method: "GET",
headers: {
Authorization: "Bearer " + this.state.access_token
},
})
.then(response => {
return response.json();
})
.then(responseData => {
//set your data here
console.log("responseData : ", responseData.messageCode);
if (responseData.data == null) {
Alert.alert(
"Oops! Something went wrong.",
"This page did not load correctly. Please contact helpdesk.",
[
{
text: "Cancel",
isLoading: true,
onPress: () => console.log("Cancel Pressed"),
style: "cancel"
},
{ text: "OK", isLoading: true, onPress: () => console.log("OK Pressed") }
],
{ cancelable: false }
// end here
);
} else {
if (responseData.messageCode.code == 1) {
this.setState({ tileData: responseData.data, isLoading: false });
} else if (responseData.messageCode.code == 0) {
console.log(responseData.messageCode.message)
}
}
})
.catch(error => {
console.error(error);
});
}
// this function set title to the page
module1Handler = (value, title) => {
this.props.navigator.push({
screen: value,
navigatorStyle: {
navBarHidden: false
},
title: title
});
};
_onLayoutDidChange = e => {
const layout = e.nativeEvent.layout;
this.setState({ size: { width: layout.width, height: layout.height } });
};
render() {
let menuItems = [];
console.log("title Data : " + this.state.tileData);
if (this.state.isLoading) {
// setup progressbar to the view --
// when the data is fetching this will spinning --
return <ActivityIndicator style={styles.activity_indicator_view} />;
} else {
return (
<View style={{ flex: 1 }} onLayout={this._onLayoutDidChange}>
<Swiper showsButtons={false} loop={false} showsPagination={false}>
{this.state.tileData.map((array, key) => {
if (key == 0) {
return (
<MainScreen
action={(value, title) => {
this.module1Handler(value, title);
}}
array={array}
/>
);
} else {
return (
<SliderScreen
action={(value, title) => {
this.module1Handler(value, title);
}}
array={array}
/>
);
}
})}
</Swiper>
</View>
);
}
}
}
const styles = StyleSheet.create({
activity_indicator_view: {
flex: 1,
flexDirection: "row",
height: "40%",
justifyContent: "space-around",
padding: 10
}
});
Appreciate if someone could assist me to correct way. Thanks.