title: What do I do wrong when I use createContext(), and useContext()?
body: <p>I can do this without using createContext(), and useContext(). But I want to learn to use this, so I want to add useContext, and createContext.</p>
  <p>Normaly i have this code in my MainScreen.js</p>
  <pre><code> const [users, setUsers] = useState([
          &lt;HorizontalCircles skeleton={true} key={0} colorFirst={&quot;rgb(&quot; + 100 + &quot;,&quot; + 100 + &quot;,&quot; + 100 + &quot;)&quot;} colorSecond={&quot;rgb(&quot; + 100 + &quot;,&quot; + 100 + &quot;,&quot; + 100 + &quot;)&quot;}/&gt;,
          &lt;HorizontalCircles skeleton={true} key={1} colorFirst={&quot;rgb(&quot; + 100 + &quot;,&quot; + 100 + &quot;,&quot; + 100 + &quot;)&quot;} colorSecond={&quot;rgb(&quot; + 100 + &quot;,&quot; + 100 + &quot;,&quot; + 100 + &quot;)&quot;}/&gt;,
      
        ])
      const getUsers = () =&gt; {
          // TODO: get discussion from SERVER
          // Dumy Data
          console.log(&quot;Getting Users&quot;);
      
          const tmpUsers = [];
      
          for (let i = 0; i &lt; 1; i++) {
            const rand = Math.round(Math.random() * 255);
            const rand2 = Math.round(Math.random() * 255);
            const rand3 = Math.round(Math.random() * 255);
      
            tmpUsers.push(&lt;HorizontalCircles key={i} colorFirst={&quot;rgb(&quot; + rand + &quot;,&quot; + rand2 + &quot;,&quot; + rand3 + &quot;)&quot;} colorSecond={&quot;rgb(&quot; + rand3 + &quot;,&quot; + rand + &quot;,&quot; + rand2 + &quot;)&quot;} /&gt;)
          }
          setTimeout(() =&gt; {
            setUsers(tmpUsers);
          }, 5000);
      
        }
  </code></pre>
  <p>Since my App.js included by navigations, I thought I need to add another file, where i can show my Provider.</p>
  <p>Here is App.js</p>
  <pre><code>import 'react-native-gesture-handler';
  import React from &quot;react&quot;;
  import { NavigationContainer } from '@react-navigation/native';
  import { createStackNavigator } from '@react-navigation/stack';
  import MainScreen from './src/components/screens/MainScreen';
  import NewScreen from './src/components/screens/NewScreen';
  import AnotherScreen from &quot;./src/components/screens/AnotherScreen&quot;;
  
  
  const Stack = createStackNavigator();
  
  const App = () =&gt; {
  
    return (
      &lt;NavigationContainer&gt;
        &lt;Stack.Navigator initialRouteName=&quot;Home&quot; screenOptions={{headerShown: false}}&gt;
          &lt;Stack.Screen name=&quot;Home&quot; component={MainScreen} /&gt;
          &lt;Stack.Screen name=&quot;NewScreen&quot; component={NewScreen} /&gt;
          &lt;Stack.Screen name=&quot;AnotherScreen&quot; component={AnotherScreen} /&gt;        
        &lt;/Stack.Navigator&gt;
      &lt;/NavigationContainer&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>Here is App2.js where i include Provider,</p>
  <pre><code>import React, { createContext,  } from &quot;react&quot;;
  import { View } from &quot;react-native&quot;;
  import MainScreen from &quot;./src/components/screens/MainScreen&quot;;
  
  
  export const UserContext = createContext();
  
  function App2() {
  
    const [users, setUsers] = useState([
      &lt;HorizontalCircles skeleton={true} key={0} colorFirst={&quot;rgb(&quot; + 100 + &quot;,&quot; + 100 + &quot;,&quot; + 100 + &quot;)&quot;} colorSecond={&quot;rgb(&quot; + 100 + &quot;,&quot; + 100 + &quot;,&quot; + 100 + &quot;)&quot;} /&gt;,
      &lt;HorizontalCircles skeleton={true} key={1} colorFirst={&quot;rgb(&quot; + 100 + &quot;,&quot; + 100 + &quot;,&quot; + 100 + &quot;)&quot;} colorSecond={&quot;rgb(&quot; + 100 + &quot;,&quot; + 100 + &quot;,&quot; + 100 + &quot;)&quot;} /&gt;,
  
    ])
    return (
      &lt;View className=&quot;App2&quot;&gt;
        &lt;UserContext.Provider value={users, setUsers}&gt;
          &lt;MainScreen /&gt;
        &lt;/UserContext.Provider&gt;
  
      &lt;/View&gt;
    )
  }
  </code></pre>
  <p>This is the only change in MainScreen.js after I added App2.js</p>
  <pre><code>  const [users, setUsers] = useContext(UserContext);
  </code></pre>
  <p>I left getUsers() function the same.</p>
  <p>Whats my mistake? It doesnt work, I just want to learn how to use this, I thought this should have worked, but it doesnt.</p>
  <p>it gives me an error, saying :
  invalid attempt to destructure  non-iterable instance. In order to be iterable, non-array objects, must have Symbol.iterator method.</p>
  <p>the last error i am getting is:</p>
  <p><a href="https://i.stack.imgur.com/KieAh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KieAh.png" alt="enter image description here" /></a></p>