CODEWITHSUNDEEP
react-native
youngreggie21
youngreggie21

Reputation: 1

Pass a Javascript object to another screen using react-navigation

I have a react-native app (4 screens) that fetches data using an Azure function (returns an array of json objects). The first screen renders overall state of datacenters based on telemetry data (i.e. temp and humidity, number of alerts etc...). The second screen is just a list of all the datacenters where you can drill down to view the temp and humidity for that location. This is where I have the problem. I set the state of my react-native app with the fetched data and get everything parsed correctly on the first screen. In expo on my windows machine, all screens work (including an alerts screen where I create another javascript object that is a subset of the data I initially pull in). I need to compile the code for IOS so I move over to a MAC, initialize a new project, and I get the first screen to work, but the subsequent screens don't work. I get an invariant violation as the param I'm passing is a javascript object and string is expected. I think the issue is react-navigation version where it's 2.18.3 on my windows machine and 3.0 on the MAC. Can I modify the the package.json on the MAC to use the same version and just copy over the react-navigation folder from my windows machine to the MAC to get this working the way I need it to?

I have not tried manually setting the react-navigation version in package.json and moving the module folder for react-navigation to the mac from my pc yet, but will try this. Any feedback on what I can do if this doesn't work would be greatly, and I mean greatly appreciated!!!!

Here is the code I'm using on the MAC and pc for the screens

I pass the data from my primary component where the data is fetched:

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

I catch the data in my next screen and map it out using .map function (this works on my windows machine. Same code doesn't work on MAC when using simulator):

const { navigation } = this.props;
const datacenterdata = navigation.getParam('DCdata');
return (
    <ScrollView>
        <List>
            {
                datacenterdata.map((item, i) => (
                    <ListItem
                        key={i}
                        title={item.Datacenter}
                        onPress={() => {
                            this.props.navigation.navigate('Details', {      
                                temp :item.Temp, humid: item.Humid, dc: item.Datacenter,                                 
                            });
                        }}
                     />
                ))
            }
      </List>
</ScrollView>

I need my second screen to be able to access the javascript object I'm passing it, and render the items as a list (i.e the dc location only). I'm getting an invariant violation however, as the method I'm using to pass the data is expecting a string.

Upvotes: 0

Views: 138

Answers (1)

Hardik Virani
Hardik Virani

Reputation: 1755

You need to change your retrieve type instead of yours.

Try below line to get value from navigation.

this.props.navigation.state.params.DCdata

It is working for me to getting value from navigation while react-navigation used.

Thank you

Upvotes: 1

Related Questions