title: trigger fetching and updating parent data from separated component using userContext in react native
body: <p><a href="https://i.stack.imgur.com/Hrc40.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>Above is the image description of what I want to achieve. I already implemented all the layers but I have a problem in automatically updating userContext. I have to refresh the userContext.js page manually to all the information across the app get updated as I want.</p>
  <p>My DataBase.js looks like this</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import React, { createContext, useState, useEffect,useCallback} from "react";
  
  
  // create context
  const  UserContext = createContext();
      const UserContextProvider = ({children}) =&gt; {
        // the value that will be given to the context
        var data = global.userSignedUp
        const [UserDetails, SetUserDetails] = useState(data)
        const [loadingUser, setLoadingUser] = useState(true);
        
        // fetch a user from a fake backend API
       
          const fetchUser = async () =&gt; {
            // this would usually be your own backend, or localStorage
            // for example
            var name = global.userSignedUp.username
            var index= global.userSignedUp.id
            console.log('This the response from DataBase.js',UserDetails)
            const  data= await fetch('XXXXXX/api/userprofile/'+UserDetails.id+'/',{
                      method  : 'GET',
                      header : {
                      Accept  : 'application/json',
                      'Content-Type' : 'application/json'
                      }
                  }).then(async res =&gt;{ 
                     const response =await res.json()
                     console.log('This the response from DataBase.js',response)
                     SetUserDetails(response)
                     
                    
                  
                  })
  
            //
          };
  
        useEffect(() =&gt; {
  
          fetchUser();
          
        }, []);
  
        return (
          // the Provider gives access to the context to its children
          &lt;UserContext.Provider value={[UserDetails, SetUserDetails]}&gt;
            {children }
          &lt;/UserContext.Provider&gt;
        );
      };
  
  export { UserContext, UserContextProvider };</code></pre>
  </div>
  </div>
  </p>
  <p>I defined one global variable index that get updated depending on the user ID from the sign in page and passed inside the Database.js</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>const onSignInPressed =(logindata)=&gt;{
          const username = logindata.username
          const password =logindata.password
          // state={
          //     credentials :{username : username, password: password}
          // }
  
          fetch('http://XXXXX/auth/',{
              method:'POST',
              headers:{'Content-Type':'application/json'},
              body : JSON.stringify({username:username, password:password})
  
          }).then (async data =&gt;{
                  const DataResponse =await data.json() 
                  //console.log(DataResponse)
              if (data.status===200){
                  fetch('http://XXXX/api/userprofile',{
                   method  : 'GET',
                  header : {
                  Accept  : 'application/json',
                  'Content-Type' : 'application/json'
                  } 
                  }).then(async res =&gt;{ 
                      const response =await res.json() 
                      
                      for (let i=0; i  &lt; response.length;i++){
                      if (response[i].user=== username){ 
                          userSignedUp=response[i]
                          console.log('this is the user Signed up Id',userSignedUp)
                           navigation.navigate('HomeProfile')
  
                          ;
                              }
                           }       
                      })
                  
                   }                 
              else{
                  Alert.alert('Invalid User!','Username or password is incorrect,')
              }
          })
      }</code></pre>
  </div>
  </div>
  </p>
  <p>in my HomeProfile.js I can get all the data from UserContext and it workds fine.</p>
  <p>Now in my EditProfile.js I have this :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import React , {useState,useContext,useEffect,useCallback} from 'react'
  import {SocialIcon} from 'react-native-elements'
  import { ImageBackground, View, Text, Image, StyleSheet, useWindowDimensions,Alert} from 'react-native'
  import { icons,images, COLORS, SIZES } from '../constants';
  import {CustomInput} from '../Component/CustomInput';
  import CustomButton from '../Component/CustomButton';
  import {useNavigation} from '@react-navigation/native';
  import {useForm, Controller} from 'react-hook-form';
  import { UserContext, UserContextProvider } from "./MobileDatabase/DataBase";
  
  
  const EditProfile = () =&gt; {
   return (
      &lt;UserContextProvider&gt;
        &lt;EditProfilePage /&gt;
      &lt;/UserContextProvider&gt;
    );
  
  }
  
  
  const EditProfilePage = () =&gt; {
      
      const {control,handleSubmit,watch} = useForm();
      const {height}= useWindowDimensions();
      const navigation =useNavigation();
      const newpwd = watch('NewPassword')
      const [UserDetails, SetUserDetails]= useContext(UserContext);
  
      let  OldUsername=UserDetails.user
      let DataFromServer=UserDetails
  
  
      const onSavePressed = async (EditData) =&gt;{
          console.log(EditData)
          const uploadData =new FormData(); 
          uploadData.append('username',EditData.ChangeUsername)
          let editData= await fetch('http://192.168.56.1:8000/api/users/'+OldUsername+'/',{
                                  method:'PATCH',
                      headers:{Accept: 'application/json',
                          'Content-Type': 'multipart/form-data; '},
                      body :uploadData,
                      })
          let EditDataResponseJson = await editData.json();
  
          console.log(EditDataResponseJson)
          SetUserDetails({...UserDetails, user:EditDataResponseJson.username})
          UserContextProvider(EditDataResponseJson)
          
          navigation.navigate('HomeProfile')        
  }
      return (
          &lt;View style={styles.root}&gt;
        
          &lt;Image
              source ={{uri:UserDetails.Profileimage}}
              style={[styles.logo]}
              //resizeMode='contain'
  
          /&gt;
  
          &lt;Text style={{fontWeight:'bold',
                                          //position:"absolute",
                                          flex:1,
                                          fontSize: 20,
                                          top:'3%',
                                          maxWidth:200,
                                          alignSelf:'center' }}&gt;{UserDetails.user}&lt;/Text&gt;
  
          &lt;CustomInput placeholder ='Change UserName'
            name="ChangeUsername"
            control={control}
            rules={{required: 'Username is required',
               minLength:{
                   value:3,
                   message :'Username should be at least 3 characters long'
               }
               }}
              //  value={username} 
              //  setValue={setUsername} 
               /&gt;
          &lt;CustomInput placeholder= 'Change Password'
              name ='NewPassword'
              control={control}
              rules={{required: 'New password is required'}}
              //  value={password} 
              //  setValue={setPassword}
               secureTextEntry={true}
                /&gt;
          &lt;CustomInput placeholder= 'Confirm Password'
              name ='RepeatNewPassword'
              control={control}
              rules={{
                   validate: value =&gt;  value === newpwd || 'Password do not match'
               }}
              //  value={password} 
              //  setValue={setPassword}
               secureTextEntry={true}
                /&gt;
          &lt;View style ={styles.Signup}&gt;
          &lt;CustomButton text= 'Save Changes'  onPress={handleSubmit(onSavePressed)}  /&gt;
  
          &lt;/View&gt;
          &lt;/View&gt;
      )
    
         
    
  }
  
  const styles = StyleSheet.create({
      root :{
          //alignItems :'center',
          paddingTop :'60%',
          flex: 1,
          
          
      },
      cover:{
          flex:1,
          justifyContent: 'center',
      },
  
      logo:{
          position :'absolute',
          top:'10%',
          alignSelf:'center',
          justifyContent:'center',
          alignItems: 'center',
          width: 150,
          height: 150,
          borderRadius: 400/ 2,
        
      },
      Signup:{
          marginTop: '20%',
      }
  })
  
  export default EditProfile</code></pre>
  </div>
  </div>
  </p>
  <p>When I update the Username for example, it only changes inside EditPage.js but not in HomeProfile.js event thought I update the SetUserDetails. The only way to see the updated data is to refresh the Database.js.</p>
  <p>I am very much stuck since a month now and hope for a help here.</p>
  <p>Thank you!!</p>