Passing Pros via Navigator React Native

Question

For some odd reason, my app is not passing the article props via the navigator to the details page, those the variable "entry" does contain the correct information (and isn't null). Here is my main.js that controls the navigator routes:

//register on both android and ios index.js files
var React = require('react-native');
var Parse = require('parse/react-native');
var SplashScreen = require('@remobile/react-native-splashscreen');
var {
    View, 
    StyleSheet, 
    Text, 
    Navigator,
    StatusBarIOS,
} = React;

//authentication components 
var Signin = require('./components/authentication/signin');
var Launch = require('./components/authentication/launch');
var Signup = require('./components/authentication/signup');
var MainView = require('./components/experience/main-view');
var Onboarding = require('./components/authentication/onboarding');
var Introduction = require('./components/authentication/introduction');
var ArticleDetails = require('./components/experience/exp_base_components/article-details.js');

//we have router flux enabled and react-native-navbar but we
//need time to change a few things around to enable more customized 
//component transitions 
var ROUTES ={
    //relates to imported component to display
    //initial route is am object with the name of the route within this variable
    launch: Launch,
    signin: Signin, 
    signup: Signup,
    introduction: Introduction,
    onboarding: Onboarding,  
    mainview: MainView, 
    articledetails: ArticleDetails, 
}

module.exports = React.createClass({
    componentWillMount: function() {
        //executed when component shows on screen
        //tells app to initialize parse and facebook js sdk

    }, 
    componentDidMount: function() {
        SplashScreen.hide();
    }, 
    renderScene: function(route, navigator) {
        //when navigator is initially shown it has to render initial route 
        //render a component and return it, whatever we return is placed on stack
        //add navigator property into this component for all app access
        var Component = ROUTES[route.name]; //ROUTE['signin'] => Signin
        return <Component route={route} navigator={navigator} />;
    }, 
    transition: function(route) {
        return ROUTES[route.name].transition;
    },
    render: function() {
        return (
            <Navigator 
                style={styles.container}
                initialRoute={{name: 'launch'}}
                renderScene={this.renderScene}
                configureScene={ () => { return Navigator.SceneConfigs.FloatFromRight; }} />
        );
    }
});

var styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});

And here is the home page that contains the articles (which, when pressed should route to the articlesDetails custom component page):

onArticleDetailsPress: function(entry) {
    //forward to sytled web view of article details given link
    console.log("onArticleDetailsPress"); 
    console.log(entry);
    //pass props to details page
    this.props.navigator.push({
        name: 'articledetails', 
        passProps: {
            entry: entry, 
        }
    });
},

Answer 1

The problem is that you are never actually using passProps in your renderScene. Try this instead:

renderScene: function(route, navigator) {
  var Component = ROUTES[route.name];
  return (<Component route={route} navigator={navigator} {...route.passProps} />);
}