[Navigator] renderScene onBack not working?

[yamill]

Hey, so mistake me if I'm wrong but I'm trying to use the onBack function from the example and it doesn't do anything. I am trying to have a callback that when I swipe back from my video view to my videos view something happens (like navigator.popToTop()).

Can anyone help me understand how I can create a callback properly when the user swipes back to the scene?

Thanks!

renderScene: function(route, navigator){
 switch (route.id){
 case 'login':
 if(Parse.User.current()){
 return <Feed/>
 }else{
 return <Login/>
 }

 case 'signup':
 return <Signup/>;

 case 'feed':
 return <Feed/>;

 case 'video':
 return <Video name={route.name} url={route.url} onBack={() => {
 console.log('you swiped back!');
 }} />;

 default:
 return <Login/>;
 }
},
render: function(){
 return (
 <Navigator style={{backgroundColor: 'black'}} ref="navigator"
 initialRoute={{id: 'login'}}
 renderScene={this.renderScene}
 />
 )
}

[chirag04]

I think callback is not called when you swipe back. it is only called when you press the back button.

@ericvicenti can help you better.

[yamill]

Ahh gotcha. @ericvicenti would be great if you can point me in the right direction! thanks.

The reason why I want a callback is because the video continues to play when I swipe back and the scene is not fully unmounted. You can still hear the playback of the video when you swipe back.

[chirag04]

@yamill Try componentWillUnmount in your component where you play the video. Stop the video there maybe?

[yamill]

@chirag04 i tried adding componentWillUnmount - but it doesn't get called on the swipeback action.

[yamill]

@chirag04 - So I added this code from #1018 to my Navigator.js and seemed to fix the issue. Now the componentWillUnmount gets called and I also didn't need to add any code to stop the video because it got unmounted 👍

FYI, I don't think this fix got pushed to Master yet so it needs to be added manually.

Thanks for help!

[chirag04]

@yamill Cool. Going by the comments seems like that fix will never land on master. @ericvicenti made a better fix it seems and will be released in the next version.

Anyway, glad you could figure it out.

[yamill]

@chirag04 awesome, looking forward to the better fix by @ericvicenti

[ericvicenti]

Hey! We're working on making this easier. In the next release (and in master), there is a new way to monitor navigation changes:

this.currentRoute = this.props.navigator.navigationContext.currentRoute;
this.props.navigator.navigationContext.addListener('willfocus', (event) => {
 // this.currentRoute will go away
 // event.data.route will be focused
 this.nextRoute = event.data.route;
});
this.props.navigator.navigationContext.addListener('didfocus', (event) => {
 // this.currentRoute has gone away
 // event.data.route has been focused
 this.currentRoute = event.data.route;
 this.nextRoute = null;
});

In the current release, you can get similar events by adding handlers to the navigator component: (keep in mind this will be deprecated)

<Navigator
 ...
 onWillFocus={(route) => {
 // will switch to `route`
 }}
 onDidFocus={(route) => {
 // did switch to `route`
 }}
/>

[yamill]

@ericvicenti thanks for the response! this sounds great! looking forward to using these events in the next release.

btw i found the better code in the latest version and now is working flawlessly

 // The gesture has enough velocity to complete, so we transition to the gesture's destination
 this._transitionTo(
 destIndex,
 transitionVelocity,
 null,
 () => {
 if (releaseGestureAction === 'pop') {
 this._cleanScenesPastIndex(destIndex);
 }
 }
 );
}
this._detachGesture();

👍

[jtremback]

👍