Fork me on GitHub
#cljsrn
<
2022-05-13
>
Carl08:05:41

Can anyone point me in the right direction of how to store react navigation such that the navigation stack isn't lost on reload (in an expo/shadow-cljs project if that matters)? I have been trying to store the ref from react-native/NavigationContainer in an atom along with the result of .getRootState on that ref and then restoring it with .resetRoot but have not been successful doing that. I end up with an exception on reload within .resetRoot, but I'm not confident enough in my approach to really start digging into react native source when I'm not even certain I'm thinking about this the right way

dima11:05:10

To persist nav state you could also pass {:onStateChange on-state-change :initialState @state} to NavigationContainer. The code for persisting state could look like:

(defonce state (atom nil))

 (defn- persist-state! [state-obj]
    (js/Promise.
     (fn [resolve _]
       (reset! state state-obj)
       (resolve true))))

  (defn- on-state-change [state]
    (persist-state! state))
And for storing the ref, you could use useNavigationContainerRef hook to get the ref.

❤️ 1
Carl11:05:48

That works! Thank you 🙂 I had really been struggling with this. Strangely my app crashes if I have a modal open while making code changes but that could very well be due to something I've done.

Carl11:05:14

Just incase anyone else can benefit from my mistakes, I was previously trying to use the following references: 1. https://gist.github.com/olivergeorge/981bc5135fa47253cba50fd125495d0b a. The approach I used in my original post 2. https://github.com/eihli/cljs-react-native-starter/blob/master/src/example/core.cljs a. Uses persistNavigationState and loadNavigationState I'm not sure why 1) did not work, but 2) is now out of date from what I can tell reading the React Navigation docs. As someone who wasn't already familiar with react and was simply reading through repos cljs/react native repos for ideas, it was tough to know what was actually still usable in the latest version of react native so I hope this saves someone else some time 🙂

UlisesMAC09:05:14

You can persist it using local storage from expo, each time you navigate, persist the new route and read it when creating the stacks. This also helps in the case when the user closes the app and when opens it, you can show them the previous visited screen

👍 1
Carl12:05:10

Oh nice, that sounds like a great idea. Adding that to the to do list!

loganrios14:05:32

Hey all! I'm currently working on throwing together a template project for my company that uses Krell+Storybook out-of-the-box, since I hadn't seen anything publicly available that combined that stack (despite it's popularity in this channel 😉 ). While reading through some of the troubleshooting, I noticed that a handful of people were trying to get Krell to work with react-native-web (specifically @hkjels) and I was curious if anyone had made any progress getting that put together. I've currently tried futzing around with Webpack (based on the instructions here https://necolas.github.io/react-native-web/docs/multi-platform/) to no avail, and also scouring around Expo's source code to recreate whatever they have going on, but my JS comprehension skills are sorely lacking. Any guidance anyone can offer in that direction is much appreciated 🙂 The repo is here: https://github.com/loganrios/ksapp. Let me know if it looks useful!

👏 1
joshmiller17:05:15

@U03DKTAF52P Awesome! I have been meaning to get into Storybook, this helps a lot.

joshmiller17:05:53

In your README you say you need Clojurescript but don’t remember how to get it — it’s just a dep. You don’t need to do anything. Requiring krell in deps.edn transitively requires it.

👍 1
loganrios18:05:24

Ah, good catch! I was wondering whether that needed to be explicit or not.

loganrios18:05:58

As far as Storybook goes, I'm currently fighting how to best create JSX components and their stories while still using them in CLJS. Based on what I've read in this channel from @U050B88UR, it appears that Krell doesn't do relative-path imports like you would in normal RN. There was some rumor about it being less discriminating about where Krell looked for node_modules (such that I assume you could add it to a top-level components folder or something...), but I haven't been able to get it to play nice. Per @U050KSS8M, apparently creating your own local NPM module and slotting it into package.json works well so maybe that's the best we got 🤷

👍 1
hkjels06:05:35

I was able to tweak metro to bundle correctly, so advanced builds work. I’m now looking more into how the internals of Krell and Figwheel works to see if I can port the missing pieces from figwheel to krell. I also need some weird functionality for my project though, so I don’t expect to have a general solution in place any time soon. It's also just a pastime project

hkjels06:05:06

If you want to see the metro configuration, I can share that?

loganrios12:05:21

That would be great! I’ve been trying to get Metro bundling to work for a while 😅

hkjels23:05:50

I’ll make a gist on Monday. I’m currently on a bachelorparty and nowhere near my laptop

hkjels07:05:35

Been offline

raspasov12:05:37

@U03DKTAF52P I've done a small react-native-web project, but I've been using figwheel-main. It worked without any specific problems that I recall (I can REPL to the running browser). I believe I started from the project as an expo bare project. I recall trying to add react-native-web to an existing (older) react-native project and that seemed to be much more of a hassle.

hkjels12:05:35

@U050KSS8M did you then use krell for regular react-native stuff?

raspasov12:05:44

@hkjels I have not used krell on its own

raspasov12:05:38

I've always been using figwheel-main; there's some specifics in the setup for React Native but it has always worked for me.

hkjels12:05:54

ohh. Didn’t know that figwheel was capable

hkjels12:05:39

Need to have a look at that as soon as possible