Passing Props / State In React-Native Navigator

React Native newbie here. I'm trying to build a simple React Native app for practice that is essentially just a multi-page contact form. I'm having trouble figuring out the best wa

Solution 1:

I think the the problem it's with the scope. When setting the renderScene prop to the navigator, you are not binding that function to the actual class, therefore when the navigatorRenderScene gets executed, the scope it's not the same as testFunc.

Try changing this line of code:

navigatorRenderScene(route, navigator) {
  //...
}

For this:

navigatorRenderScene = (route, navigator) => {
  // ...
}

The arrow function will bind the navigatorRenderScene to the class, therefore this.testFunc will exist there.

Other options to do the binding

If you don't want to use an arrow function, you could try something like this in the constructor.

// First options
this.navigatorRenderScene = this.navigatorRenderScene.bind(this)

Or you can also use the bind method directly on the callback

// Second option
renderScene={
  this.navigatorRenderScene.bind(this)
}

Or an arrow function as well

// Third option
renderScene={
  (route, navigator) => this.navigatorRenderScene(route, navigator)
}

Let me know if this works. Good luck!