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);
}
}
Related
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
a bit of an iOS beginner here. I am tasked with creating a button that will navigate to the previous view controller. I have tried a lot of different ways, but the most recent is as follows:
partial void ButtonPressedPreviousOne(UIButton sender)
{
UIStoryboard HomeStoryboard = UIStoryboard.FromName("Home", null);
UserProfileViewController prevController = HomeStoryboard.InstantiateViewController("User_Profile_VC") as UserProfileViewController;
NavigationController.PopToViewController(prevController, true);
}
This throws a null reference exception. I only partially understand what is meant by this. Is there something wrong with the above code or am I missing something entirely different?
iOS Navigation controller has method NavigationController.PopViewController(true).
Try this one. But I strongly recommended check stack before do this like
public bool CanGoBack => NavigationController.ViewControllers.Length > 1;
Let see how navigation works:
Push:
To move from one page to another, an application will push a new page
onto the navigation stack, where it will become the active page, as
shown in the following diagram:
When we push a page, we usually use:
NavigationController.PushViewController();
Pop:
To return back to the previous page, the application will pop the
current page from the navigation stack, and the new topmost page
becomes the active page, as shown in the following diagram:
When we pop a page:
If you want to go back to previous page, use:
NavigationController.PopViewController(true);
If you want to go back to root page, use:
NavigationController.PopToRootViewController(true);
If you want to go back to specific page in Navigation Stack, use:
NavigationController.PopToViewController(viewController, true);
Refer : hierarchical Navigation
Back to your code:
If you use PopToViewController, the first paramater(prevController in your code) should be a existing ViewController in Navigation Stack instead of a new created. You got a null reference exception because the prevController you created is not in your Navigation Stack.
In your case, you can use:
var navController = this.NavigationController;
foreach (var controller in navController.ViewControllers)
{
if (controller is UserProfileViewController)
{
NavigationController.PopToViewController(controller,true);
break;
}
}
Note: if UserProfileViewController is the previous page you want to pop, use NavigationController.PopViewController(true); directly is simpler and faster.
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 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