Async-storage: AsyncStorage_dedicatedExecutor=true not working well

[xinjing1027]

You want to:

I have issue on "https://github.com/react-native-community/async-storage/blob/LEGACY/docs/advanced/DedicatedExecutor.md"

Details:

After I add "AsyncStorage_dedicatedExecutor=true", AsyncStorage.getItem worked well.
But it made another issue.
When running app, app shows blank white screen for 1.5~2 seconds.
Then shows splash screen that I implemented.

I added console.log() at App.js Constructor,
Console.log() called after white screen(1.5 ~ 2 seconds).

Here is log before running constructor

Log

[05:39:55] D | ReactNative ▶︎ ReactInstanceManager.onJSBundleLoadedFromServer()

[05:39:55] D | ReactNative ▶︎ ReactInstanceManager.recreateReactContextInBackground()
│ ReactInstanceManager.runCreateReactContextOnNewThread()
└ ReactInstanceManager.tearDownReactContext()

[05:39:56] D | ReactNative ▶︎ ReactInstanceManager.createReactContext()

[05:39:56] D | ReactNative ▶︎ Initializing React Xplat Bridge.

[05:39:56] D | ReactNative ▶︎ Initializing React Xplat Bridge before initializeBridge

[05:39:56] D | ReactNative ▶︎ CatalystInstanceImpl.destroy() end

[05:39:58] D | ReactNative ▶︎ Initializing React Xplat Bridge after initializeBridge
│ CatalystInstanceImpl.runJSBundle()
│ ReactInstanceManager.setupReactContext()
│ CatalystInstanceImpl.initialize()
└ ReactInstanceManager.attachRootViewToInstance()

[05:39:59] W | ReactNativeJS ▶︎ Require cycle: node_modules\react-native-firebase\dist\utilsapps.js -> node_modules\react-na
tive-firebase\dist\modules\coreapp.js -> node_modules\react-native-firebase\dist\utilsapps.js
│
└ Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.

[05:39:59] W | ReactNativeJS ▶︎ Require cycle: node_modules\react-native-firebase\dist\modules\admobindex.js -> node_modules
\react-native-firebase\dist\modules\admob\Interstitial.js -> node_modules\react-native-firebase\dist\modules\admobindex.js
│
│ Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
│ Require cycle: node_modules\react-native-firebase\dist\modules\admobindex.js -> node_modules\react-native-firebase\dist\modules\admob\RewardedVideo.js -> node_modules\react-native-firebase\dist\modules\admobindex.js
│
└ Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.

[05:40:00] W | ReactNativeJS ▶︎ Require cycle: node_modules\react-native-firebase\dist\modulesdatabase\Reference.js -> node_
modules\react-native-firebase\dist\utils\SyncTree.js -> node_modules\react-native-firebase\dist\modulesdatabase\Reference.js │
│ Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
│ Require cycle: node_modules\react-native-firebase\dist\modules\core\firebase.js -> node_modules\react-native-firebase\dist\utilsapps.js -> node_modules\react-native-firebase\dist\modules\coreapp.js -> node_modules\react-native-firebase\dist\modulesdatabaseindex.js -> node_modules\react-native-firebase\dist\modules\core\firebase.js
│
└ Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.

[05:40:00] W | ReactNativeJS ▶︎ Require cycle: node_modules\react-native-firebase\dist\modules\firestore\DocumentSnapshot.js
-> node_modules\react-native-firebase\dist\modules\firestore\DocumentReference.js -> node_modules\react-native-firebase\dist\modules\firestore\DocumentSnapshot.js
│
└ Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.

[05:40:00] W | ReactNativeJS ▶︎ Require cycle: node_modules\react-native-firebase\dist\modules\firestore\CollectionReference.
js -> node_modules\react-native-firebase\dist\modules\firestore\Query.js -> node_modules\react-native-firebase\dist\modules\firestore\QuerySnapshot.js -> node_modules\react-native-firebase\dist\modules\firestore\DocumentChange.js -> node_modules\react-native-firebase\dist\modules\firestore\DocumentSnapshot.js -> node_modules\react-native-firebase\dist\modules\firestore\DocumentReference.js -> node_modules\react-native-firebase\dist\modules\firestore\CollectionReference.js
│
│ Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
│ Require cycle: node_modules\react-native-firebase\dist\modules\firestore\DocumentReference.js
-> node_modules\react-native-firebase\dist\modules\firestore\utils\serialize.js -> node_modules\react-native-firebase\dist\modules\firestore\DocumentReference.js
│
└ Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.

[05:40:00] W | ReactNativeJS ▶︎ Require cycle: node_modules\react-native-firebase\dist\modules\firestore\utils\serialize.js -

node_modules\react-native-firebase\dist\modules\firestore\FieldValue.js -> node_modules\react-native-firebase\dist\modules\firestore\utils\serialize.js
│
│ Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
│ Require cycle: node_modules\react-native-firebase\dist\modules\core\firebase.js -> node_modules\react-native-firebase\dist\utilsapps.js -> node_modules\react-native-firebase\dist\modules\coreapp.js -> node_modules\react-native-firebase\dist\modulesfunctionsindex.js -> node_modules\react-native-firebase\dist\modules\core\firebase.js
│
└ Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.

[05:40:00] W | ReactNativeJS ▶︎ Require cycle: node_modules\react-native-firebase\dist\modules\storageindex.js -> node_modul
es\react-native-firebase\dist\modules\storage\reference.js -> node_modules\react-native-firebase\dist\modules\storage\task.js -> node_modules\react-native-firebase\dist\modules\storageindex.js
│
└ Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.

[05:40:00] I | ReactNativeJS ▶︎ Running application "CarShoppingApp" with appParams: {"rootTag":31}. __DEV__ === true, develo
pment-level warning are ON, performance optimizations are OFF

Question

As you can see it took 5 seconds. And showing blank white screen.
Please help me how to remove it or how to change the screen blank to image.

[xinjing1027]

I can see these 2 comments:
Is used in your app, so that background tasks are queued most of the time
Acts weird on your device (for example, waits for some time before execution)

Which Android versions not working without this?
And what kind of Android Phone not working?

I love your AsyncStorage and like this solution, but I don't want the delay time.
At least I hope to change the background blank white screen to image.

I hope your kind help as before.
Thanks.

[xinjing1027]

Actually It's taking 5 seconds.
I used All Tricks for App Performance.

[Krizzu]

Have you tried removing Async Storage completely, to see if it's indeed impacting your app?

[xinjing1027]

Yes, when I remove "AsyncStorage_dedicatedExecutor=true", there's no delay before splash screen.
But when I remove, the first Async.getItem takes too long time.
After I added it, it shows blank white screen about 2~5 seconds.

I used Bluestacks emulator 4.12(Android 7.1)
React Native is 0.60.4
And the AsyncStorage 1.6.1

[Krizzu]

@xinjing1027 Have you tried different emulator or real device?

[xinjing1027]

Checked it on Xioami Android 7.
But it's also the same.

[Krizzu]

Strange. Can you provide a repro project so I could have a look?

[xinjing1027]

Finally, Solved that.
thanks.

[Krizzu]

@xinjing1027 Great :) Mind sharing how you fixed that?

[xinjing1027]

Thanks for your help.
That was not your fault.
My project was so heavy.(ecommerce + SNS + a lot of library dependencies)
I optimized import, package.json & used pure component.
Also used hook.
I think your asyncstorage sometimes slow on first minutes when app is too big.