Can not read property '<functionname>' of undefined when using onBack in prerendered scenes

[SebasJK]

Version

Tell us which versions you are using:

• react-native-router-flux v^3.36.0
• react-native v0.35.0

Expected behaviour

Expected sucessfull call to the function '_someFunction', as when the Scenes are placed directly within de router: as such:


<Scene key="login" component={Login} title="Login" onBack={ ()=>this._someFunction() } />

Where '_someFunction' is a function of "class App extends Component{ }"

Actual behaviour

Can not read property '' of undefined

const scenes = Actions.create(

<Scene key="login" component={Login} title="Login" onBack={ ()=>this._someFunction() } />



)

Steps to reproduce

1. recreate sample from https://github.com/aksonov/react-native-router-flux
2. add onBack as shown and the function '_someFunction' within class App extends Component
3. use const scenes = Actions.create( ... )

[dragfire]

So if _someFunction() is in Login component then what you could do is:

<Scene key="login" component={Login} title="Login" onBack={ ()=>{
     Actiions.refresh({triggerSomeFunction: true});
} } />

// then in your login component

componentWillReceiveProps(props) {
     if(props.triggerSomeFunction) { 
             // Now you can do
            this._someFunction();
     }
}

[SebasJK]

Hello,
yes that would work but '_someFunction' is a function of "class App extends Component{ }" not of login. the onBack could be attached to any scene.

It looks like a scope issue, as the function is not found.

[SebasJK]

This might give a better view of what the issue is

First declare scenes:

const scenes = Actions.create(
  <Scene key="root">
    <Scene key="login" component={Login} title="Login" onBack={ ()=>this._someFunction() } />
    <Scene key="register" component={Register} title="Register"/>
    <Scene key="home" component={Home}/>
  </Scene>
)

Then within the App:

class App extends Component {

  _someFunction() {
     console.log('Debug message: aFunction called');
   }

  render() {
    return (
        <Router
          scenes          = {scenes}
          hideNavBar      = {true}
        />
    )
  }
}

The problem is, that when the button is clicked, it generates the error this._someFunction() is not a function.

There is no issue if we do it like this:

class App extends Component {

  _someFunction() {
     console.log('Debug message: aFunction called');
   }

  render() {
    return (
        <Router
          hideNavBar      = {true}
        >
       <Scene key="root">
         <Scene key="login" component={Login} title="Login" onBack={ ()=>this._someFunction() } />
         <Scene key="register" component={Register} title="Register"/>
         <Scene key="home" component={Home}/>
       </Scene>
       </Router>
    )
  }
}