How do I debug "Objects are not valid as a React child" react native error

Question

Objects are not valid as a React child (found: object with keys {style, title}). 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 View.

I don't know what to make of the trace I've pasted, because it's not in my code at all. Any ideas would be greatly appreciated! Thanks.

Trace on simulator

index.ios.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Navigator
} from 'react-native';

import Product from './product.js';
import Services from './services.js';
import ProductsList from './productslist.js';
import AddProduct from './addProduct.js';
import {StackNavigator} from 'react-navigation';

const routes = [
  {
    title : 'Services',
    renderFunc : (navigator) => <Services navigator={navigator} />
  },
  {
    title : 'Marketplace',
    renderFunc : (navigator) => <ProductsList navigator={navigator}/>
  }
];

const stackNavigatorRoutes = {
  Services : {
    screen : Services,
  },
  ProductsList : {
    screen : ProductsList
  },
  Product : {
    screen : Product
  },
  AddProduct : {
    screen : AddProduct
  }
};

const AppNavigator = StackNavigator({
  ...stackNavigatorRoutes,
},
{
    initialRouteName : 'Services',
    navigationOptions : {
        header : {
          style : {
            height : 60,
            backgroundColor : 'cadetblue'
          },
          title : 'ResiShare'
        }
    }
});

class Rs extends Component {
  render() {
    return (
        <AppNavigator />
        // <ProductsList />
        // <AddProduct />
      );
  }
}

I think you should provide part of your code, which responsible of the error. — Meysam Izadmehr
Added the entry point into my app, even though the trace doesn't reference it at all. — inquisitive

inquisitive inquisitive · Accepted Answer · 2017-05-13T19:14:10

The main point of my question was to figure out to debug something like this where the trace doesn't show any of my code.

The answer was to just replace entry point in index.ios.js with something that works and then slowly add back components.

In this particular case, the reason for this fubar-ing was a breaking change from react-navigation (https://github.com/react-community/react-navigation/issues/1413) that I didn't realize I had picked up (I definitely must've done an npm install).

How do I debug "Objects are not valid as a React child" react native error

1 Answers