Solvedreact native router flux onEnter/onExit hooks inside scenes components

Is there any simple way to have onEnter / onExit hooks inside navigation scenes components? It's very useful to have it because it gives the ability to create fancy animation effects.

At the moment I can see the only solution is passing props from root component and then process them inside componentWillReceivePropsof scenes component but it's super-ugly. Maybe there is some easy way to handle it with callbacks, something like <Scene onEnter={() => this.sceneComponentRef.onEnter()} />?

@aksonov Can you provide a sample code using onEnter inside a component?
Thanks

i've tried all suggestion here but failed, because my case is inside a tabs. recently i found solution from https://stackoverflow.com/questions/49005289/reload-screen-when-the-tab-is-changed to use didFocus listener. here is the code:

class YourComponent extends Component {
  componentDidMount() {
    this.didFocusListener = this.props.navigation.addListener(
      'didFocus',
      () => { console.log('did focus') },
    );
  }

  componentWillUnmount() {
    this.didFocusListener.remove();
  }

  render() {
    return ( /* your render */ );
  }
}

@aksonov - I know you said that using componentDidMount is an anti-pattern, but it's the only easy way right now to actually modify the navbar.
I'm pretty sure other users are doing the following:

• reading the state to determine if they should desplay: "edit" or "new" as a title
• depending on the state - display "save" or "ready" buttons
• the save button would call a function on the component that contains the logic to save, update the item

I'm actually thinking of completely giving up on the build-in navBar as it is too complicated to change the title and what the buttons do. Rendering a custom Navbar in each component looks like less work right now.

This is starting to work for me after adding a static onExit method to my component.

I see 'onExit' in logs for both Android and iOS.

I am still trying to figure out how I can get to the component instance and component state from the component's static onExit method?

        <Stack key="login" path="login/:data" titleStyle={{ alignSelf: 'center' }}>
          <Scene
            key="loginModal"
            component={Login}
            title="Login"
            onExit={() => { Login.onExit()}
            leftTitle="Cancel"
            onLeft={Actions.pop}
          />

Using:

		"react": "^16.2.0",
		"react-native": "^0.53.3",
		"react-native-router-flux": "4.0.0-beta.27",

  render() {
    return (
      <Router>
        <Stack key="root">
          <Scene key="login" hideNavBar={true} component={LoginPanel} />
          <Tabs key="table" tabBarPosition='bottom' headerMode='screen' titleStyle={{ alignSelf: 'center' }}>
            <Scene key="TimeCard" onEnter={() => this.onEnter()} title='TimeCard' component={FirstScreen} />
            <Scene key="Joho" onEnter={() => this.onEnter()} title='Joho' component={MeisaiJoho} />
            <Scene key="Me" onEnter={() => this.onEnter()} title='Me' component={MePanel} />
          </Tabs>
          <Scene key="Change" component={MeisaiChange} />
          <Scene key="Me2" component={MePanel2} />
        </Stack>
      </Router>
    );
  }

  onEnter() {
    Actions.refresh({action:new Date().getTime()});
  }

  componentWillReceiveProps(nextProps: Readonly<P>, nextContext: any){
    console.log("FirstScreen ReceiveProps");
  }

This can be achieved refresh function, Actions.refresh ({action: new Date (). GetTime ()}); The value passed must be changed, otherwise it will not trigger the componentWillReceiveProps event
Now I found that this method works only on android, ios does not work