Fork me on GitHub
#cljsrn
<
2020-04-09
>
Shako Farhad11:04:10

Hello! I am not a complete beginner to Clojure, Reagent, Re-frame etc as I have built a few web apps, but I am now trying to get a react native application up and going with re-frame and reagent. I have spent past few days hitting my head on the wall, but I can't get through. Basic re-natal project doesn't work, and I don't know how to get a react native up and running. If anyone has experience with react native and clojurescript and you have some time to help a fellow out, please do. Much appreciated!

dotemacs11:04:25

Hi, maybe you can describe, in detail, what you’ve done, so that we have something to go on. Because saying “it doesn’t work” it’s not very meaningful

Shako Farhad11:04:35

I have followed https://github.com/drapanjanas/re-natal guide and made no modifications to at all. Just followed that step by step. I have adoptjdk 8 hotspot installed.

dotemacs11:04:55

And what happened?

dotemacs11:04:16

Maybe post that as a gist? Slack is reporting that it’s a “bin” file

Shako Farhad11:04:45

This is the output of running "lein figwheel android" and then going to localhost:3449/figwheel-ws

Shako Farhad12:04:08

This is my java version btw D:\Clojure Projects>java -version openjdk version "1.8.0_242" OpenJDK Runtime Environment (AdoptOpenJDK)(build 1.8.0_242-b08) OpenJDK 64-Bit Server VM (AdoptOpenJDK)(build 25.242-b08, mixed mode)

fricze12:04:19

I’d try https://github.com/PEZ/rn-rf-shadow I don’t think you need re-natal

dotemacs12:04:28

Let him just get bootstrapped with re-natal to make sure that it can work

dotemacs12:04:36

Then he can decide what to go with

dotemacs12:04:00

Just to understand @U0121V7FXG8 you ran:

npm install -g re-natal
re-natal init FutureApp
re-natal use-figwheel
and at this point you brought up your Android emulator?

Shako Farhad13:04:23

yes, then I ran re-natal use-android-device avd then lein figwheel android then react-native run-android

dotemacs13:04:40

OK, and did you start your Android emulator?

Shako Farhad13:04:20

Yes, I had it up and running before running lein figwheel android command

dotemacs13:04:39

This is odd. Let me try to run the same steps to see if I can reproduce it. Mind you, I’m on a different operating system and I see that you’re on Windows…

dotemacs13:04:37

Let me ask you this, does your lein command behave like it should in the other projects?

Shako Farhad13:04:44

Yeah, I am on windows. But I have clojure and my web app projects working fine.

Shako Farhad13:04:53

Yes it does. But let me double check

dotemacs13:04:27

Now look in your app, what does your project.clj look like, does it have this: https://github.com/drapanjanas/re-natal/pull/228/files (NOTE: the extra =)

Shako Farhad13:04:19

YEs, it is exactly like that.

Shako Farhad13:04:47

Just started up one of my web apps with lein figwheel and it is working as it should.

Shako Farhad13:04:53

So leiningen works fine it seems.

dotemacs13:04:58

When you said yes, did you mean, you do have the extra = ?

Shako Farhad13:04:11

yes, I do have the extra =

Shako Farhad13:04:43

Ah I shouldn\t I guess

dotemacs13:04:54

I think that this setting is only relevant for JVMs that are over 8

dotemacs13:04:13

But just in case, I’d remove it, because it shouldn’t be there.

Shako Farhad13:04:16

Remove the whole line or jsut the =?

dotemacs13:04:45

I’d modify it to look like the green line in the PR I shared above.

dotemacs13:04:10

OK, so I followed the steps on macOS and it worked for me, I got the REPL prompt, as expected. There is a little omission in the steps listed in the README. Try this:

npm install -g re-natal
re-natal init FutureApp
cd future-app
yarn (or npm install, whichever one you prefer)
re-natal use-android-device avd
re-natal use-figwheel
Open a second terminal and run: react-native run-android.
Once it completes, go back to the first terminal and run:
lein figwheel android

Shako Farhad13:04:52

I got a phone call. Let me get back into it. Sorry about the delay

👍 4
Shako Farhad13:04:41

the metro server doesnt start up. The emulator just says that it was unable to load scrip and that I need to make sure that metro srver is running.

dotemacs13:04:11

If something works, don’t post the output of that, but do post the output of whatever doesn’t work, preferably as a gist, here: https://gist.github.com/

Shako Farhad13:04:41

Ah that is the one that didn't work. As it didnt start metro server.

dotemacs13:04:00

OK, but I didn’t see any errors on it.

dotemacs13:04:29

Let me ask you this, have you used these tools on Windows before and confirmed that they work outside of ClojureScript ?

dotemacs13:04:59

