New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Navigator] renderScene onBack not working? #1695

Closed
yamill opened this Issue Jun 20, 2015 · 10 comments

Comments

Projects
None yet
5 participants
@yamill
Contributor

yamill commented Jun 20, 2015

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

This comment has been minimized.

Show comment
Hide comment
@chirag04

chirag04 Jun 20, 2015

Collaborator

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.

Collaborator

chirag04 commented Jun 20, 2015

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

This comment has been minimized.

Show comment
Hide comment
@yamill

yamill Jun 20, 2015

Contributor

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.

Contributor

yamill commented Jun 20, 2015

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.

@brentvatne brentvatne changed the title from Navigator - renderScene onBack not working? to [Navigator] renderScene onBack not working? Jun 20, 2015

@chirag04

This comment has been minimized.

Show comment
Hide comment
@chirag04

chirag04 Jun 20, 2015

Collaborator

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

Collaborator

chirag04 commented Jun 20, 2015

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

@yamill

This comment has been minimized.

Show comment
Hide comment
@yamill

yamill Jun 20, 2015

Contributor

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

Contributor

yamill commented Jun 20, 2015

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

@yamill

This comment has been minimized.

Show comment
Hide comment
@yamill

yamill Jun 20, 2015

Contributor

@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!

Contributor

yamill commented Jun 20, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@chirag04

chirag04 Jun 20, 2015

Collaborator

@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.

Collaborator

chirag04 commented Jun 20, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@yamill

yamill Jun 20, 2015

Contributor

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

Contributor

yamill commented Jun 20, 2015

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

@ericvicenti ericvicenti self-assigned this Jun 21, 2015

@ericvicenti

This comment has been minimized.

Show comment
Hide comment
@ericvicenti

ericvicenti Jun 21, 2015

Contributor

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`
  }}
/>
Contributor

ericvicenti commented Jun 21, 2015

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

This comment has been minimized.

Show comment
Hide comment
@yamill

yamill Jun 22, 2015

Contributor

@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();

👍

Contributor

yamill commented Jun 22, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@jtremback

jtremback Jun 24, 2015

Contributor

👍

Contributor

jtremback commented Jun 24, 2015

👍

@facebook facebook locked as resolved and limited conversation to collaborators Jun 24, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.