Fork me on GitHub
Shako Farhad13:04:40

Anyone know a good way of integrating re-frame and the react native async storage? What are the dos and don'ts of using async storage and potential pitfalls? I am trying to get into and use it, but I don't know exactly where to start.

Shako Farhad13:04:49

Is for example setting the whole re-frame app-db into async storage for every event not smart? Should only certain data be put in async storage?

Shako Farhad17:04:16

Guys how do I get AsyncStorage when it is imported without {} brackets?

import AsyncStorage from '@react-native-community/async-storage';

Shako Farhad17:04:58

For react native it is like this:

["react-native" :refer [ActivityIndicator]]

Shako Farhad17:04:59

But that is also written like this:

import { ActivityIndicator } from 'react-native';


@shakof91 I worried about storing my whole app-db on every event but for my use case it’s imperceptible. I’d start by just doing that, the simplest thing that works, and then if you end up noticing issues later, find a solution.

Shako Farhad19:04:41

I was thinking of just storing the whole app-db everytime the app-state changes to "background", but perhaps storing the whole app-db on every event is better since then we won't have any edgecases (like if app gets forced shutdown and not going into "background" first).

Shako Farhad19:04:23

But do you know how to get the AsyncStorage from the community version of the async-storage? Currently this works for me

["react-native" :refer [AsyncStorage]]


Yeah, I did that originally, but I found that it wasn’t entirely reliable and I had to be more careful about syncing things. It turns out that just adding a side-effect that stores the app-db on every event is dumb and just works.


I’m not using shadow-cljs in my project (or the newer CLJS NPM stuff). So it’s a little different. Honestly I get confused by the differences in ES6/etc export styles. I have a lot of this:


(.-ActivityIndicator (js/require "react-native"))

Shako Farhad19:04:22

Ok. Thank you for the headsup. I will definitely see if I can do the save on every event. How did you solve that by the way?


You can mess around in the repl by doing (def rn (js/require "react-native")) and then (js-keys rn) or whatever to see what’s in there.

Shako Farhad19:04:10

ah really. Didn't know that! Will try that. Thanks!


What I’m doing is a little more complicated because I’m not using AsyncStorage, but if you scroll down, you can see how to plug into re-frame and just put your storage code there.

Shako Farhad19:04:57

Ah so you are using the (after) function. So after the event has gone through all its coeffects, you put the current db in storage. neat!


Yup, it turns out to work just fine for storing a few kb at least.

Shako Farhad19:04:48

When I do "yarn add @react-native-community/async-storage", does this mean I need to get async-storage from @react-native-community/async-storage or is the react-native async-storage automagically overwritten and points to the community version? 😛

Shako Farhad19:04:15

I have kept to the core react-native stuff. This is my first package outside of react-native and react 😄

Shako Farhad19:04:30

I bet I will have to figure this out soon either way.


I don’t think adding something with yarn automatically pulls it in. You do that when you either require in your ns form or if you js/require. Whatever you require and define is what you get.

Shako Farhad19:04:25

Yes. I was just wondering if

["react-native" :refer [AsyncStorage]]
["@react-native-community/async-storage" :refer [AsyncStorage]]
are the same kind of because of react natives auto linking from 0.60 and up. 😮

Shako Farhad19:04:41

So much I still don't quite understand. But this whole react native journey has been mostly pleasant actually. 😄


Ah, I see. I’m honestly not sure either, the RN packager does some magic and I’m sometimes surprised by what happens.


They are not the same thing @shakof91 because I think that AsyncStorage got pulled out of react-native.


The first line used to work, but the second require is what you need nowdays…

Shako Farhad20:04:05


["@react-native-community/async-storage" :refer [AsyncStorage]]
gives me an error. It says that AsyncStorage is not an object and that type is undefined. I saw others online have the same issue. I just need to figure out how to require it correctly 😮

Shako Farhad21:04:50

I found the answer!

Shako Farhad21:04:59

This is from the shadow-cljs documentation. So in my case I needed to use this

["@react-native-community/async-storage" :default AsyncStorage]

👍 4
Shako Farhad23:04:03

The async-storage doesn't seem to work. Whenever I quit the app and relaunch it, the async-storage is empty again. :x