I am trying to call the navigation.goBack() inside componentDidUpdate, the backing works however the animation of going back does not. Like the slide effect.
The use case that I have is for implementing an edit screen. Suppose you just edited some items but now when you click update/save you want to go back. In order to catch that update/save event, I am making it a part of the NavigationScreenProp, this is setting the state of the NavigationScreenProp.
Once the header update button is clicked the NavigationScreenProp becomes {isUpdated=true}. This fires the componentDidUpdate event and inside of it I handle saving the data, however the problem occurs when calling the back.
This scenario however works if you create an alert when isUpdated===true and goes back with animation.
Any help or direction would be great help! Thanks!
Also if there is a better way to handle this scenario, please comment :)
Related
I'm trying to make a toaster component.
https://codesandbox.io/s/62n81oy4pr
in index.js, this.setState({ toasterText: "Room added to summary." });
from this code, you can change the value of the toaster whatever you want and When you click the button several times, the toaster keeps showing and then disappear after 2.6 sec from the last click.
However, When I set a component (or even a div) into the 'toasterText' and click the button,
something like this,
this.setState({ toasterText: <Component>asdfasdf</Component> });
the toaster appear by one click and disappear as soon as I click the button again.
I think I can do something with the componentDidUpdate or am I just not allowed to set components in setState??
sorry for my bad English.
The reason it "disappears" is because the component is re-mounted (destroyed and re-created), as opposed to re-rendered (text updated) in your first example.
While it is technically possible to do this, it is considered anti-pattern for numerous reasons (the problem you experienced being one of them). I can't think of any reason you'd ever want to take that approach; just stick with updating the text.
If you really have to implement the second approach, try adding a key prop to the component. That should prevent the re-mounting behavior.
I have a router with a lot of screens and nested navigators, and everything is working exactly how I want it to. I'm using redux for a lot of state throughout, but I'm not using redux for navigation state.
If something unexpected goes wrong, for example no network connection, an alert comes up. Once the alert is dismissed, there may be some missing information on the screen. I did the "pull down to refresh" thing using RefreshControl and StackActions.reset in a couple of the most common places with ScrollViews.
I suppose it's possible to write this refresh function for every single screen to re-fetch data on pull-down refresh, but it seems wrong, like I should be able to get the navigation state from anywhere and then use StackActions.reset to reset the navigation state to exactly where it was where the actions are navigations to everything in the stack using a generic refresh function. Having a bit of trouble deciphering the navigation state to be able to do this generically from anywhere though, has anyone else done something similar?
try
navigation.replace(routeName)
I've scoured this site and various Github issues for a solution but am still a bit stuck. In essence, this is the flow that I desire:
Land on first component/screen, which has some information
Click a button and be pushed to a second component/screen
Do something on this second component/screen
Pop back to first component/screen
Have refreshed information be displayed when we come back to this page
Issues:
Component lifecycles don't work because when I'm popping from the second component to the first component (the parent), there's no component lifecycle method I can call in this case.
Event Emitters won't suffice as a solution because they only work within a single component (is this correct btw?)
Would greatly appreciate any help I can get. Thank you!
In the first component, create a function that will refresh the component by updating the state. Pass the function to the second component and when you pop, call this function.
Ok so i have a component i made up with a form. I would like to alert the user that he has unsaved data (if he has) when the user clicks on another link.
Now if i would not be tied to ember i would put a flag on a change event and add a window unload listener to show the actual message, However,
Since im not really leaving the window this is not getting called.
Is there any Ember event i can attach a handler to? like a change route intent event of some kind
Im interesting in knowing which is the correct event for the leaving route action, not in the something change logic.
ive tried this so far on the didInsertElement( ) method
Ember.$("body").on('unload',()=> alert('it works'));
Ember.$("window").on('unload',()=> alert('it works'));
Ember.$("body").on('unload','body'()=> alert('it works'));
any ideas?
Have you had a look at the willTransition method on your route? That will be the place to do it. Have a read of this guide to preventing and retrying transitions, as well as the willTransition method's documentation. Hope that helps!
You can catch transition event on route. It's meant to be used for this use case.
There is also action when component is being destroyed but that is meant for teardown.
I'm trying to build an Android action bar-like navbar in Ember. I would like the action bar to show the route (friendly) name and have context dependant button's on the right side. I came a long way, this jsFiddle will explain things more clearly:
jsFiddle
However, the activate event isn't I am using to figure out when a route has been changed, is only firing when one first visits the route (traversing back up the route tree won't trigger it), thus my context isn't loaded consistently.
What would be the best way to solve this problem? I know the serialize, renderTemplate and setupController fire on every route change, but none of these methods are intended to be used this way. Is there perhaps a way to add a custom event to my routes, that fires on every route change?
On a side note, I am completely new to ember so I may be going about this completely the wrong way, in that case, I am eager to hear a generally better solution, than mine.
UPDATE:
Thanks to kingpin2k's tip I was able to clean up my code a bit, for future reference here's the updated fiddle:
jsFiddle
didTransition/willTransition were created for this reason. In your case didTransition will make the most sense.
actions: {
didTransition: function(){
console.log('level two transition');
},
}
http://jsfiddle.net/FZ29Q/