ReactXP Navigator does not re-render the previous card after a navigation event (i.e. navigator.pop()) https://github.com/Microsoft/reactxp/issues/387

App.tsx

import * as RX from 'reactxp'
import Navigator, { Types, NavigatorDelegateSelector as DelegateSelector } from 'reactxp-navigation'
import { EventEmitter } from 'events'

const exampleStore = new EventEmitter()

export class App extends RX.Component<{}, { counter: number }> {
  state = { counter: 0 }
  private navigator: Navigator

  componentDidMount() {
    // !!!!!!!!!!!!!!!!!!!!!!!!   THIS IS THE PROBLEM    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    // 
    // The event is being received and processed but the counter on page 1 is never
    // updated because page 1 never re-renders (when going back to it from page 2). The
    // original rendered scene with counter 0 is shown even though the state has updated.
    //
    // The state update can be verified by going to page 2 to see the latest counter value
    //
    // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    exampleStore.on('test-event', () => {
      this.setState({ counter: this.state.counter + 1 })
      this.forceUpdate()
    })

    // Navigate home
    this.navigator.immediatelyResetRouteStack([{
      routeId: 1,
      sceneConfigType: Types.NavigatorSceneConfigType.Fade
    }])
  }

  showPageTwo = () => {
    this.navigator.push({
      routeId: 2,
      sceneConfigType: Types.NavigatorSceneConfigType.FloatFromRight,
    })
  }

  emitEventAndGoBack = () => {
    exampleStore.emit('test-event')
    this.navigator.pop()
  }

  renderScene = (navigatorRoute: Types.NavigatorRoute) => {
    switch (navigatorRoute.routeId) {
      case 1: return (
        <RX.View>
          <RX.Text style={{ marginBottom: 10 }}>PAGE ONE</RX.Text>
          <RX.Text>Async counter: {this.state.counter}</RX.Text>
          <RX.Link url='#' onPress={this.showPageTwo} style={{ marginTop: 10 }}>Go to page two</RX.Link>
        </RX.View>
      )
      case 2: return (
        <RX.View>
          <RX.Text style={{ marginBottom: 10 }}>PAGE TWO</RX.Text>
          <RX.Text>Async counter: {this.state.counter}</RX.Text>
          <RX.Link url='#' onPress={this.emitEventAndGoBack} style={{ marginTop: 10 }}>Emit event and go back</RX.Link>
        </RX.View>
      )
      default:
        return (
          <RX.View />
        )
    }
  }

  render() {
    return (
      <Navigator
        delegateSelector={DelegateSelector}
        ref={(navigator: Navigator) => { this.navigator = navigator }}
        renderScene={this.renderScene}
      />
    )
  }
}