onEnter

[skeie]

Hi,

In the example below, the onEnter works for Route with the name routeDetail, but now fot the Route with name home

<Router hideNavBar>
                <Route  onEnter={(route)=>{console.log(route.getName()); return true;}} name="routeDetail" component={RouteDetail} {...props} schema="withoutAnimation" />
                <Route name="map" component={Map} {...props} schema="default" />
                 .......
                <Route name="tabbar" initial>
                    <Router footer={TabBar} style={{backgroundColor: vars.navColor}} hideNavBar>
                        <Route onEnter={(route)=>{console.log(route.getName()); return true;}} name="home" schema="tab" component={Home} {...props} imageSource={require('image!home')} />
                  ......
                </Route>
            </Router>

Is it possible to fix it?

[chetstone]

You have a route as a child of a route? I think you need to wrap it with a router:

<Route name="tabbar" initial>
      <Router footer={TabBar} showNavigationBar={false}>
                        <Route onEnter={(route)=>{console.log(route.getName()); return true;}} name="home" schema="tab" component={Home} {...props} imageSource={require('image!home')} />

Don't know if that will fix your problem or not, but what you have doesn't look right.

[skeie]

Sorry, we have a Route then a Router then a Route. I updated the example now.

[aksonov]

2.x version doesn't have onEnter and i'm thinking is it necessary to have? Why onPop/onPush/onReplace is not enough?

[lynndylanhurley]

@aksonov - onEnter is useful to me because most of the time it doesn't matter if a screen is visited using onPop, onPush, or onReplace.

One example is authentication. This is what I would like to do:

// checks if user is signed in, otherwise redirects to login.
function isSignedIn() {
  if (!store.getState().signedIn) {
    Actions.LogIn();
  } else {
    return true;
  }
}

// ...

<Router>
  // non-authenticated users can only see these routes
  <Route name="Auth">
    <Router>
      <Route name="LogIn" initial={true} component={LogIn} />
      <Route name="SignUp" component={SignUp} />
    </Router>
  </Route>

  // authenticated users can see these routes
  <Route name="Account" onEnter={isSignedIn}>
    <Router>
      <Route name="Dashboard" component={Dashboard} initial={true} />
      <Route name="Messages" component={Messages} />
    </Router>
  </Route>
</Router>

In order to accomplish this with onPop, etc. I would need to add the isSignedIn method to the onPop, onPush, and onReplace handlers of each individual route. I would rather have a single onEnter handler that operates at the parent Route level.

[JonasJonny]

+1

[aksonov]

PR would be welcome! You need to add this functionality into ExRouter

[aksonov]

3.0 is released. Closing it for now, because it is for outdated version (2.x)

[diegorodriguesvieira]

how can I get onEnter on 3.x?