Issues encountered when saving and fetching data using AsyncStorage

My situation involves a storage object structured like this:

import AsyncStorage from "react-native";

const deviceStorage = {
    async saveItem(key, value) {
        try {
          await AsyncStorage.setItem(key, value);
        } catch (error) {
          console.log('AsyncStorage Error: ' + error.message);
        }
      }
};

export default deviceStorage;

Encountering an issue where setItem is throwing an error 

Property 'setItem' does not exist on type 'typeof import("/Users/Developer/React/reactRallyApp/node_modules/@types/react-native/index")'

Struggling to identify the cause of this error and how to resolve it, possibly overlooking a simple solution?

typescriptreact-nativeasyncstorage

Answer №1

  1. It has been announced that AsyncStorage will no longer be supported in the core of React Native. Instead, users are encouraged to utilize the following library: https://github.com/react-native-community/react-native-async-storage
  2. It is important to note that placing a function in an object without a key can lead to errors.

One way to address this is by implementing the following code:

import { AsyncStorage } from "react-native";

const saveItem = async (key, value) => {
    try {
      await AsyncStorage.setItem(key, value);
    } catch (error) {
      console.log('AsyncStorage Error: ' + error.message);
    }
  }
};

export default saveItem;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React hook call is not valid

https://reactjs.org/docs/hooks-custom.html Creating custom Hooks allows you to abstract component logic into reusable functions. This is exactly what I aim to achieve: abstract my component logic into reusable functions for other components. Here is an ex ...

reactjsreact-nativereact-hooks

A reflective key error has occurred because the token was not properly defined!

My current setup includes Angular version 2.4.4. However, I encountered an issue when trying to declare a service resolver and register it in both the component module and router. import { Injectable } from '@angular/core'; import { Resolve, Ac ...

angulartypescript

Unable to execute any actions on object in JavaScript

I currently have two functions in my code: getRawData() and getBTRawData(). The purpose of getBTRawData() function is to retrieve data from Bluetooth connected to a mobile device. On the other hand, getRawData() function takes the return value from getB ...

javascriptangulartypescriptbluetoothrxjs

Is there a way to utilize const assertions to retrieve the explicit types from objects nested at various levels?

In reference to this question, the previous structure had a depth of 2: const grandkids = { Karen: { Ava: ['Alice', 'Amelia'], Emma: ['Sarah'], }, Mary: { Sophia: ['Grace'], }, } as const; To ext ...

typescripttypes

Having trouble importing components from the module generated by Angular CLI library

After creating a simple Angular library using CLI with the command ng g library <library-name>, I encountered an issue while trying to import a component from its module. In my app module, I added components.module to the imports array and attempted ...

angulartypescriptnpmangular-cli

Error: Protractor encountered an unexpected token while trying to import an external class

While working on my Protractor test, I encountered a syntax error on import when trying to bring an external class into the test. The strange thing is that the error only occurs at runtime, even though I am confident that I am importing and exporting the c ...

typescriptprotractor

Angular HTTP Interceptor delays processing of http requests until a new refresh token is obtained

After creating my AuthInterceptor to handle 401 errors by requesting a new token, I encountered a problem. The handle401Error method is supposed to wait for other HTTP requests until the new token is received, but it isn't waiting as expected. Even th ...

angulartypescriptangular-http-interceptors

What's stopping me from using useState() to assign API data to an array?

I have a question regarding my app that makes use of the Movies API. I am making an API request and then passing the data to an array using the useState hook. Here is a snippet of my code: const App = () => { type MovieType = { rate: string, ...

reactjstypescriptaxios

Ensure that the form is submitted only after confirming it in the modal with react-hook-form

**I am facing an issue with submitting react-hook-form on confirm in a modal component. Whenever the user selects confirm, I need the form to be submitted directly. I have tried writing the modal inside FormSubmitButton. Also, I have tried placing it insi ...

javascriptreactjstypescriptreact-hook-formchakra-ui

Nexus and GraphQL: The root typing path for the "context" type is not found

I’m currently working on integrating GraphQL into Next.js API routes. For writing the GraphQL schema, I’m utilizing Nexus. Here are the two essential files: context.ts and schema.ts, that help in setting up Nexus development mode. // context.ts import ...

reactjstypescriptgraphqlnext.jsnexus

"Angular 4 is requesting a required get parameter that is currently missing

After running my code, I encountered the following console log error: "'Missing required 'page' parameter". I attempted to set this as a parameter in my get request, and it seemed successful because I was able to view the params as an array ...

angularhttptypescriptobservable

What is the process for converting an image into base 64 using Angular 5?

Is there a way to convert an image into base 64 using angular5 when the image is sourced from Facebook or Google authentication API? I seem to be encountering an issue, what could I be doing wrong? getBase64Image(img) { var canvas = document.createEleme ...

typescriptionic-frameworkionic3

"Optimize Your Workflow with the Virtual Assistant Bot Platform and Command Center

As I work on developing a Virtual Assistant for Microsoft Teams, I've noticed some limitations with using adaptive cards due to the version of Teams I'm working with. For example, the buttons always need to be placed at the end of the card. In se ...

node.jstypescriptbotframeworkmicrosoft-teamscontrol-library

Maintain hook varieties during implementation of array deconstruction

I have been developing a straightforward hook to export animation helper and element reference. import { gsap } from 'gsap'; import { useRef } from 'react'; export function useTween<R extends gsap.TweenTarget>(vars: gsap.TweenVar ...

reactjstypescript

Click on the button to generate a PDF report using Internet Explorer 11

After encountering some challenges with printing a PDF report specifically on IE 11, I am reaching out for help. The code snippet below works perfectly in Chrome, but when it comes to IE 11, everything falls apart. Just to provide some context, I am develo ...

angulartypescriptinternet-explorer-11

Animating the blur effect in React Native images

I want to create a unique effect for the top of one of my views by blurring out a "cover" image as it scrolls out of view. Within my state, I have a property called blurRadius, which is bound to blurRadius={this.state.blurRadius} in my <Image> compo ...

animationreactjsreact-native

Understanding the concept of a "class variable" in Typescript when referring to a variable that belongs to another class

When we declare a variable at the class level and assign it the type of another class, such as in the following code: let greeter: Greeter; //line 1 greeter = new Greeter("world"); What is contained within 'greeter' on line 1? ...

typescript

Narrowing down the keys of an indexable type in TypeScript based on their corresponding value types

If I have a generic indexable type, how can I retrieve the types of its values in order to narrow down to specific keys? // Let's assume check is a function that only allows the property 'a' as a string and raises an error if 'b' ...

typescript

Tips for obtaining the most recent HTML element in Angular

I was able to include HTML content in an Angular (7) UI using the DomSanitizer this.sanitizer.bypassSecurityTrustHtml("htmlstr") Once the content is sanitized and displayed in the HTML view, users have the ability to modify the values as desired ...

htmlangulartypescript

What is the correct way to properly enter a Svelte component instance variable?

Currently, I am delving into learning Svelte and specifically exploring how to bind to a component instance as demonstrated in this tutorial: As I progress through the tutorial, I am attempting to convert it to Typescript. However, I have encountered an ...

javascripttypescriptsveltetypescript-eslintsvelte-component