Passing props through Route

[lopezjurip]

I don't want to implement Flux/Redux, so I need to pass parameters through the Router. I'm trying this approach (in a nutshell):

import React, { Component, Navigator, StyleSheet, View, Text } from 'react-native'
import { Router, Route, Schema, Actions } from 'react-native-router-flux'
import Button from 'react-native-button'


export default class AppRouter extends Component {
  constructor(props) {
    super(props)
    this.state = { items: [0] }
  }

  render() {
    console.log('Item count on Router render:', this.state.items.length);
    return (
      <Router hideNavBar={false}>
        <Schema name="default" sceneConfig={Navigator.SceneConfigs.FloatFromRight}/>

        <Route name="main" schema="default" initial={true} component={Main}
               title="Main" rightTitle="Search" onRight={() => Actions.search()}
               items={this.state.items} />

        <Route name="search" schema="default" component={SearchView}
               onResult={(result) => this.setState(result)} />

      </Router>
    )
  }
}


class Main extends Component {
  constructor(props) {
    super(props)
    this.state = { items: this.props.items || [] }
  }

  componentWillReceiveProps(props) {
    console.log('Item count on componentWillReceiveProps:', props.items.length);
    this.setState({ items: props.items })
  }

  render() {
    console.log('Item count on Main render:', this.state.items.length);
    return (
      <View style={{ marginTop: 64 }}>
        {this.state.items.map((item, i) => <Text key={i}>{item}</Text>)}
      </View>
    )
  }
}


class SearchView extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Button onPress={this.callback.bind(this)}>Close</Button>
      </View>
    )
  }
  callback() {
    Actions.pop()
    this.props.onResult({ items: [1, 2, 3] })
  }
}

It prints:

// App load
Item count on Router render: 1
Item count on Main render: 1
// Press 'Search' button
Item count on componentWillReceiveProps: 1
Item count on Main render: 1
// Press close button
Item count on Router render: 3
Item count on componentWillReceiveProps: 1 // did not pass items
Item count on Main render: 1
Item count on componentWillReceiveProps: 1
Item count on Main render: 1

Am I doing something wrong?

[arqex]

+1
Seems that routes props are stored internally in the constructor and they are never updated again.

Something like this is happening:

// this.state.items === 1
<Route items={ this.state.items } />
// this.props.items inside the route handler will be always 1
// It will never change even if the state of the parent changes

Please, fix this. It's a big stopper from using this library.

[aksonov]

@mrpatiwi It is NOT intended usage of this component (passing 'items'), i don't see any mention of this in documentation. You could propose PR so i could review and apply if it doesn't break anything.

[lopezjurip]

How can I communicate navigation items (left and right buttons) to the component?

[arqex]

In my case I am using freezer as the state holder. I would need to pass the current app state down to the current screen. In the docs is said that I can pass any prop to the route:

<Route appState={ freezer.get() }/>

But the first value is cached so the app is not reacting to the state changes. Props are not passed down as expected, they work like setting an initial value.

[aksonov]

@mrpatiwi Maybe i don't understand the problem. When you call Actions.ROUTE_NAME(params), these params passed to 'component' prop as well to onLeft and onRight props (functions for navigator).

[aksonov]

Closing it for now, because don't understand what the problem is...

[yonahforst]

I'm having the same problem. In my root App.js where I have my Router and Routes, I listen for changes to my state holder (also using freezer.js like @arqex). It looks something like this:

class App extends Component {
  constructor(props) {
    super(props);
    this.state = freezer.get();
  }

  componentDidMount() {
    var self = this;
    freezer.on('update', function(newValue) {
      self.setState(newValue);
   });
  }

  render() {
    return (
      <Router {...this.state}>
        <Route name="login" component={Login} title="Login" initial={true}/>
        <Route name="teamPicker" component={TeamPicker} title="Team picker"/>
        <Route name="mainPlay" component={MainPlay} title="Main Play"/>
      </Router>
    );
  }
}

Since ...this.state is now available as properties in each of the Routes, I would expect them to update whenever the freezer triggers an update to the App.js state

[yonahforst]

For anyone else who comes upon this issue, it seems it's been fixed in master but not yet pushed to npm. Cloning from master and requiring locally, prop changes to the Router now propagate to its Routes

[welbornio]

Thanks for the update. Glad I'm not the only person who got stuck on this.

[keeleycarrigan]

I feel like I'm having the same problem. I'm calling a scene mainEntry and it's calling it, but the object I'm sending through isn't available on the props.

Actions.mainEntry({view: 'SignUp'});

In my mainEntry component the passed data doesn't show up at all. Am I just being a dum dum?

[ospfranco]

@keeleycarrigan I'm having the same issue, did you find a way around it?

[keeleycarrigan]

@ospfranco In general, the problems I've had with this module I have solved by adding some piece of information to the apps overall state. In this instance, I created a view component that's just a shell for another view to be injected into. So after the launch screen the initial scene is this shell and then I set a value on state that the shell uses to load the proper component. I couldn't get the back button on the title bar to work properly either. So I just made my own title bar that I control with a "navigation" key on the app state. Even for all it's problems, this module is still the most straightforward to implement for navigation.

Let me know if that makes sense.