Depending on which current route, I am trying to change up styles like the following, but getting an error: 'route is not defined'. How can I go about referencing the current route: route.name in the navigationBar={}?

<Navigator
 configureScene={...}
 initialRoute={...}
 renderScene={...}
navigationBar={<Navigator.NavigationBar style={route.name == 'Home' ? styles.homeNavBar : styles.normalNavBar} .../>}
/>

UPDATE

Here is my current set up in index.ios.js:

class practice extends Component {
  constructor(){
    super()
  }

  renderScene(route, navigator){
    return (
        <routeponent navigator={navigator} {...route.passProps}/>
    )
  }

  configureScene(route, routeStack) {...}

  render() {
    return (
        <Navigator
          configureScene={this.configureScene}
          initialRoute={{name: 'Login', ponent: Login}}
          renderScene={(route, navigator) => this.renderScene(route, navigator)}
          style={styles.container}
          navigationBar={
            <Navigator.NavigationBar
              style={route.name == 'Home' ? styles.homeNavBar : styles.normalNavBar} //This is what I am trying to achieve
              routeMapper={NavigationBarRouteMapper}
            />
          }
        />
    );
  }
}

UPDATE

class practice_style extends Component{

  renderScene(route, navigator){
    this._navigator = navigator

    return (
        <routeponent navigator={navigator} {...route.passProps}/>
    )
  }

  configureScene(route, routeStack) {...}

  getNav = () => {
    return this._navigator
  }

  render() {
    const routes = this.navigator.getCurrentRoutes();
    route = routes[routes.length-1];

    return (
        <Navigator
          configureScene={this.configureScene}
          initialRoute={{name: 'Home', ponent: Home}}
          renderScene={(route, navigator) => this.renderScene(route, navigator)}
          style={styles.container}
          navigationBar={
            <Navigator.NavigationBar
              style={route.name == 'Home' ? styles.homeNavBar : styles.normalNavBar}
              routeMapper={NavigationBarRouteMapper}
            />
          }
        />
        )
    }
}

Depending on which current route, I am trying to change up styles like the following, but getting an error: 'route is not defined'. How can I go about referencing the current route: route.name in the navigationBar={}?

<Navigator
 configureScene={...}
 initialRoute={...}
 renderScene={...}
navigationBar={<Navigator.NavigationBar style={route.name == 'Home' ? styles.homeNavBar : styles.normalNavBar} .../>}
/>

UPDATE

Here is my current set up in index.ios.js:

class practice extends Component {
  constructor(){
    super()
  }

  renderScene(route, navigator){
    return (
        <route.ponent navigator={navigator} {...route.passProps}/>
    )
  }

  configureScene(route, routeStack) {...}

  render() {
    return (
        <Navigator
          configureScene={this.configureScene}
          initialRoute={{name: 'Login', ponent: Login}}
          renderScene={(route, navigator) => this.renderScene(route, navigator)}
          style={styles.container}
          navigationBar={
            <Navigator.NavigationBar
              style={route.name == 'Home' ? styles.homeNavBar : styles.normalNavBar} //This is what I am trying to achieve
              routeMapper={NavigationBarRouteMapper}
            />
          }
        />
    );
  }
}

UPDATE

class practice_style extends Component{

  renderScene(route, navigator){
    this._navigator = navigator

    return (
        <route.ponent navigator={navigator} {...route.passProps}/>
    )
  }

  configureScene(route, routeStack) {...}

  getNav = () => {
    return this._navigator
  }

  render() {
    const routes = this.navigator.getCurrentRoutes();
    route = routes[routes.length-1];

    return (
        <Navigator
          configureScene={this.configureScene}
          initialRoute={{name: 'Home', ponent: Home}}
          renderScene={(route, navigator) => this.renderScene(route, navigator)}
          style={styles.container}
          navigationBar={
            <Navigator.NavigationBar
              style={route.name == 'Home' ? styles.homeNavBar : styles.normalNavBar}
              routeMapper={NavigationBarRouteMapper}
            />
          }
        />
        )
    }
}

• javascript
• ios
• react-native
• reactjs

Share Improve this question Follow edited Jul 27, 2016 at 18:55 Jo Ko asked Jul 24, 2016 at 20:39 Jo KoJo Ko 7,5751616 gold badges6969 silver badges128128 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

It is an array, just pop the last one off the stack.

var currentRoute = navigator.getCurrentRoutes().pop();

Navigator.getCurrentRoutes clones the routes array so you can't destroy it by pop'ing something off it.

You can set reference of Navigator like this

 render () {
   //To access route
   var routeName;
   if(this.navigator) {
      const routes = this.navigator.getCurrentRoutes();
      routeName = routes[routes.length-1].name;
   }

   return (
    <Navigator
     configureScene={...}
     initialRoute={...}
     renderScene={...}
     ref={(nav) => this.navigator = nav}
     navigationBar={<Navigator.NavigationBar 
       style={routeName == 'Home' ? styles.homeNavBar : styles.normalNavBar} .../>}
    />
 );
}

Above function returns array of routes, last element in that array will be your current route.

Hope that helps.

I use navigator.jumpTo() to move through routes, so navigator.getCurrentRoutes() returned the last of my available routes, rather than the current route.

To get the current route, I used navigator.navigationContext.currentRoute