I'm using Navigation 2 and setUrlStrategy(PathUrlStrategy());
I added WillPopScope but the onWillPop is not called when clicking the browser's back button.
Widget build(context) {
return WillPopScope(
onWillPop: () async {
print('here');
if (currentStep == 0) {
return false;
}
return true;
},
child: Scaffold(...
In Navigator 2.0, web browsers are chronological and basically treat all navigation as pushes.
Scenario:
Navigate from screen 1 to screen 2
Click the browser's back button.
In this scenario, Flutter will push the previous route (screen 1) onto the stack.
In other words, the browser back button no longer triggers onPopRoute. Instead it triggers onPushRoute.
I believe it was designed this way so that every navigation action can be treated as a deeplink. With that in mind, if you're developing a Flutter app for the web you should avoid passing arguments from one route to another as much as possible.
https://github.com/flutter/flutter/issues/71122#issuecomment-733864359
Related
I'm using React-Native-Navigation from Wix (version 2) to setup navigation in my React Native app. I'm using the sideMenu layout with the center section being a stack. When the user selects one of the side menu items the selected view is pushed onto that center stack. If the user presses their back button on Android, then the view is popped from the stack, but I don't always want this to happen, mainly if the view they selected is a WebView.
If the view is a WebView, I want to manually handle the user pressing the hardware back button. If the WebView can "goBack" then the view will go back, but if it can't then the view will be popped from the stack (as it normally would).
I've tried overriding the back button press using the BackHandler class from react-native and this allows me to capture that press and have the WebView go back if able, but the act of popping the view from the stack also fires. Is there a way in React-Native-Navigation v2 to tell it, "Hey I got this, don't pop unless I tell you to."?
My current code for this section is as follows:
componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.backHandler);
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.backHandler);
}
backHandler = () => {
if (this.state.canGoBack) {
this.webviewRef.current.goBack();
// I thought this might force the back press to be
// ignored by react-native-navigation, but no dice.
return false;
} else {
// WebView can't go back so pop view like normal
Navigation.pop(this.props.componentId);
}
}
I was expecting this to only pop the view from the stack if the WebView can't currently go back and otherwise just have the WebView go back.
What actually occurs is both events fire. I.e. the WebView goes back, but the view is also popped from the stack.
I was able to find the answer to this through some more digging in the React Native Navigation and React Native docs.
The event subscriptions are called in reverse order (i.e. last registered subscription first), and if one subscription returns true then subscriptions registered earlier will not be called.
So the issue was in my backHandler method. Instead of returning false I needed to return true.
backHandler = () => {
if (this.state.canGoBack) {
this.webviewRef.current.goBack();
// We've handled the event so we return true and the
// handler on the view's parent can effectively be ignored. Yay!
return true;
} else {
// WebView can't go back so pop view like normal
Navigation.pop(this.props.componentId);
}
}
I am having issues with my app returning to the foreground every time the user presses the back button. I believe this may be because there is a sound playing module that restarts the activity although this is just my hypothesis. However whenever I press the home (middle) button the app is sent to the background and everything works accordingly. I would like to emulate this functionality by capturing the back press event and handle it in a similar manner to the home button. While navigating the source, i've found the following handler in
android/reactnativenavigation/layouts/SingleScreenLayout.java
#Override
public boolean onBackPressed() {
if (handleBackInJs()) {
return true;
}
if (stack.canPop()) {
stack.pop(true, System.currentTimeMillis());
EventBus.instance.post(new ScreenChangedEvent(stack.peek().getScreenParams()));
return true;
} else {
return false;
}
}
I can understand at a glance what is being done however I am not very familiar with Java and don't want to introduce any bugs involving the native side of the app, could anyone kindly point out what I would need to modify?
So, you need to capture "the hardware back button" press not the home button right?
check here for the react-native way of doing it
I've a login modal opened using showModal().
It has no navbar buttons, so ios users cannot close this modal.
Problem: Actually Android users can use hardware back button to close the login modal.
In my login modal I tried to add
BackHandler.addEventListener('hardwareBackPress', function() {
return true;
}
to disallow backbutton on Android, but it simply doesn't works.
I did this because I read what follows on official RN guide:
Android: Detect hardware back button presses, and programmatically invoke the default back button functionality to exit the app if there are no listeners or if none of the listeners return true.
Adding a console.log into this function I see the event fired on 'normal' screens but NOT when I've a modal showed !
What am i doing wrong?
Overriding hardware back button is possible using overrideBackPress property as described here
You can handle the back press in your component:
onNavigatorEvent(event) {
if (event.id === 'backPress') {
//Do your thing
}
}
I'm new to chrome extension development but I'm running into issues debugging and with the extension itself. I currently have a form with a submit button and after the user hits submit I change the html to show the data that was just submitted.
document.addEventListener('DOMContentLoaded', function() {
console.log("1");
document.getElementById("submitButton").addEventListener('click', myFunction);
console.log("2");
//getCurrentTabUrl(function(url) {
// renderStatus(url);
//});
});
function myFunction() {
document.getElementById("formOutput").innerHTML = document.getElementById("formInput").value;
alert("hi");
console.log("test");
);
}
In this, 1 and 2 are displayed to the extension debugging console and the alert runs as well when the button is clicked. The test shows up very briefly and then it disappears.The formoutput value changes very briefly as well and then changes back to the default value I have. Does anyone know why my code/the chrome extension would be doing this?
Thanks!
When button with type submit (This is the default if the attribute is not specified) is clicked, the form data will be sent to server and page will be redirected to new page. Then your content script will be injected again, that's why the it changes back to default value.
To avoid this, you could change button with other types, or calling e.preventDefault to prevent default behavior. Then you would want to use Ajax to send data to server, which ensure the whole page won't be redirected and only parts of UI can be updated.
I find myself more and more using the touchpad gesture of 3 fingers to the left or right in order to perform a "back" or "forward" in Google Chrome (on my Asus Zenbook, but I believe there's a similar gesture on Macs)
I found that when browsing, I open a tab to read something (Like a like from Twitter or Facebook) and when I'm done my instinct is to go "back" to get back to the previous tab I was browsing on. (I think I got that instinct from using Android a lot).
I figured that I need a Chrome extension that would close my current tab if I'm attempting to go "back" in a tab that doesn't have a previous page in its history.
I went over the Chrome events and various methods I can invoke and while there's a "forward_back" transition qualifier in the WebNavigation api, the onCommitted event doesn't fire when attempting to go "back" using the touchpad gesture or Alt+left keyboard shortcut.
Also, I couldn't find how I can access a current tab's history to see if the page I'm at doesn't have a previous one in the stack.
Ideas anyone?
function noHistory(tabId) {
// TODO
}
function getCurrentTabId() {
// TODO
}
function userHitBack() {
tabId = getCurrentTabId();
if (noHistory(tabId)) {
chrome.tabs.remove(tabId)
}
}
function attachEvent() {
// TODO attach userHitBack
}
attachEvent();
To catch the "back" event, you need to handle specific key pressed to call your "userHitBack" function. Something like this:
document.onkeydown = function() {
if (keyId == ...)
userHitBack()
}
You can use this to your advantage as you can bind any key to trigger the close of the tab.
To check the tab history length use this:
window.history.length
It is html5 historyAPI