is it possible to create a custom Scene instead of use original Scene?

[HengCC]

I want to handle some things in a unified way when the scene trigger onEnter, like:

import React, { Component } from 'react';
import { Scene } from 'react-native-router-flux';
class CustomScene extends Component {
  constructor(props) {
    super(props);
  }

  enterScene = (val) => {
    console.log("Scene onEnter val:");
    if (this.props.onEnter) {
      this.props.onEnter(val)
    }
  }
  render() {
    console.log("scene props:", this.props);
    const { onEnter, on, ...rest } = this.props;
    return (
      <Scene onEnter={this.enterScene} on={this.enterScene} {...rest} >
        {this.props.children}
      </Scene>
    );
  }
}

export default CustomScene;

then use it:

import CustomScene from './Scene';
 <Router>
        <CustomScene key="root">
          <CustomScene key="login" hideNavBar component={RouterComponent.Login} />
        </CustomScene>
</Router>

Is this feasible?

[HengCC]

i try this, but got an error:

Cannot read property 'routes of undefined'

[HengCC]

i read the source code . I found the scene just as a container, it's not really rendered, So the above solution is not feasible. Is there any other solution that can handle the onEnter event of all routes uniformly?

[daviscabral]

You can try the react-navigation@2 NavigationEvents.

Could you also check if the idea below works? (I haven't actually tested it - and typed it here in the input off the top of my head - it might have errors or typos - help me out on that to get the whole idea behind it 😉).

CustomScene

class CustomScene {
  constructor(props) {
    props.onEnter = this.handleOnEnter;
    super(props);
  }

  handleOnEnter = (val) => {
    console.log("Scene onEnter val:");
    if (this.props.onEnter) {
      this.props.onEnter(val)
    }
  }
}

export default CustomScene;

Adding a onEnter in the Router sounds like a good enhancement - what do you think @aksonov?

[HengCC]

@daviscabral thanks! I have tried your idea, but it still doesn't work.
My current solution is to add the onEnter event to each Scene.

[daviscabral]

IGNORE THIS ANSWER

Use the other one I answered below please. #3208 (comment)

---

I believe the way for doing that (since onEnter from components is always called) is to move the code you want reuse to a module and call it in your components.

class Login extends Component {
  onEnter = myModuleNameUtils.onEnterHandler
}

class Home extends Component {
  onEnter = myModuleNameUtils.onEnterHandler
}

class Profile extends Component {
  onEnter = myModuleNameUtils.onEnterHandler
}

const myModuleNameUtils = {
  onEnterHandler: (val) => {
    // do your stuff here
  }
}

RNRF will call onEnter in these components if you do not set it in the Scene.

[HengCC]

I haven't tried this method yet, maybe it's feasible, but I don't think there is any difference between this method and the way that the onEnter event is added directly on the Scene, and this implementation is intrusive to the component. I am not sure if such demand is universal, if it is, as you said, Adding a unified onEnter on the Router may be a better solution.

[daviscabral]

HoC is also a solution.

const withOnEnterHandler = onEnterHandler => Component => {
  class WrappedComponent extends Component {
    onEnter = val => onEnterHandler(val)

    render () {
      return <Component {...this.props} />;
    }
  }
  return WrappedComponent;
}

[daviscabral]

But yeah - something on the Stack level would be nice. Let's wait @aksonov come back from vacation to see his opinion about it.

[aksonov]

HoC is good solution, closing this ticket