Retrieving Data from 1 Screen to another Screen to render (React Native Javascript)

Question

I have a screen that contains an array of objects with information such as the path towards images. I wish to retrieve this data from this screen from another screen when the screen loads.

I'm really confused on how to retrieve the data as most people are passing data rather than retrieving it. I have photos to illustrate what I'm asking.

Here I have my objects from my 1stScreen. And then in my 2ndScreen I wish to render imageSource from the 1stScreen as the item.imageSource as an imagelist. How would I retrieve the objects from the 1stScreen to have access to them in the 2ndScreen?

1stScreen

import React from 'react';
import { StyleSheet, View, FlatList, ScrollView } from 'react-native';

export default class CaterpillarObjectList extends React.Component {
    render() {

const blackswallowtailimageList = 
    [{key:'blackSwallowTail01', imageSource: require('../assets/ArboretumPhotos/Black_Swallowtail/blackswallowtail1.jpg')},
    {key:'blackSwallowTail02', imageSource: require('../assets/ArboretumPhotos/Black_Swallowtail/blackswallowtail2.jpg')},
    {key:'blackSwallowTail03', imageSource: require('../assets/ArboretumPhotos/Black_Swallowtail/blackswallowtail3.jpg')},];

2ndScreen

(Note: I called imageList in the 2ndScreen but I want to retrieve imageList as blackswallowtailimageList from the 1stScreen)

    {imageList.length > 0 ? 
                      <FlatList horizontal = {true} data={imageList}
                        renderItem={({item})=> (
                          <View style={{borderBottomColor:'#999', padding:10}}>  
                           <View>
                            <Image style ={ {width: 300, height: 300}} source={item.imageSource}/>
                          </View>
                        </View>   
                          )} />

Answer 1

When navigating from one Screen 1 to Screen 2 , you can pass parameters and retrieve them in Screen 2.

In your case, you can pass the imageList as you are navigating. Like the example below,

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => {
            /* 1. Navigate to the Details route with params */
            this.props.navigation.navigate('Details', {
              itemId: 86,
              otherParam: 'anything you want here',
            });
          }}
        />
      </View>
    );
  }
}

class DetailsScreen extends React.Component {
  render() {
    /* 2. Get the param, provide a fallback value if not available */
    const { navigation } = this.props;
    const itemId = navigation.getParam('itemId', 'NO-ID');
    const otherParam = navigation.getParam('otherParam', 'some default value');

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Text>itemId: {JSON.stringify(itemId)}</Text>
        <Text>otherParam: {JSON.stringify(otherParam)}</Text>
        <Button
          title="Go to Details... again"
          onPress={() =>
            this.props.navigation.push('Details', {
              itemId: Math.floor(Math.random() * 100),
            })}
        />
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate('Home')}
        />
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}

Note: I can't help as you haven't shared the full code with us. But, I hope you get the main idea of sharing data between two different screens.

There are more examples at: Passing Parameters To Routes

Let me know if this isn't the answer you are looking for.