Invariant Violation: Element type is invalid: expected a string (for built-in-components) or a class/function (for composite components) but got: undefined

[youngreg21]

Environment

React Native Environment Info:
System:
OS: macOS 10.14
CPU: (4) x64 Intel(R) Core(TM) i5-5350U CPU @ 1.80GHz
Memory: 33.23 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.15.0 - /usr/local/bin/node
npm: 6.4.1 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
IDEs:
Xcode: 10.0/10A255 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.3 => 16.6.3
react-native: 0.58.3 => 0.57.1
npmGlobalPackages:
react-native-cli: 2.0.1

Description

Invariant violation when trying to send javascript object using this.props.navigation.navigate to another screen that will list properties of that object in a List after mapping the object using .map function. I can send a single property of the object from the initial screen and render the data in the second screen after sending using this.props.navigation.navigate. The thing is, this was working a couple of days ago with code as is. Not sure what happened that made this not work anymore. Also, I started developing this app on my pc and rendering using expo before moving over to a MAC for iOS development. It works fine when I pull the app up on my phone from expo with the code running on my pc

Reproducible Demo

App.js code:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import HomeScreen from './components/HomeScreen.js';
import DataCenterListScreen from './components/DataCenterListScreen.js';

const RootStack = createStackNavigator(
{
Home: HomeScreen,
Datacenters: DataCenterListScreen
},
{
initialRouteName: 'Home',
navigationOptions: {
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#800000',
headerTitleStyle: {
fontWeight: 'bold',
},
},
},
);

export default createAppContainer(RootStack);

HomeScreen code:

import React, { Component } from 'react';
import { StyleSheet, View, ScrollView } from 'react-native';
import { List, ListItem, Text, Card, Button } from 'react-native-elements';

class HomeScreen extends React.Component {
constructor(props)
{
super(props);
this.state = {
data : [
{id:1, dc: "ASH", temperature: 80, humidity: 60, tempstate: "norm", humidstate: "high" }, {id:1, dc: "ASH", temperature: 80, humidity: 60, tempstate: "norm", humidstate: "high" }, {id: 2, dc: "MON", temperature: 64, humidity: 63, tempstate: "norm", humidstate: "norm" },{id: 3, dc: "YRK", temperature: 62, humidity: 61, tempstate: "norm", humidstate: "norm"},{id: 4, dc: "FOR", temperature: 68, humidity: 55, tempstate: "high", humidstate: "norm" },{id: 5, dc: "MGT", temperature: 70, humidity: 44, tempstate: "norm", humidstate: "norm"},{id: 6, dc: "MST", temperature: 75, humidity: 30, tempstate: "norm", humidstate: "norm" },{id: 7, dc: "FLN", temperature: 71, humidity: 35, tempstate: "norm", humidstate: "norm"}
],
};
}
static navigationOptions = {
title: 'Testing Shit',
};
render() {
var buttoncolor = 'grey'
var tempcolor = 'green';
var humidcolor = 'green';
var buttonstate = 'No Alerts';
var icon = 'check';
var iconcolor = 'green';
var db = true;
var allTelemetryData = [];
var alerts = [];
var tempalert = 0;
var humidalert = 0;

for (var i = 0, l = this.state.data.length; i <l; i++) {
allTelemetryData.push({
dc: this.state.data[i].dc,
temperature: this.state.data[i].temperature,
humidity: this.state.data[i].humidity
});
if (this.state.data[i].tempstate == "high"){
tempalert++;
tempcolor = 'red';
icon = 'exclamation-circle';
alerts.push({
dc: this.state.data[i].dc,
temperature: this.state.data[i].temperature,
humidity: this.state.data[i].humidity,
tempColor: tempcolor,
alerttitle: this.state.data[i].dc + " - " + 'High Temperature Alert'
});
}

if (this.state.data[i].humidstate == "high") {
humidalert++;
humidcolor = 'red';
icon = 'exclamation-circle';
alerts.push({
dc: this.state.data[i].dc,
temperature: this.state.data[i].temperature,
humidity: this.state.data[i].humidity,
humidColor: humidcolor,
alerttitle: this.state.data[i].dc + " - " + 'High Humidity Alert'
});
}
}
var buttoncolor = 'grey';
var tempcolor = 'green';
var humidcolor = 'green';
var buttonstate = 'No Alerts';
var db = true;
var dcnum = this.state.data.length;
if(tempalert > 0){
tempcolor = 'red';
buttonstate = 'Click Here to View Alert(s)';
db = false;
icon = 'exclamation-circle';
iconcolor = 'red';
}
if(humidalert > 0){
humidcolor = 'red';
buttonstate = 'Click Here to View Alert(s)';
db = false;
icon = 'exclamation-circle';
iconcolor = 'red';
}
return (


{

<Text style = {{textAlign: 'center', fontSize: 30, fontWeight: '500'}}>Sensor Locations Online:
<Text style ={{textAlign: 'center', fontSize: 25}}>{dcnum}/7

}



<Text style ={{textAlign: 'center', fontSize: 30, fontWeight: '500'}}>High Temperature Alerts:
<Text style={{textAlign: 'center', fontSize: 25, fontWeight: '700', color: tempcolor}}>{tempalert}
<Text style ={{textAlign: 'center', fontSize: 30, fontWeight: '500'}}>High Humidity Alerts:
<Text style={{textAlign: 'center', fontSize: 25, fontWeight: '700', color: tempcolor}}>{humidalert}
<Button
disabled = {db}
backgroundColor= {buttoncolor}
accessibilityState = {buttonstate}
title= {buttonstate}
leftIcon={{name: icon, type: 'font-awesome', color: iconcolor}}
onPress={() => {
this.props.navigation.navigate("Alerts", {alertdata: alerts,});
}}
/>



{

<Button
backgroundColor = 'grey'
title = 'View Complete Data Center List'
onPress={() => {
this.props.navigation.navigate("Datacenters", {DCdata: this.state.data});
}}
/>

}

); } }

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
borderColor: '#999',
borderWidth: 3,
justifyContent: 'center'
},
subContainer: {
flex: 1,
paddingBottom: 20,
borderBottomWidth: 2,
borderBottomColor: '#CCCCCC',
}
})

