youngreg21
commented
5 years ago 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
kelset
grabbou
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 (
} }
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) => ( {
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;