Some helpful tips on using the on Methods [Router flux v4.0.6]
See original GitHub issueUsing Static on Methods with HOCs This is just a helpful tip for anyone who use the onExit/onEnter methods as a static method in their Component Class. Please refer to this link https://reactjs.org/docs/higher-order-components.html.
-
If your Scene Components are Wrapped in Custom HOCs/ Decorators, then the static onExit/onEnter methods will not work as your Custom HOCs will not copy the static methods over to your Enhanced Component.
-
Use this npm package called hoist-non-react-statics to copy your Component level static methods over to your Enhanced Component.
Implement onBack from your Scene and not while declaring the Scene
-
If you have a Scene where in you want to make some changes to your Component State when Back button is pressed, then doing this
<Scene key={...} component={...} onBack={()=>/*code*/}/>
will not help. -
<Scene key={...} component={...} onBack={()=>/*code*/} back={true}/>
Make sure back = true is passed to your scene, now in your Component’s lifecycle add this
componentDidMount(){
setTimeout(()=> {
Actions.refresh({onBack:()=>this.changeSomethingInYourComponent()})
})
}
- setTimeout is added because without setTimeout props of the prev screen get refreshed, may be because it waits for the animation to complete, so better to run it on a fresh queue.(Clarification required)
Issue Analytics
- State:
- Created 5 years ago
- Reactions:5
- Comments:6 (3 by maintainers)
Top GitHub Comments
@shubhang93 Great tips, thanks! It would be great if you can submit documentation PR
In case of animations and refresh props, it’s better to use
const params = { onBack: this.onBack, onRight: this.onRight } InteractionManager.runAfterInteractions(() => { Actions.refresh(params); });
because