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()} />?

34 Answers

✔️Accepted Answer

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

Other Answers:

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

Related Issues:

141
react native router flux Duplicate versions of react-native being installed
Got wrecked by this too Fixed with the rollback to 3.38.0 react-native-router-flux v3.38.1 react-nat...
49
react native router flux @providesModule naming collision error after installing react-native-router-flux
Same problem it works if you rollback to the previous version: yarn add react-native-router-flux@3.3...
32
react native router flux Help With Drawer Menu
Hi I implemented the Drawer from router-flux v4.0.0-beta.14 like this: (I couldnt find any info on h...
31
react native router flux Bundling error
Running packager like that resolves problem for me react-native start --reset-cache --verbose Verbos...
28
react native router flux Animations for transition on Android
To anyone who stumbles on to this thread - to get the old direction= behaviour back you can just add...
26
react native router flux Ability to provide the left/right navbar buttons from the rendered component
@jrwm thanks it works The current set up of the buttons is not ideal They have to be declared and ho...
25
react native router flux Back navigation won't work on Android
I solved this way: <Router backAndroidHandler={this.onBackPress}> and: I've noticed that on Android:...
23
react native router flux Fatal Exception: com.facebook.react.common.JavascriptException: TypeError: undefined is not an object (evaluating 'r.default')
run this package.json snippet in postinstall or manually before release: For older react-navigation ...
22
react native router flux Double-tapping fires Actions twice
This is a workaround I use for the moment: For every button that triggers a navigation action ...
16
react native router flux Problem about pop and refresh
Hello guys I have the same problem with tab scene too : componentWillReceiveProps is not triggered u...
16
react native router flux onEnter/onExit hooks inside scenes components
@aksonov Can you provide a sample code using onEnter inside a component? Thanks ...
14
react native router flux Forbid swiping back
@mvaivre to disable swiping back passing panHandlers={null} worked for me e.g: <Scene key=modal comp...
13
react native router flux ERROR: UNMET PEER DEPENDENCY react@15.5.4
I fixed this by removing the little ^ symbol in my package.json file in front of the version number ...
5
react native router flux Actions.[SCENE_NAME] is not working.
with react-native-router-flux: ^3.30.2 if i set type to my scenes Actions dont work And in Drawer if...