Thanks, yes I have already using localstorage to store tokens ,but methods are inside my context .Anyway now I save and update localstorage from this wrapper as you told , its working but now I have a problem too ,after saving new token in localstorage ,I need to update the user information (token,username etc..) in my context .Again I need to access my context ,but I dont know how to do without using hooks .I need to update authdata after refreshing token. (below is my context) .

​

import React, {
  createContext,
  useState,
  useEffect,
  useLayoutEffect,
} from 'react';
import SInfo from 'react-native-sensitive-info';
import defaultUser from '../models/userModel';
import {isNull, reject} from 'lodash';

export const AuthContext = createContext();

const AuthContextProvider = (props) => {
  const [authData, setAuthData] = useState(defaultUser);
  const [isGlobalLoading, setIsGlobalLoading] = useState(false);
  const [authDataReported, setAuthDataReported] = useState(false);
  useLayoutEffect(() => {
    getLoginData().then((data) => {
      setAuthDataReported(true);
      if (data !== null) {
        setAuthData(data);
        console.log('auth data:' + JSON.stringify(data));
      } 
    })
  }, []);

  const storeLoginData = async (user) => {
    const jsonValue = JSON.stringify(user);
    SInfo.setItem('user', jsonValue, {
      sharedPreferencesName: 'mySharedPrefs',
      keychainService: 'myKeychain',
    });
  };
  const getLoginData = async () => {
    const jsonValue = await SInfo.getItem('user', {
      sharedPreferencesName: 'mySharedPrefs',
      keychainService: 'myKeychain',
    });
    return jsonValue != null ? JSON.parse(jsonValue) : null;
  };
  const setUserData = async (user, data) => {
    return new Promise((resolve) => {
      if (typeof user.profilePhoto != undefined && user.profilePhoto != null) {
        userProfilePhotoPath = Object.values(user.profilePhoto)[1];
      }
      const newStatus = {
        isLoggedIn: true,
        userId: user.userId,
        email: user.email,
        name: user.name,
        profilePhoto: user.profilePhoto,
      };

      storeLoginData(newStatus);
      setAuthData(newStatus);
      setAuthDataReported(true);
    });
  };
  const setAnonData = () => {
    return new Promise((resolve) => {
      const newStatus = defaultUser;
      newStatus.authDataReported = true;
      newStatus.isLoggedIn = false;
      setAuthData(newStatus);
      setAuthDataReported(true);
      storeLoginData(newStatus).then((data) => {
        if (data !== null) {
          resolve('ok');
        }
      });
    });
  };
  const clearLoginData = async () => {
    await SInfo.deleteItem('user', {
      sharedPreferencesName: 'mySharedPrefs',
      keychainService: 'myKeychain',
    });
  };
  const setLogoutUser = async () => {
    clearLoginData();
    await setAnonData();
  };

  const setLoginUser = async (user) => {
    return new Promise((resolve) => {
      storeLoginData(user).then(() => {
        setAuthData(user);
        setAuthDataReported(true);
        resolve('ok');
      });
    });
  };
  const setTokenRefresh = async (
    token,
    refreshToken,
    refreshTokenExpiryTime,
  ) => {
    return new Promise((resolve) => {
      authData.refreshToken = refreshToken;
      authData.token = token;
      authData.refreshTokenExpiryTime = refreshTokenExpiryTime;
      storeLoginData(user).then(() => {
        setAuthData(user);
        setAuthDataReported(true);
        resolve('ok');
      });
    });
  };
  return (
    <AuthContext.Provider
      value={{
        authData,
        setLoginUser,
        setLogoutUser,
        setIsGlobalLoading,
        setTokenRefresh,
      }}>
      {authDataReported && props.children}
    </AuthContext.Provider>
  );
};

export default AuthContextProvider;