Fork me on GitHub
#cljsrn
<
2020-04-19
>
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';

joshmiller19:04:49

@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]]

joshmiller19:04:18

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.

joshmiller19:04:29

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:

joshmiller19:04:50

(.-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?

joshmiller19:04:39

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!

joshmiller19:04:50

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!

joshmiller19:04:40

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.

joshmiller19:04:19

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. 😄

joshmiller19:04:54

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

dotemacs20:04:37

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

dotemacs20:04:07

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

Shako Farhad20:04:05

Unfortunatly

["@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