Can NavigatorIOS notify that a "back" happened?

[zertosh]

Not sure if I'm missing something, but does NavigatorIOS have a way of notifying its owner that there is a new top route because the "<" back button was pressed? Otherwise, to get that functionality, the removed component would have to itself notify during componentWillUnmount, and that just feels weird.

[vjeux]

cc @evv

[vjeux]

@ericvicenti actually :p

[zertosh]

@vjeux: So far I'm having a great time with react-native. I wrote a tumblr browser that uses the flux pattern heh. This is what it looks like: min-s-react-native-demo-gif. (I'm not inlining the gif because it's too distracting.)

[vjeux]

Nice! Glad to hear :)

Hopefully we can get gif support soon so that you can have a fully functional app soon

[paramaggarwal]

Unfortunately, the default back button of UINavigationController does not provide an event. The way to get around it is to either set your custom back button on the left side, or to implement - viewWillDisappear: in iOS. So I guess, this limitation is here to stay.

[vjeux]

Since iOS doesn't support it, let's close this for now.

[liubko]

@paramaggarwal is it possible to be notified when any rote changes?
something like

<NavigatorIOS onChange={...}
              initialRoute={...} />

I mean when someone do navigator.push(...)

[paramaggarwal]

@liubko please look into Navigator instead, which is much more customisable. Docs are here: Navigator Comparison

[arypurnomoz]

i think you can wrap the route component with a wrapper and listen to the wrapper's componentWillUnmount

[sebringj]

I was able to get a hacked onBack for these types of things using an array as singleton that each component wanting to get there onBack method called would use. The idea is like below.

// singleton onBackStack
export default [];

// example component
class ExampleComponent extends Component {
  onBack() {
    // do something
  }
  componentWillMount() {
    onBackStack.push(this);
  }
  componentWillUnmount() {
   onBackStack.pop();
   if (onBackStack.length) onBackStack[onBackStack.length - 1].onBack();
  }
  render() {
    return <View>example</View>
  }
}

[BSN4]

@sebringj thanks for sharing this can you please explain onBackStack

[sebringj]

@phpfalcon basically, there is a singleton that is imported to all components that are views needing to have "onBack" event. The singleton is named "onBackStack" which is just a simple array.

Each component needing an "onBack" would then push themselves into the onBackStack on their own componentWillMount. On componentWillUnmount, they remove themselves off the stack but then call the method of the last item in the list's onBack() so to fire the event of the component it is going back to. It's kind of like a cooperative chaining of components to accomplish this.

This can be put into a component class then inherited from which is probably a way better idea. I just made it very quickly as I don't care to make it more robust or friendly for what I am doing.

[BSN4]

@sebringj your method is great but I couldn't understand it until your last comment I implanted a similar method which works for navigatorios :

constructor()
{
     super();
     this.state = {backapper:false}};
}
componentDidMount() {
    var currentRoute = this.props.navigator.navigationContext.currentRoute;
    this.props.navigator.navigationContext.addListener('willfocus', (event) => {
        //didfocus emit in componentDidMount
        if (currentRoute === event.data.route && this.state.backapper) {
            console.log("me didAppear");
            this.setState({backapper: false});
        }
        else if (currentRoute !== event.data.route)
        {
            this.setState({backapper: true});
            console.log("me didDisappear, other didAppear");
        }
        //console.log(event.data.route);
     });
}

[njt1982]

@phpfalcon Hmm I dont have a navigationContext? Are you using React Navigation? This Google returns no results... navigationContext site:reactnavigation.org