[Navigator] push should unmount component or have an event to listen to. Pop should remount the component it's moving to.

Using the navigator, i’ve been trying to integrate flux with my components. The tricky thing is, i don’t have an event or method to hook into for removing the event listener. I’ve managed to hack around it a bit by removing the listener when i push the route. Likewise from there passing a component as a back button that has this top level component in scope:

class ProjectList extends Component {
  _onChange(project) {
    this._unsub();
    this.props.navigator.push({
      component: Project,
      props: { project: project },
      navigationBar: (<NavigationBar
        title={project.title}
        titleColor="#000000"
        style={appStyles.navigator}
        customPrev={<CustomPrev onPress={() => {
          this.props.navigator.pop();
          this._sub();
        }} />}
      />)
    });
  }
}

Which is rather ugly in my opinion. The this inside the onPress is the instance of the ProjectList

[brentvatne]

@pukhalski - man, we are doing our best here, passive aggressive comments aren’t helpful or appreciated 😦

Yes the issue that this was created for has been fixed: “push should unmount component or have an event to listen to. Pop should remount the component it’s moving to.” – there is an event to listen to, navigationContext.addListener('didfocus') and willfocus.

There is actually a good reason for keeping these views mounted in React – on iOS for example you want to be able to use the swipe gesture to go back to a previous scene without having to re-render that scene (potentially expensive to do) and lose its state (bad ux).

---

A memory usage optimization for ListView is to automatically apply removeClippedSubviews, which will unmount the native views outside of the ScrollView content container clip rect (which will free up memory in the case of images), however there are no such optimizations for Navigator at the moment. See this discussion for details and a workaround: https://www.facebook.com/groups/react.native.community/permalink/710415322427382/

See @deanmcpherson’s comment at the end:

I also played wiith unmounting entire navigator views , but found that it had sketchy performance for me when navigating back quickly as it had to remount whole views on the fly (probably only an issue because people tend to navigate back quicker than they go forward).

[pukhalski]

Is it fixed? Or just closed because it’s okay to have a memory leak within an app?