Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

transitionTo does not pass props to routes of depth higher than 1 #12

Open
AleCaste opened this issue Apr 20, 2016 · 3 comments
Open

transitionTo does not pass props to routes of depth higher than 1 #12

AleCaste opened this issue Apr 20, 2016 · 3 comments

Comments

@AleCaste
Copy link

Hello
If I have two components Home and About, and I have my routes defined the following way:

<Router {...this.props} platform="android" defaultTransition={Transitions.None}>
  <IndexRoute name="home" component={Home} />
  <Route name="about1" component={About} />
</Router>

Then on the Home component I can call this.context.transitionTo('about1', { text:'Hello' }); and when doing so the About component is mounted and within its constructor I call console.log(props) and see the expected result: { text: 'Hello' }

BUT... if I have routes defined with a depth higher than one...

<Router {...this.props} platform="android" defaultTransition={Transitions.None}>
  <IndexRoute name="home" component={Home} />
  <Route name="about1" component={About} >
    <Route name="about2" component={About} >
      <Route name="about3" component={About} >
        <Route name="about4" component={About} />
      </Route>
    </Route>
  </Route>
</Router>

and from the Home component I call this.context.transitionTo('about1/about2/about3/about4', { text:'Hello' });, the About component is mounted but I don't get the expected props object when calling console.log(props) from the constructor. I get something much more complex like:

{ children:
  { '$$typeof': 60103,
    type: { [Function] displayName: 'RouteWrapper' },
    key: null,
    ref: null,
    props:
     { parent:
        { [Function: About]
          contextTypes:
          ...
... etc ...

I should get { text: 'Hello' } since that is the object I am giving to the transitionTo method, but is not happening.
Is this a bug????

Thanks!
Alex

@jcgertig
Copy link
Owner

Can you update to the most recent version and test

@AleCaste
Copy link
Author

Hello, I am trying to test this issue but after upgrading to rn-router v2.4.2 I am unable to run a really simple app using your router (I am using react-native v0.24.1).

'use strict';
const React = require('react-native');
const {
  AppRegistry,
  Component,
  Text,
} = React;
const ReactRouter = require('rn-router');
const { Router, IndexRoute, Route, Transitions } = ReactRouter;
// ----------------------------------------------------------------------------
var Sample = React.createClass({
  render: function() {
    return (<Text>Hello</Text>);
  }
});
var Routes = React.createClass({
  render: function() {
    return (
      <Router {...this.props} defaultTransition={Transitions.Fade}>
        <IndexRoute name="login" component={Sample} />
      </Router>
    );
  }
});
class App extends Component {
  constructor(props, context) {
    super(props, context)
  }
  render() {
    return (
      <Routes platform="android" />
    );
  }
}
// ----------------------------------------------------------------------------
AppRegistry.registerComponent('react_native_app1', () => App);

When I run the above, I get Element-type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

So it seems I am stuck and now I cannot check the issue itself.

dede

@jcgertig
Copy link
Owner

Should be fixed now

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants