I have an ionic 3 application and I modified the functionality of the hardware back button. It works on pages but it cannot determine whether overlay views like modals and alert dialog boxes are present or not.
Here is my code
this.platform.registerBackButtonAction(() => {
let nav = app._appRoot._getActivePortal() || app.getActiveNav();
let activeView = nav.getActive().instance;
if (activeView != null) {
if (nav.canGoBack()) {
if (activeView instanceof MultiRegistrationOne || activeView instanceof MultiRegistrationTwo || activeView instanceof MultiRegistrationThree) {
// do something
} else {
nav.pop();
}
} else if (activeView.isOverlay) {
activeView.dismiss();
} else {
let alert = this.alertCtrl.create({
title: 'Ionic App',
message: 'Do you want to close the app?',
buttons: [{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Application exit prevented!');
}
},
{
text: 'Close',
handler: () => {
this.platform.exitApp();
}
}]
});
alert.present();
}
}
});
I hope someone can help me with this. Thank you in advance 😊
declare a variable :viewController:ViewController
then in your page or app.components.ts , modify your back button handle to be like the
this.platform.registerBackButtonAction(() => {
try{
this.viewController.dismiss()
}
catch(e){
console.log("error");
}
});
I solved it using MD. Riyas' answer here: Solution
Related
I have integrated react-native-iap for in app purchase.
Android Payment flow works properly(payment success, payment failed and user cancel payment).
But facing issue when purchase card is shown and I click outside the card, card is dismissed but not getting event inside RNIap.purchaseErrorListener .
Hence my state variable did not updated.
here is sample:
Listener code :
useEffect(() => {
initPurchase()
purchaseErrorSubscription = RNIap.purchaseErrorListener(
(error) => {
console.log('purchaseErrorListener INAPP>>>>', error);
if(error.code == "E_USER_CANCELLED") {
//for cancelled or refund sku
setSelectedPackage(null)
RNToasty.Show({
title: error.message,
});
} else if(error.code == "E_ITEM_UNAVAILABLE") {
//item not found
setSelectedPackage(null)
} else {
setSelectedPackage(null)
}
},
);
}, [])
Listener not called when I perform above action.
Can anyone help me to get this event?
Thanks in advance!!
you need to put this in a function, and in useEffect call this function
const checkCurrentPurchaseError = async () => {
purchaseErrorListener(async currentPurchaseError => {
if (currentPurchaseError) {
Here is your code...
}
});
};
useEffect(() => {
checkCurrentPurchaseError(currentPurchaseError);
}, []);
LoginScreen.js
this.props.navigator.push({
screen: "auxxa.LandingScreen",
passProps: { login: true },
overrideBackPress: true,
navigatorStyle: {
navBarHidden: true
}
});
LandingScreen.js
constructor(props) {
super(props);
this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
// this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
this.state = {
size: { width, height },
tileData: null,
isLoading: true,
user_id: null,
refetching: false,
access_token: null
};
}
componentWillMount() {
BackHandler.addEventListener(
"hardwareBackPress",
this.handleBackButtonClick
);
}
handleBackButtonClick() {
console.log("check login " + this.props.login);
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;
}
componentDidMount() {
BackHandler.removeEventListener(
"hardwareBackPress",
this.handleBackButtonClick
);
}
I used react-native-navigation from Wix for my app nevigation purpose.Here I have attached login screen and landing screen.after successful login app navigate to landing screen.after that I click back button It will return to login screen.I need to avoid that.How can I do that thing? I tried to exit from the app.But it also not working properly.
Please help me if some one know this.Thanks in advanced.
Use this call in handleBackButtonClick function and why are you removing the listener in componentDidMount ?
this.props.navigator.resetTo({ screen: 'example.ScreenThree'})
.
Uncomment this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this)); on your constructor to listen to navigation events
and add the navigationEvent listener method
onNavigatorEvent(event: NavigatorEvent) {
if (event.type === 'NavBarButtonPress') {
if (event.id === 'skill_information') {
// Add here whatever you would like to do (this.handleBackButtonClick() for example)
}
}
I have basic Ionic application which I have disabled the back button on the app, is there a reason why the back button still works on an android device?
I am currently testing with ionic view.
here's my code:
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
$ionicPlatform.registerBackButtonAction(function(e) {
e.preventDefault();
}, 101);
})
According to ionic documentation
Your back button action will override each of the above actions
whose priority is less than the priority you provide.
And given that you want to completely disable the back button in all situations, and that the highest priority on actions in the referenced list is 500, you should provide a priority value more than 500, 600 for example. The code below should work when placed in $ionicPlatform.ready()
$ionicPlatform.registerBackButtonAction(function(e) {}, 600);
For anyone trying to sort this on Ionic 2:
http://www.codingandclimbing.co.uk/blog/ionic-2-android-back-button-13
and here's the actual post info:
In your app.ts, do the following to get the back button working as expected (mostly!):
initializeApp() {
this.platform.ready().then(() => {
this.registerBackButtonListener();
});
}
registerBackButtonListener() {
document.addEventListener('backbutton', () => {
var nav = this.getNav();
if (nav.canGoBack()) {
nav.pop();
}
else {
this.confirmExitApp(nav);
}
});
}
confirmExitApp(nav) {
let confirm = Alert.create({
title: 'Confirm Exit',
message: 'Really exit app?',
buttons: [
{
text: 'Cancel',
handler: () => {
console.log('Disagree clicked');
}
},
{
text: 'Exit',
handler: () => {
navigator.app.exitApp();
}
}
]
});
nav.present(confirm);
}
getNav() {
return this.app.getComponent('nav');
}
Note:
If you get errors about app not being a property of navigator:
1) Add a typings folder to your app root: e.g. app/typings
2) Add a file called: pluginshackyhacky.d.ts
3) Add for properties you need extended for TypeScript to compile.:
interface /*PhoneGapNavigator extends*/ Navigator {
app: any;
}
4) Add the pluginshackyhacky.d.ts to the compile in the tsconfig.json:
"files": [
"app/app.ts",
"app/typings/pluginshackyhacky.d.ts",
"app/typings/phonegap.d.ts"
]
You can see that I've also included the phonegap.d.ts file which includes a lot of missing properties/variables that allows TypeScript to compile without errors.
Hope this helps anyone having this problem.
Cheers.
Here is solution for Ionic 2:
constructor(
public platform: Platform, //Platform controller
public app: App, //App controller
) {
platform.ready().then(() => {
StatusBar.styleDefault();
Splashscreen.hide();
//Registration of push in Android and Windows Phone
platform.registerBackButtonAction(() => {
let nav = this.app.getActiveNav();
if (nav.canGoBack()){ //Can we go back?
nav.pop();
}else{
this.platform.exitApp(); //Exit from app
}
});
});
}
Change the priority from 101 to 100 to override the default hardware back functionality. If you had a priority of 100 already overriding the functionality, you could override that override with a priority of 101, if that makes sense.
$ionicPlatform.registerBackButtonAction(function(e) {
// android hardware back button was hit
}, 100);
Here is a list of all the priorities for the existing back button hooks
http://ionicframework.com/docs/api/service/$ionicPlatform/
I try to listen android hardware back button,but it is no effect.
main code:
.run(['$ionicPlatform','$ionicHistory',function($ionicPlatform,$ionicHistory) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
$ionicPlatform.registerBackButtonAction(function (e) {
e.preventDefault();
$ionicHistory.nextViewOptions({
disableAnimate: true
});
$ionicHistory.viewHistory().backView.go();
return false;
}, 100);
}])
My running environment is mobile browser.Android version 4.4.2
UPDATE: I'm no longer using this as it was unreliable. Additionally, in the latest Ionic release, app.ts is now app.component.ts.
For Ionic 2, check out my blog post on how to fix this. Should also work for Ionic 1, as it's only calling a cordova listener:
http://www.codingandclimbing.co.uk/blog/ionic-2-android-back-button-13
and here's the actual post info:
In your app.ts, do the following to get the back button working as expected (mostly!):
initializeApp() {
this.platform.ready().then(() => {
this.registerBackButtonListener();
});
}
registerBackButtonListener() {
document.addEventListener('backbutton', () => {
var nav = this.getNav();
if (nav.canGoBack()) {
nav.pop();
}
else {
this.confirmExitApp(nav);
}
});
}
confirmExitApp(nav) {
let confirm = Alert.create({
title: 'Confirm Exit',
message: 'Really exit app?',
buttons: [
{
text: 'Cancel',
handler: () => {
console.log('Disagree clicked');
}
},
{
text: 'Exit',
handler: () => {
navigator.app.exitApp();
}
}
]
});
nav.present(confirm);
}
getNav() {
return this.app.getComponent('nav');
}
Note:
If you get errors about app not being a property of navigator:
1) Add a typings folder to your app root: e.g. app/typings
2) Add a file called: pluginshackyhacky.d.ts
3) Add for properties you need extended for TypeScript to compile.:
interface /*PhoneGapNavigator extends*/ Navigator {
app: any;
}
4) Add the pluginshackyhacky.d.ts to the compile in the tsconfig.json:
"files": [
"app/app.ts",
"app/typings/pluginshackyhacky.d.ts",
"app/typings/phonegap.d.ts"
]
You can see that I've also included the phonegap.d.ts file which includes a lot of missing properties/variables that allows TypeScript to compile without errors.
Hope this helps anyone having this problem.
Cheers.
may be this could help you.
$state.$current.name == "";var backbutton=0;
$ionicPlatform.registerBackButtonAction(function (event) {
if (($state.$current.name == "app.intro") ||
($state.$current.name == "app.main.home") ||
($state.$current.name == "app.account")) {
if(backbutton==0){
backbutton++;
window.plugins.toast.showLongBottom('Press again to exit');
$timeout(function(){backbutton=0;},3000);
}else{
navigator.app.exitApp();
}
console.log("one");
}else if($state.$current.name == "app.welcome.takeControl") {
console.log("two");
$state.go("app.main.home");
}else{
console.log("three");
navigator.app.backHistory();
}
}, 100);
Is there a way to show a confirmation popup when you press the hardware back button in android devices to exit the phonegap/ionic application?
In the current status, my app keep going to the previous state upon clicking the back button.
Is there a way to exit the app when you press the back button no matter where you are on, in the application?
I found this piece of code but it did not seem to work:
$ionicPlatform.registerBackButtonAction(function() {
var confirmPopup = $ionicPopup.confirm({
title: 'Sign Out Confirm',
template: 'Are you sure you want to Logout?'
});
confirmPopup.then(function(res) {
if (res) {
$rootScope.rootScopeUserTransactionPassword = null;
$state.go('app.playlists');
} else {
console.log('You are not sure');
}
});
}, 100);
Try this:
document.addEventListener('backbutton', function(event){
event.preventDefault(); // EDIT
navigator.app.exitApp(); // exit the app
});
I hope it helps you.
It will ask you before exit in stipulated timestamp : Press back button again to exit. If it's dashboard page then it will ask whether to Log out?
I hope it will solve your problem.
.run(function($rootScope, $ionicPlatform, $ionicHistory){
$ionicPlatform.registerBackButtonAction(function(e) {
if ($ionicHistory.currentView().stateName == 'dashboard') {
Dialogs.showConfirm('Do you want to logout?', function(buttonIndex) {
if (buttonIndex == 1)
User.clear();
}, 'Logout', ['Yes', 'No']);
} else
if ($rootScope.backButtonPressedOnceToExit) {
ionic.Platform.exitApp();
} else if ($ionicHistory.backView()) {
$ionicHistory.goBack();
} else {
$rootScope.backButtonPressedOnceToExit = true;
window.plugins.toast.showShortCenter(
"Press back button again to exit",
function(a) {},
function(b) {}
);
setTimeout(function() {
$rootScope.backButtonPressedOnceToExit = false;
}, 2000);
}
e.preventDefault();
return false;
}, 101);
});
The following close the app if we hit back button on Android device in "Login" screen.
In your app.js you maybe have something like this:
app.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$stateProvider.state('login', {
url : '/',
}).state('login', {
url : '/login',
views : {
contentView : {
templateUrl : 'login.html',
controller : 'LoginCtrl'
}
}
});
So all you have to do is add this method in the same file:
app.run(function($ionicPlatform) {
$ionicPlatform.registerBackButtonAction(function() {
if ($state.current.name == "login") {
navigator.app.exitApp();
}
}, 100);
});
Note that "login" it the state name which mentioned in the app.config