As in, you’ve got no problems running all these spinning plates in a vanilla JavaScript setup?

dotemacs13:04:32

I’m asking this, because I’m unfamiliar with Windows, and want to make sure that none of the issues that we’re trying to get to work, can work on Windows.

Shako Farhad13:04:26

Hmmm yeah. Let me startup a normal react native app.

dotemacs13:04:21

If you confirm that all is working, what error do you get when you run react-native run-android?

Shako Farhad14:04:48

Yup works great when I just do react-native init Project cd Project react-native run-android

Shako Farhad14:04:06

I have the emulator up with the Metro running and it works nicely.

dotemacs14:04:42

OK, so go back to the clojurescript project and report back at what step does Metro break for you and share in a gist the error

dotemacs14:04:52

So in that gist that you’ve shared, I don’t see the error. All I can see there is that the app was installed on your Pixel_3a_API_R(AVD).

Shako Farhad14:04:08

My successful attempt with normal react native started the Metro server in another cmd terminal and the run-android command is looping in my original terminal. But when I do the same in re-natal project, the Metro terminal doesnt pop up (It pop ups for 1 milli second and then goes away) and the run-android command doesn't loop.

Shako Farhad14:04:20

I will try to setup the shadowcljs way as it is a bit closer to the normal react native way. Hope it works!

dotemacs14:04:30

Hmmm, that’s unfortunate. Because I don’t have much to go on and tell you what could be broken exactly… So instead of pursuing this path with re-natal could you try another with a different build tool, using shadow-cljs instead of leiningen ?

Shako Farhad14:04:58

We are in sync! 😉

dotemacs17:04:50

The above repo, the shadow-cljs one ?

Shako Farhad17:04:52

I made some modifications and got latest re-frame and latest reagent to work with it. We have an app!

Shako Farhad17:04:01

The one you linked. I didn't want to use expo 🙂

Shako Farhad17:04:19

It successfully built a release app aswell.

👍 4
Shako Farhad17:04:04

I have not tested on mac and ios yet. For now, connecting the app to my own android phone works flawlessly. But connecting to emulator doesn't work. The app inside the emulator just opens and closes.

dotemacs17:04:47

Hmmm, not sure what could be the issue there… but react-native works on both platforms with ClojureScript

Shako Farhad17:04:15

Yeah I will test IOS later. 🙂

🙂 4
👍 4
Shako Farhad17:04:45

As long as it works on my phone I am fine. Don't know why the emulator is being weird, but I guess the phone is better anyway.

dotemacs17:04:48

I remember reading this once, 10+ years ago, and I can’t find the source any more, that describes mobile development experience: “In a Death Star, shooting ants”

Shako Farhad17:04:55

Hopefully that deathstar is a compact pocket magnifying glass now 😜

simple_smile 4
Shako Farhad19:04:09

Dotemacs, you have Mac, right? It seems the "npx react-native run-ios" is not recognized in the repo I am working in. Do you have something like that in your repo? Perhaps you could share how you open a emulator and run the code on mac? I have a macbook pro with cocoapods, java, npm, shadowcljs and leiningen installed.

dotemacs19:04:05

AFK... but try running the above without the npx in front

Shako Farhad19:04:02

I did. It is the same response. As if react native doesnt have a run-ios command.

dotemacs09:04:57

What does react-native -h and react-native --version return?

Shako Farhad10:04:41

I uninstalled the react-native-cli. It seems that react-native recommend to use @react-native-community/cli instead as react-native-cli is deprecated. So I will create a new react-native project with that cli and try to recreate what I did already. This recommended cli package contains all the things needed. 🙂

Shako Farhad10:04:00

I will come back to this thread as soon as I have sometrhing to share!

👍 4
Shako Farhad21:04:46

I have made it all work with the new CLI and it is going great.

Shako Farhad21:04:02

I have even made it work with the android emulator which didn't work earlier.

Shako Farhad21:04:11

But the one problem I have now is that the emulator doesn't update in a very certain case. It is very hard to explain. Perhaps I need to make a video or something 😛

Shako Farhad01:04:35

I have fixed that weird problem as well! I am not 100% sure why, but I needed to elevate my function call to the core.cljs file so that my app hot reloaded correctly with state etc. Otherwise it would just hot reload sometimes and other times it would need a full reload. 😮

Shako Farhad21:04:55

I have managed to get the index.js file compiled with shadow-cljs in a react native app. And I have also managed to create a APK with the gradlew command. The react-native run-android command also works great as it starts the app on my phone (but not on emulator). But I do not have a react-native run-ios command. And i do not know how to build an ios app out of the index.js file. Anyone know how to proceed with this? I have a mac with xcode, react-native-cli, npm, cocoapods, leiningen and shadow-cljs installed.