React-native: NavigationExperimental: NavigationTransitioner render scene twice

[Kufert]

React Native version - 0.29
Tested on iOS + Mac

Maybe it's intended behavior, or maybe I'm just missing something, but when using NavigationTransitioner the render function is called twice:

  render() {
    return (
      <NavigationTransitioner
        navigationState={this.props.navigationState}
        render={(transitionProps) => this._render(transitionProps)}
        configureTransition={this._configureTransition}
      />
    );
  }

the function _render is being called twice although render is called only once.

[austinksmith]

Try something like this..

  render() {
    let callRender = (props) => {
      this._render(props)
    };
    return (
      <NavigationTransitioner
        navigationState={this.props.navigationState}
        render={(transitionProps) => callRender(transitionProps)}
        configureTransition={this._configureTransition}
      />
    );
  }

[drop-dan]

The problem is likely that you are rebinding the render prop on each render, causing the props be different from the last.

Like austinksmith demonstrated, but even simpler, you can just bind your _render method and pass it directly into NavigationTransitioner.

render() {
  return (
    <NavigationTransitioner
      navigationState={this.props.navigationState}
      render={this._render}
      configureTransition={this._configureTransition}
    />
  );
}
_render = (props) => {
  // ... rest of custom rendering
}

Can you see how

render={(transitionProps) => this._render(transitionProps)}

is the same as

render={this._render}

except that you are defining a brand new function on each render?

[Kufert]

Actually I based my code on the example on the project -

https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/NavigationExperimental/NavigationTransitioner-AnimatedView-example.js#L135

I've tried both solutions and they didn't help. I added 2 debugger; - one at the beginning of render() and another at the beginning of _render(). Then I see that the functions are called in the following order:

1. render()
2. _render()
3. _render()

If the module is loaded inside a map (rendering multiple instances) then it calls render() and _render() once for each module as expected, but then _render() is called again, once for each module.

[mrwest808]

The reason for this seems to be because the onLayout function is triggered after NavigationTransitioner has mounted, updating the state in regards to layout. Perhaps you can use the transition props that your render function gets called with to determine whether or not to re-render.

[shahen94]

+1

[sscaff1]

+1

[Oxyaction]

Issuing the same problem with 0.36.0.

class MyNavigator extends Component {

  static get propTypes() {
    return {
      navigationState: PropTypes.object.isRequired,
      onNavigationChange: PropTypes.func.isRequired,
    }
  }

  constructor(...args) {
    super(...args);
    this.popRoute = this.props.onNavigationChange.bind(null, 'pop');
  }

  pushRoute = (route) => {
    this.props.onNavigationChange('push', route);
  };

  _renderScene = (sceneProps) => {
    console.log('render scene');
    const { Component, props = {} } = sceneProps.scene.route;
    return (
      <Component
        { ...props }
        pushRoute={this.pushRoute}
        popRoute={this.popRoute}
      />
    );
  };

  render() {
    console.log('render');
    return(
      <NavigationCardStack
        onNavigateBack={this.popRoute}
        navigationState={this.props.navigationState}
        renderScene={this._renderScene}
      />
    );
  }
}

the render function is triggered once, which is expected behavior, but _renderScene function is triggered twice.

[eremzeit]

@Oxyaction I thought I was having your problem but then I realized that I was thinking about scenes the wrong way. _renderScene is going to get called for both the inactive and the active scene. I understood more what was going on when I modified the console statement to:

console.log(`render scene: ', sceneProps.scene.route.key);
console.log(`isActive: ', sceneProps.scene.isActive);

Maybe you already knew that, but I thought I'd highlight just in case we were in the same boat.

Though, I'm still seeing more than one call to _renderScene for each scene. However, I haven't looked into the cause of _that_ particular behavior.

[hramos]

Closing this issue because it has been inactive for a while. If you think it should still be opened let us know why.

[austinksmith]

I really wish there wasn't a trend of closing issues that haven't been resolved, it's only been inactive on the maintainers part not the community.