Pass Data when Changing Routes in React Native

InstructorTyler McGinnis

Share this video with your friends

Send Tweet

As we build application components, we will need to pass data along as we change routes and bring them into view. With React Native we can do this easily and deliver the appropriate data to our native Dashboard component.

Eduardo Rabelo
Eduardo Rabelo
~ 6 years ago

hey guys,

in the video is missing the moment when we required the "Dashboard.js" in the top "Main.js" file,

// Main.js file
var React = require('react-native');
var api = require('../Utils/api');
var Dashboard = require('./Dashboard');

E

Tyler McGinnis
Tyler McGinnis(instructor)
~ 6 years ago

Good catch! Not sure why that's not shown.

Marty
Marty
~ 5 years ago

When Tyler shows the "This is the dashboard" screen in the simulator, I tried to duplicate it and got an error similar to something like: Invariant Violation string expected but object received. Check the render method of NavigatorIOS.

That's not the exact wording but close. I'm unable to replicate it, but copying Main.js and Dashboard.js from github fixed the issue.

Brendan
Brendan
~ 5 years ago

I'm getting the following error message: Invariant Violation: Objects are not valid as a React child (found: object with keys{ --keys here-- }. If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of Text.

I've been trying various solutions, and looking for answers but haven't come up with anything yet. Also, I noticed someone had a similar issue a few months ago and copied the Main and Dashboard files from GitHub and it fixed the issue, however I tried that and had no luck.

Any idea on why this is happening?

Gunars
Gunars
~ 5 years ago

I have exactly the same issue. Got the same error message. Seems it's related with <Text> {this.props.userInfo} </Text>, because when I'm removing from Dashboard.js, there is no error message.

ephemera
ephemera
~ 5 years ago

I was getting the following error too: 2016-01-04 16:55:42.062 [error][tid:com.facebook.React.RCTExceptionsManagerQueue] Unhandled JS Exception: Invariant Violation: Objects are not valid as a React child (found: object with keys {login, id, avatar_url, gravatar_id, url, html_url, followers_url, following_url, gists_url, starred_url, subscriptions_url, organizations_url, repos_url, events_url, received_events_url, type, site_admin, name, company, blog, location, email, hireable, bio, public_repos, public_gists, followers, following, created_at, updated_at}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of Text. 2016-01-04 16:55:42.093 [warn][tid:main][RCTNavigator.m:507] Cannot adjust current top of stack beyond available views

I believe this is due to Text not being able to render an object as text. Changing {this.props.userInfo} to {JSON.stringify(this.props.userInfo)} should fix it

Tyler McGinnis
Tyler McGinnis(instructor)
~ 5 years ago

Yup this is a new change to React as of .14 I believe. As you mentioned, JSON.stringify will fix it.

Tiago Ferreira
Tiago Ferreira
~ 5 years ago

For those trying to follow this using Navigator instead of NavigatorIOS, I use the following renderScene function:

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

This way your code looks pretty much like the one for NavigatorIOS

Dorian LUPU
Dorian LUPU
~ 5 years ago

I'm having Possible Unhandled Promise rejection(id: 0) when I try to search for user. Some hints here? I'm using the Navigator rather than NavigatorIOS.

Edgar
Edgar
~ 5 years ago

Had the same problem brotha, glad to see I wasn't the only one! See you at the office :-D

Ahmed Khaled A. Mohamed
Ahmed Khaled A. Mohamed
~ 4 years ago

This is my effort to extend the github notetaker app. I updated the code to support latest versions of React and React Native, I also extended the app to use react-navigation which the latest navigation library supporting both iOS and Android. I added Redux to manage the store and used Redux-Sagas to handle asynchronous fetch of data. I would appreciate it if you check it out and give it thumbs up if its helpful. I will continue extending to support more features. https://github.com/ahmedkamohamed/react-native-navigation-redux-sagas