AsyncStorage not fulfilling promise on Android 7+
Problem
Issue I am using `redux-persist` in a react native project, that runs just fine in a broad number of devices execept Android 7. I am trying to debug the problem on why my AsyncStorage is nor persisting and found this: The following code executes inside React Native component lifecycle's [code block] Code after 'Inside setInterval' is never called. It only runs once if outside the setInterval. If I call once the code outside the setInterval it appears to run just fine. I also tried callback format vs async / await version but it does not seem to matter. Same problem I had using firebase js library (callbacks never return after the first one). I am now looking for alternatives to workaround the problem. Works with `setImmediate` and `InteractionManager.runAfterInteractions`. Seems that `redux-persist` uses `setImmediate` or fallsback to `setTimeout`. Any ideas? Additional Information React Native version: React Native 0.40+ (last tested on RN@0.44) Platform: Only Android 7 and above Development Operating System: Mac os, Node 7.4 Dev tools: [code block] In case this is a user level question I opened a question on stackoverflow, no luck yet, https://stackoverflow.com/questions/44114061/asyncstorage-is-not-returning-the-callback?noredirect=1#comment75248695_44114061
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Implement InteractionManager for AsyncStorage in Android 7+
The issue arises from the fact that AsyncStorage operations may not be properly scheduled in the event loop on Android 7+, causing the promise to not resolve correctly when used inside a setInterval. This is likely due to the way the JavaScript engine handles asynchronous operations on this platform version, leading to unexpected behavior.
Awaiting Verification
Be the first to verify this fix
- 1
Wrap AsyncStorage calls with InteractionManager
Use InteractionManager to ensure that AsyncStorage operations are executed after all interactions have completed. This can help avoid issues with the promise not resolving correctly.
javascriptimport { InteractionManager } from 'react-native'; InteractionManager.runAfterInteractions(() => { AsyncStorage.setItem('key', 'value') .then(() => { console.log('Data saved'); }) .catch(error => { console.error('Error saving data', error); }); }); - 2
Replace setInterval with setTimeout
If you are using setInterval to repeatedly call AsyncStorage, consider replacing it with setTimeout to avoid potential issues with the timing of the calls. This can help ensure that each call completes before the next one starts.
javascriptconst saveData = () => { AsyncStorage.setItem('key', 'value') .then(() => { console.log('Data saved'); setTimeout(saveData, 1000); // Call again after 1 second }) .catch(error => { console.error('Error saving data', error); }); }; saveData(); - 3
Check for AsyncStorage polyfills
Ensure that you are not using any polyfills for AsyncStorage that may cause conflicts on Android 7+. If you are using a library that provides a polyfill, consider removing it and using the built-in AsyncStorage.
javascriptimport AsyncStorage from '@react-native-async-storage/async-storage'; // Ensure this is the correct import - 4
Update React Native and dependencies
Make sure that your React Native version and any related dependencies are up to date. There may be bug fixes or improvements that address this issue in newer versions.
bashnpm install --save react-native@latest npm install --save @react-native-async-storage/async-storage@latest - 5
Test on multiple devices
After implementing the changes, test the application on multiple Android 7+ devices to ensure that the issue is resolved across different environments.
Validation
Confirm that AsyncStorage operations are completing successfully by checking the console logs for successful saves and ensuring that data persists across app restarts. Additionally, monitor for any errors in the console related to AsyncStorage.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep