I have added back button to the app and when I click it I want to perform the same action as that of the device back button. how can I achieve that in react native.
Currently I am on Android.r
Could you share any relevant information regarding this please.
Thanks
R
Whenever a user press the back button on the device, what the app does is removing the screen at the top of the stack. In react-navigation you can use the "goBack" function to do the same.
Example:
onPressBack=()=>{
this.props.navigation.goBack();
}
source: https://reactnavigation.org/docs/en/navigation-prop.html#goback-close-the-active-screen-and-move-back
Related
I have a listener on the whole app for the back button press event in android to override the default behaviour of back button(exit the app).
Also in some component i have override it too if i want the back button to be disabled or do something else.
The problem is when i open a react-native-picker, the picker stays on the screen ignoring the back button press.
I want it to first close (on the first back button press) and only then do what the higher component ordered to do when back button is pressed.
so i can't override the the higher component back button handling
i thought maybe to add the picker as a screen in the navigator and instead of planting it as a component, navigate to it, so it will be added to the stack navigator.
then by default it will first pop it of the stack when pressing back.
how can i add the picker component as a screen to navigate to, or is there a better way to do that?
By default the back behavior collapses or closes the picker on Android (depending on the mode you have chosen). You can see a working example here.
I am trying to make a launcher using flutter. I have made multiple screens for doing specific tasks like HomeScreen. AppDrawerScreen and so on. The problem I am facing is whenever I go to say AppDrawerScreen and press on the Home Button, I am not redirected to the HomeScreen. How can I handle this scenario?
I've had the same problem. I guess the only solution is to listen to the Home button, and there go to the first screen. there is a plugin called hardware_buttons, and about the Back button you can use the WillPopScope() widget.
You can achieve this by adding WidgetsBindingObserver mixing to your StatefulWidget class.
And then you can invoke didChangeAppLifecycleState() method where you can listen to the AppLifeCycleState changes like :
inactive
paused
resume and soon
But in your case since you want to navigate to HomeScreen when Android Home Button is pressed so you need to check if AppLifeCycleState.inactive is true (which means you have pressed the Android Home Button and app is running in background) and there you can add your code to Navigate to HomeScreen.
Also you can refer to this documentation for more information.
I'm using React Navigation for my react native app. Currently, my drawer have 5 menus. Let's assume there are Home screen, ScreenA, ScreenB, Screen,C, and ScreenD.
I want a behaviour like this
If user press back button on Android on Home Screen, the screen will show pop up
If user press back button on Android on other screen except Home Screen, the screen will navigate to Home Screen.
I also use Redux Integration and did all the setup as described in React Navigation's documentation.
Need your help guys. Thanks
Several SO questions cover the topic of how to wire up a WebView to have the "back" button traverse browser history. An Android developer doc page answers that question well. We have an app that uses the recommended method:
#Override
public void onBackPressed() {
if (mWebView.canGoBack()) {
mWebView.goBack();
return;
}
// Otherwise defer to system default behavior.
super.onBackPressed();
}
And that works fine. But the doc page also cautions,
Be careful when using this mechanism with highly dynamic web pages
that can grow a large history. Pages that generate an extensive
history, such as those that make frequent changes to the document
hash, may make it tedious for users to get out of your activity.
Our client has confirmed that this is a problem: When following over a dozen successive links within a WebView, getting back out to the previous (parent) activity is tedious, especially because you have to wait between taps of the back button for the WebView to refresh.
Unfortunately the developer doc page doesn't suggest a workaround for this situation.
One possibility is to use the "up" button in the toolbar/appBar/actionBar to exit the WebView.
My concern with that is that the "up" button normally looks like a backward-pointing arrow or chevron, very similar to the "back" button (identical to the "back" arrow in some browsers). So then we'd have an "up" button in the toolbar and the Android "back" button, looking very similar and doing something different. That would seem confusing to the user.
Is there a better way to provide "exit" navigation from a WebView besides the "back" button?
(Not a duplicate: using phones back button to exit from webview asks how to get the "back" button to exit the WebView only after there's no more history to traverse back over.)
One possibility is to use the "up" button in the toolbar/appBar/actionBar to exit the WebView.
What else would you have in the toolbar? What would it do?
Usually every screen that is not the root has a home (up) button in the toolbar that closes the screen again. That's how most Android apps work.
My concern with that is that the "up" button normally looks like a backward-pointing arrow or chevron, very similar in concept to the "back" button (identical to the "back" arrow in some browsers). So then we'd have an "up" button in the toolbar and the Android "back" button, looking very similar and doing something different. Is that a recipe for confusing the user?
That's Android and if you do it that way you follow the platform guidelines. As mentioned above, that arrow in the toolbar is in almost every app and navigates away from the current screen, whether its called home, back, up, or something else.
But you're right, back and up gets confused a lot.
An alternative is to opt for the close style. Replace the default arrow by an ✖ and its action closes the current screen should be evident.
While I prefer the Up arrow, the ✖ is a valid alternative, especially if you pop some WebView for additional content and want a strong indicator on how to close it again.
Is there a better way to provide "exit" navigation from a WebView besides the "back" button?
Nope. You could try asking on UX Stack Exchange, but you already have 2 platform standards—namely back and up—that can and should be used for navigation.
Anything else that you might come up with would be "new" and unique to your app, but of course you could just add a "Close Screen" button.
tl;dr If you don't like the Up Arrow in your toolbar use an ✖ as a close icon.
I am making an app exclusive for the tablet it was installed to. I wanted to put a restriction so that when the back button or home button is pressed the user will be prompted to enter a password and if the password is correct application be allowed to exit.
Overriding the back button is pretty easy, just override Activity.onBackPressed() to do whatever you want. Don't call super() or it will close the Activity!
Overriding the home button is more problematic. The only way to do so is to make your app a launcher. Then press home and select your app as the default launcher.
I'm not sure that this could be a good idea. You're "blocking" the user in this way. You can probably override the back button but you will not be able to override the home button (without making the app a launcher).
I did a sort of "kiosk" application and I had the same requirements. I ended up rooting the devices and using this Hide Bar application. The user was not able to go back, and the administrator had a button to enter, with a password, into the "admin panel". In this admin panel you can push a button to go to the launcher. From there you can, with a widget included into the Hide Bar app, restore the back and home buttons.
http://developer.android.com/reference/android/app/admin/DevicePolicyManager.html
May be this can help you for setting the passoward.