React-native-navigation: Addition of some sort of WillFocus, DidFocus mechanism.

Created on 25 Jul 2016  路  19Comments  路  Source: wix/react-native-navigation

Hi,

I just saw that you were currently working on 2.0 of RCC/RNN. I'd love for WillFocus, DidFocus notifications to be included within this.

In my case I need to perform actions when a user moves to a specific tab.

I've hacked this into the current version by sending the navigatorEventID to the RCCNavigationController and sending an app event from the viewWillAppear of RCCViewController in the same way the back buttons are handled.

onNavigatorEvent (event) { if (event.type === 'DidFocus') { this.doSomething() } }

Thanks!
Luke

Most helpful comment

Hi @phuna,

I've just forked in order to integrate this now - I imagine the implementation @guyca has in mind will be vastly different but it achieves what I need right now.

It requires amends to both RNC and RNN:

https://github.com/lprhodes/react-native-controllers/commit/f6f0ba1b0fe5e0d0e0fc1d7a232b124a88dce16b

https://github.com/lprhodes/react-native-navigation/commit/31bd2c5d7c3b33febebcdae0c6621af0ed7ad09c

Then you can intercept with the same navigator events as you use for nav bar button actions:

onNavigatorEvent (event) {
  if (event.type === 'DidFocus') {
    this.doSomething()
  }
}

All 19 comments

Hey @lprhodes We're going to add life cycle events to the screens, this should give us indication when a screen is displayed after tab press or back button press etc.

@guyca will those life cycle events be available soon? I need something like viewWillAppear to update list view after adding a record to the list. Thank you.

@lprhodes : can you elaborate the mechanism you're using to achieve that kind of 'DidFocus' event with react-native-navigation? Thanks in advance.

Hi @phuna,

I've just forked in order to integrate this now - I imagine the implementation @guyca has in mind will be vastly different but it achieves what I need right now.

It requires amends to both RNC and RNN:

https://github.com/lprhodes/react-native-controllers/commit/f6f0ba1b0fe5e0d0e0fc1d7a232b124a88dce16b

https://github.com/lprhodes/react-native-navigation/commit/31bd2c5d7c3b33febebcdae0c6621af0ed7ad09c

Then you can intercept with the same navigator events as you use for nav bar button actions:

onNavigatorEvent (event) {
  if (event.type === 'DidFocus') {
    this.doSomething()
  }
}

Hi @lprhodes : Thanks a lot for sharing

is this feature implemented yet?

Nope. soon. first, RN31, merge controllers, and a bunch of redesign :)

Ok, Thanks for the info @DanielZlotin !
You guys are awesome!

This would be great to have on Android too!

Any updates on this? What is best way to implement for now?

any update?

Any updates about this?

follow the progress in this branch

Is 2.0.0 done and 2.1.0 developing?

@musicode Yes, As Daniel said in https://github.com/wix/react-native-navigation/issues/150#issuecomment-280913247, v2 is under development.

that is said锛宻creen lifecycle is supported, right?

Yes.

v2 branch is supported for RN0.40 ?

I am confused by master branch and v2 branch.

v2 branch is under development and not production ready.

Was this page helpful?
0 / 5 - 0 ratings