onEnter/onExit method in React Native Component (react-native-router-flux)

Question

So I can use the onEnter/onExit method at the root of my app in the router definitions and it works perfectly fine:

<Scene key="arena" hideNavBar={true}  onEnter={() => console.log("Entered")} component={ArenaPage} />

Is there any way I can do this inside the component itself so that I can update the local state??

export default class ArenaPage extends Component {
    onEnter () {
        this.setState(...)
    }
    // Render blah blah blah...
}

If not possible, Is there anyway to trigger componentWillUnmount when navigating away from Scene (Actions.[key])

score 3 · Answer 1 · answered Jan 20 '19 at 00:06

3

You can use onEnter and onExit methods to get the result you want. And in turn can access this like so.

import { Actions } from 'react-native-router-flux'

class Home extends Component {
  static onEnter() {
     // homeSceneKey needs to be the same key that you use to configure the Scene
     Actions.refs.homeSceneKey.getWrappedInstance().myFunction()
  };

  myFunction = () => {
     // have access to this (props and state) here
     this.blah = "what ever you want to do"
  }
}

Hope this helps

answered Jan 20 '19 at 00:06

hdsenevi

953
2
14
27

2

Pre-requisite: withRef need to be set to true, otherwise getWrappedInstance() will not be available. connect(null, null, null, { withRef: true })(Home); – Xavier Feb 14 '19 at 15:35
1

@Xavier (according to the redux doc withRef has been changed to forwardRef) I have added a {forwardRef: true}, and it still doesn't work, Actions.refs are always empty... any help?? – Daniel B. May 22 '19 at 08:24
1

same here @DanielB. – Marco Jr Aug 12 '19 at 16:42
1

same for me Actions.refs is always empty – pinturic Mar 20 '20 at 22:47

score 2 · Answer 2 · answered Jan 29 '18 at 12:17

2

Please check latest react-native-router-flux:beta.27, now you can define onEnter, onExit methods as your react component methods.

class Home extends Component {
  static onEnter() {
    console.log('On Focus Enter')
  };
  static onExit() {
    console.log('On Focus Exit')
  }
}

answered Jan 29 '18 at 12:17

Pir Shukarullah Shah

4,124
2
22
42

2

you can not access `this` in `onExit()` – Phạm Tuấn Anh Aug 05 '18 at 08:33
yes you can, refer to my answer https://stackoverflow.com/a/54272466/329054 – hdsenevi Jan 20 '19 at 00:07

score 0 · Answer 3 · answered Dec 11 '17 at 09:01

0

Simple use componentWillUnmount, in the arenaPage component.

componentWillUnmount() {
    // add your code here.
}

Because that will run when navigation away from the component. I am using it to remove error messages. And that works.

answered Dec 11 '17 at 09:01

udarts

745
1
8
23

3

My problem is solved, forgot about this. componentWillUnmount will also not work here as the component is not umounted when transitioning to next scene with `Actions.[key]` – Nathan Horrigan Dec 12 '17 at 13:18
@NathanHorrigan How did you solve this problem? can you suggest? – Porawat Chimcherdsin Dec 18 '17 at 08:30
@PorawatChimcherdsin I'm setting my initial state in `componentWillMount` (for initial render) and then when I transition away from scene I have an `onDestroy` function that returns a promise that resets the scene to its initial state. – Nathan Horrigan Dec 19 '17 at 09:48
@NathanHorrigan Does that onDestroy function automatically get called? as I didn't get any like that – Narendra Singh Oct 11 '18 at 10:34

onEnter/onExit method in React Native Component (react-native-router-flux)

3 Answers3

Linked