title: React Native Context not updating across files and screens
body: <p>I am attempting to use Context to create a global array which exists across screens. My setup includes a screen which displays the contents of the array, and a navigation button to the second screen, which contains a button to add an element to the list.</p>
  <p>I would like the list on the first page to print an additional &quot;Hello World&quot; every time the add button is pressed, as well as display an initial item, &quot;Hello World Initial.&quot; However, with the code below I have only been able to display the initial value, and my attempts at adding more have failed.</p>
  <p>There are no errors thrown, pressing the button just doesn't appear to do anything. Here is a snack of the project: <a href="https://snack.expo.dev/@figbar/context-across-files-and-screens" rel="nofollow noreferrer">https://snack.expo.dev/@figbar/context-across-files-and-screens</a>, and here is the code contained within it:</p>
  <p>App.js:</p>
  <pre><code>import { TestList, TestListProvider } from './File1';
  import * as React from 'react';
  import {View, Text, Button } from 'react-native';
  import { NavigationContainer } from '@react-navigation/native';
  import { createStackNavigator } from '@react-navigation/stack';
  import Screen2 from './Screen2';
  
  
  const Stack = createStackNavigator();
  
  
  function HomeScreen({ navigation }) {
     const _retrievedList = React.useContext(TestList);
    const populate = (arg:any) =&gt; {
      return arg.map((val, index) =&gt; &lt;Text key={index}&gt;{val.value}&lt;/Text&gt;);
    }
    return (
      &lt;View&gt;
          &lt;View&gt;{populate(_retrievedList)}&lt;/View&gt;
          &lt;Button
          title=&quot;Go to Details&quot;
          onPress={() =&gt; navigation.navigate('Screen2')}
        /&gt;
      &lt;/View&gt;
      
    );
  }
  function App() {
    return (
      &lt;NavigationContainer&gt;
        &lt;Stack.Navigator initialRouteName=&quot;Home&quot;&gt;
          &lt;Stack.Screen name=&quot;Home&quot; component={HomeScreen} /&gt;
          &lt;Stack.Screen name=&quot;Screen2&quot; component={Screen2} /&gt;
        &lt;/Stack.Navigator&gt;
      &lt;/NavigationContainer&gt;
    );
  }
  export default App;
  </code></pre>
  <p>File1.js</p>
  <pre><code>import React from 'react'
  
  const testObject = {
      value: &quot;Hello World Initial&quot;,
  };
  
  export const TestList = React.createContext([testObject]);
  
  export const TestListProvider = TestList.Provider;
  </code></pre>
  <p>Screen2.js</p>
  <pre><code>import { TestList, TestListProvider } from './File1';
  import * as React from 'react';
  import {View, Text, Button } from 'react-native';
  
  
  export default function Screen2() {
  
    const testObject2 = {
        value: &quot;Hello World&quot;,
    }
    const [_localUpdate, _setLocalUpdate] = React.useState([]);
    
    const addItem = () =&gt; {
      _setLocalUpdate([..._localUpdate, testObject2]);
    }
    return (
      &lt;View&gt;
          &lt;TestListProvider value={_localUpdate}&gt;
            &lt;Button onPress={addItem} title=&quot;Add&quot; color=&quot;#841584&quot; /&gt;
          &lt;/TestListProvider&gt;
      &lt;/View&gt;
    );
  }
  </code></pre>