We Keep Coding

react-navigation navigate.goBack() goes all the way to Home screen

so I am coding a simple app with react-navigation and I want to code this:
- Home (Tab)
- Profile (Tab)
-- User info (Stack screen)
--- Edit user info (Stack screen) - (screen with input to edit name, email etc...)
When I click save on the EditInfo screen I have a button on the right side of the header Done, this button should navigate back to the UserInfo screen where you can see the updated details.
BUT!
Everything works but when I click Done on the EditInfo screen, it navigates back to Home! Why is that?
Thanks for help

Could you please put the code of the service screen where you call the goBack function, it could be helpful. Generally you just call
You are either using the wrong Navigator comp or your requirements are not clear. Basically, You would like to use the StackNavigator for your desired behavior.
The catch is, DrawerNavigator is used to build up a drawer menu. If you swipe from the left you'll see your navigator drawer containing all of your screens as you can see in the image below
If you add a button on your screen like below, you'll see your menu open.
<Button title="MENU" onPress={() => this.props.navigation.navigate('DrawerOpen')} />
The conclusion is, whenever we use DrawerNavigator we always go back to initial route, which is whatever we defined as the first item or using the initialRouteName key of the second param of the DrawerNavigator.
It's only the StackNavigator that supports this stacking order you would like to achieve, as the name suggests itself.
What you can do is to wrap a new StackNavigator inside one of the screens of the DrawerNavigator. For example:
const AppNavigator = DrawerNavigator({
drawer1: {
screen: drawer1,
}
});
const drawer1 = StackNavigator({
one: { screen: one },
two: { screen: two },
three: { screen: three },
});

Maybe this answer would help you.
In a nutshell: maybe you need to specify backBehaviour param in your Tabs navigator.

How to maintain the same value in a parent and a child component using bi-directional data binding in Vue.js

I have two components, component A and component B
In Component A , i have two buttons
Like in picture, I have Start and Stop buttons. If I click on Start button Stop button will be enabled and Start will be disabled.
Now my problem is if I click on Start button and If I navigate to some other page, and if I comeback to page, Start button is getting enabled and Stop button is getting disabled.
Expectation is if I click on Start button, it should still be in disabled mode and Stop button should be on enabled mode when navigated to another component and come back to this component
<button #click="start" class="start-button" icon-left="play" :disabled="!allowStart">Start</button>
<button #click="stop" class="stop-button" icon-left="stop" :disabled="allowStart">Stop</button>
data() {
return {
allowStart: true,
};
}
start() {
this.allowStart = false;
}
stop() {
this.allowStart = true;
}
Can anyone help me on this. appreciated the help and response in advance.

It sounds like the component is being destroyed and re-created when you navigate away and back. In this case, there is no way for the component to remember what the value of allowStart was.
Either you have to re-design the component architecture so that this particular component persists when you are navigating, or you need to use some kind of global state management system. The best option would probably be by using vuex. If you use vuex to store the state of allowStart, then when the component is re-created, you can read the value of the state.
If for some reason you don't want to use vuex, you could also use the browser's localStorage

React-Router - Back Button

Is there a way I can prevent the url from changing when the back button is clicked?
I'm currently using createMemoryHistory to prevent url modification when I navigate around clicking links set up in my app. By doing this, I'm able to successfully navigate around but when I click the back button in my browser, it modifies the url (which I don't want).
E.g. My url looks like localhost:3000. Then I click on the settings link and I navigate to the settings view but my link is still localhost:3000. Now in settings, I click on Printers and navigate to the Printers view inside settings. My url still looks like localhost:3000. However, if I click the back button and return to the settings page, now my url looks like localhost:3000/settings.
Is there anything . I can do to the prevent the back button from modifying my url? Thank you for your help!

I would suggest using react-router's browserHistory class like this:
import { browserHistory } from 'react-router';
//... inside your component class
componentDidMount() {
browserHistory.listen(location => {
if (location.action === "POP") {
// Do your stuff
// maybe use your `createMemoryHistory` API
// to push a / to the history to keep the URL the same?
}
});
}

How do i prevent the Side Navigation to go back when i click on a link with javascript?

How do i prevent the Side Navigation to go back when i click on a link with javascript? Inside the Side Navigation i have Three links some page that are linked to other pages .So whenever i open the Navigation and click the links the side navigation closes. how can i make it to navigate trough the pages but still keep the side nav open ?
mu javascript code is :
var btn=document.getElementById("btn");
btn.onclick=function(){
document.getElementById("left").classList.add("activeL");
};
normally i use the add class in javascript and its only for opening !
i know its maybe a silly question ,but i'm a newcomer in Javascript and thank you in advance for helping me

you could use a query string. so your link could be:
my link
Js would go something like this:
let urlParams = new URLSearchParams(window.location.search);
let myParam = urlParams.get('navopen');
if (myParam === "open") {
//add whatever class/code makes the nav open, guessing:
document.getElementById("left").classList.add("activeL");
}
I could be more specific if you add more of your markup/code
Hope this helps.

Bootstrap modal - backdrop stays when I use the back button from the browser

When I display an error message to the user, I use the following script to open a modal message:
jQuery('#errorDialog').modal({
keyboard: false,
show: true,
backdrop: 'static'
});
It works very well and displays the message as I wanted to.
The problem is that when I use the back button from the browser, it takes me to the previous page in the history (all good) but the backdrop is still on the screen.
I tried to remove the backdrop: 'static' line which had the effect of dismissing the modal message when I clicked the anywhere on the backdrop. Nevertheless, it still stays when going back the the previous page.
Is there a way to remove it when I use the back button (or navigate through browser history otherwise)?

If you are working with a SPA javascript framework like for example Vue, React or Angular, is normal that when there is a back button pressed, the bootstrap or jQuery UI backdrop stays visible.
The reason is because the backdrop div is inserted usually at the top of the DOM and when back is pressed, it just re-renders the Node more down in the DOM.
The solution is for example, detect every history change and execute:
$(".modal-backdrop").remove()
In the case of Vue for example, it can be done in the vue-router like so:
router.beforeEach((to, from, next) => {
$(".modal-backdrop").remove();
next();
});

I had a similar problem using backbone.js. For anyone else experiencing this issue. Here's my hack to fix it.
I have a function in myRouter that loads my views on route change.
loadView: function(view) {
var _this = this;
if (_this.currentView) {
_this.currentView.close();
}
_this.currentView = view;
_this.currentView.render();
// Render view to dom
$(".content").html(_this.currentView.el);
// Set opacity of modal backdrop to 0
$('.modal-backdrop').css('opacity', 0);
} //,
Then on route change you just call loadView like this:
index: function() {
_this.loadView(new IndexView());
} //,