React-native-router-flux: onEnter

Created on 15 Dec 2015 · 8Comments · Source: aksonov/react-native-router-flux

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?

Source

skeie

Most helpful comment

@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.

lynndylanhurley on 28 Jan 2016

👍4

All 8 comments

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.

chetstone on 15 Dec 2015

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

skeie on 15 Dec 2015

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

aksonov on 13 Jan 2016

@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>