export default HomeScreen;

DataCenterListScreen code:

import React, { Component } from 'react';
import { View, Text, StyleSheet, ScrollView } from 'react-native';
import { List, ListItem, Card } from 'react-native-elements';
//import ( Provider ) from 'react-redux';
//import Icon from 'react-native-vector-icons/FontAwesome';

class DataCenterListScreen extends React.Component {

static navigationOptions = {
title: 'All Data Centers',
};
render() {
const { navigation } = this.props;
const datacenterdata = navigation.getparams('DCdata');
return (


{
datacenterdata.map((item, i) => (
<ListItem
key={i}
title={item.dc.toString()}
onPress={() => {
this.props.navigation.navigate('Details', {
temp: item.temperature, humid: item.humidity, dc: item.dc,});
}}
/>
))
}


)
}
}

const styles = StyleSheet.create({
container: {
paddingTop: 10,
alignItems: 'flex-start'
},
button: {
marginBottom: 30,
width: 260,
alignItems: 'flex-start',
backgroundColor: '#2196F3'
},
buttonText: {
padding: 20,
color: 'white'
}
});

export default DataCenterListScreen;

[youngreg21]

I've been up and down the possible solutions for this and all over StackOverflow. 2nd day and no progress. I don't think this has anything to do with importing exporting components. I have the project working on my pc currently using expo (same code, react-native version 0.57.1 etc). I am now developing an app for iOS so i moved over to a Mac. The code was working in the iPhone simulator for several days and then it stopped working. I'm just passing data that I've used to set the state of my app to another page as a javascript object (same way i'm doing it on my pc and its working):

I have done some testing, started a new app from scratch, etc... I'm using the .map function to render the data in the subsquent screens when components are clicked on from the primary homepage screen (first pic posted). I don't know if this an issue with the listItem module or the .map function. I know that I can display properties of the object I am passing in a card component easily, so I know the data is not an issue. Please help to resolve. Let me know if further information on this is needed.

[react-native-bot]

Can you run react-native info and edit your issue to include these results under the Environment section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] under Environment to let us know.

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.58 and verify if the issue still exists.

The "Resolution: Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

[youngreg21]

Its the same issue with the new version. Since this was working at some point before on the MAC, I downgraded to 0.57.1 (which matches the version on my pc where the code is working). And the code still is not working

[kelset]

As you can see, this issue is most likely related to your code and not to React Native per se'.

Maybe it's something related to a different version of react-nav being used when you switched over? Probably if you look for this issue over in the expo & react-nav repos you'll find better solutions. Or you can maybe try for help/code pairing over at Reactiflux?

[youngreg21]

Uhhhh, not seeing how this could be an issue with the code when the code was working Monday and after performing react-native upgrade, everything just breaks. I'm not understanding why this.props.navigation.navigate in the HomeScreen code is expecting a string when I put this code on a MAC and won't except my js object array. I'm using this exact same method on my pc and it works:

[grabbou]

There could be some changes that were introduced between React Native versions that React Navigation might want to handle. We can't really help you since this requires knowledge of React Navigation, its release cycle and bugs they might be facing.

I know this might be frustrating, but it's better to open this issue in React Navigation (or ask for help in their respective community channel).

Thank you