passing react navigation goBack as reference

Question

So When I try to pass in goBack function as a reference it doesn't work for some reason, I need to encapsulate it as an anonymous function for it to work. Is there a reason why this is the case?

I want this to work! (Below)

<Button onPress={this.props.navigation.goBack} />

But only this works (Below)

<Button onPress={() => this.props.navigation.goBack()} />

Is this loosing its reference? Thanks!

EDIT: I noticed that the document also uses anonymous function to invoke goBack. Curious why this is the case.

The fat arrow is preserving the this context.

aromero
– aromero

2017-08-09 19:04:42 +00:00
Commented Aug 9, 2017 at 19:04 — aromero
– aromero, Commented Aug 9, 2017 at 19:04

hyb175 · Accepted Answer · 2017-08-09 21:14:01Z

2

The reason why <Button onPress={this.props.navigation.goBack} /> does not work is that goBack expect a null or undefined as the first parameter to have the default behavior of going back just one screen.

When you use the handler like this onPress={this.props.navigation.goBack}, the handler will invoke goBack with the event that is passed back by the handler, i.e. this.props.navigation.goBack(event).

event is not null so the goBack function will try to pass that as a key to the screen to goBack from. https://reactnavigation.org/docs/navigators/navigation-prop#goBack-Close-the-active-screen-and-move-back. Then, event does not match to any of your pre-defined key, so the routing has no effect.

answered Aug 9, 2017 at 21:14

hyb175

1,2918 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hyb175 Over a year ago

No problem. Glad to help!

Hyunwoo Lim Over a year ago

it is unfortunate that they didn't mention in the doc that goBack is expecting undefined

Christopher Messer · Accepted Answer · 2017-08-09 19:08:08Z

0

Yes, that is your issue most likely.

try: <Button onPress={this.props.navigation.goBack.bind(this)} />

Refer to this point in the docs for overall methodology / cleaner code:

https://facebook.github.io/react/docs/handling-events.html

answered Aug 9, 2017 at 19:08

Christopher Messer

2,09011 silver badges13 bronze badges

2 Comments

Kraylog Over a year ago

I think that goBack is itself an arrow function, and therefore cannot be rebound to a new this.

Hyunwoo Lim Over a year ago

yeah i think so too ^. you can create a variable that's referencing an anonymous function and can pass that function as this.foo and it gets invoked properly.

Collectives™ on Stack Overflow

passing react navigation goBack as reference

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related