Fork me on GitHub
#cljsrn
<
2018-01-04
>
wontheone106:01:02

Oh thanks it s Android. Proly I can see the log in Android studio? I will try @pesterhazy

wontheone107:01:56

I checked logcat in android studio and it says

wontheone107:01:48

so it seems like my camera is undefined. (nil)

wontheone107:01:11

@pesterhazy was it right error message?

pesterhazy07:01:02

Try printing out the object: (prn ReactNativeCamera)

harrybin07:01:45

Also print out your camera from (def camera (.-Camera ReactNativeCamera)) A lot of the time it is actually .-default like: (def camera (.-default ReactNativeCamera))

pesterhazy07:01:21

That’s what I suspected as well but I wanted to explain the debugging process

pesterhazy07:01:51

You may also need to use the re-natal use-component command to make the npm lib visible to figwheel

wontheone107:01:22

Thank you guys! I was almost too frustrated ! I will try default and use-component command

wontheone108:01:34

yes turns out there's object in (def camera (.-default ReactNativeCamera))

wontheone108:01:07

but there is nothing was returned from render error. From camera component (as I delete the component then I see no errors.

wontheone108:01:16

the code is mostly unchanged... do I need to upload it? do you know why it might happen?

harrybin08:01:16

Compare these two lines: (def camera (.-default ReactNativeCamera)) (def text (r/adapt-react-class (.-Text ReactNative))) The difference is an indication of why you get the error

harrybin08:01:51

Read up on r/adapt-react-class to gain some more insight

wontheone109:01:41

Mmm true! Yes I will thanks. I saw app registry didn't need adapt react class function and I tried adapt react class function with .-Camera property but I forgot to do it with .-default ! I will try thanks!

wontheone109:01:27

Only been in web World it s first my mobile project, sorry if I am asking too many basics!

harrybin09:01:37

No, that's fine.

wontheone114:01:23

@harrybin Now that I have the time to try adapt-react-class function, I think the (.-default ReactNativeCamera) is not meant to be adapted

wontheone114:01:04

printing out after adapting only shows #object[reagent.impl.template.NativeWrapper]

wontheone114:01:33

whereas (.-default ReactNativeCamera) has the following

pesterhazy15:01:14

@wontheone1 it's a React component; to use it with Reagent you need to wrap in in adapt-react-class

wontheone115:01:43

re-natal use-component react-native-camera/default re-natal use-component react-native-camera/Camera re-natal use-component react-native-camera I tried all these command now because I don't know which one's right one to use πŸ˜„

wontheone115:01:39

Hopefully there was an easy to follow tutorial for this

wontheone115:01:00

Also will try out all these

wontheone115:01:33

(def ReactNativeCamera (js/require "react-native-camera")) (def camera1 (r/adapt-react-class (.-default ReactNativeCamera)))

wontheone115:01:34

(println :debug camera1)

wontheone115:01:52

prints :debug nil

wontheone115:01:28

no I think print prints :debug #object[reagent.impl.template.NativeWrapper]

wontheone115:01:30

another thing noticed is actually constants property is in ReactNativeCamera not in (.-default ReactNativeCamera)

pesterhazy16:01:49

try to poke around in the fighweel repl, if you can

pesterhazy16:01:05

don't worry, react-native-camera works with reagent

pesterhazy16:01:14

take it slowly, don't do too much at the same time

pesterhazy16:01:20

start from a minimal example

wontheone116:01:55

I am really trying to do minimal example πŸ™‚...

wontheone116:01:12

I got to point no error but white screen is all I see

wontheone116:01:34

no touchable-highlight or text that I set it as button

wojciech16:01:39

Did you set the height and width for the camera component?

wojciech16:01:02

If you don't set them explicitly in the component's style, it defaults to 0 and you can't see anything

wojciech16:01:33

(When I'm testing out stuff like this, I also set backgroundColor, to make sure something is displayed)

wontheone116:01:41

yes I pretty much tried to just translate the basic JS example to cljs

wontheone116:01:22

I wonder if i did the right thing in :ref key

wontheone116:01:48

it needed this-as key which I am not sure from which context I need this

wojciech16:01:04

You have flex: 1 as camera style, as far as I remember, that won't work

wojciech16:01:13

You need to be explicit with height / width

wontheone116:01:04

Oh another thing I found is my outer most view is really small

wontheone116:01:23

@wojciech In the official react-native-camera README they are using

wontheone116:01:25

preview: { flex: 1, justifyContent: 'flex-end', alignItems: 'center' },

wontheone116:01:39

So the cljs can use the same right?

wontheone116:01:57

I also saw a js tutorial that uses that

wojciech16:01:58

Okay, you're right - maybe that changed

wontheone116:01:16

Now I actually see small box

wojciech16:01:17

So I have no other idea, other than maybe the view being too small to show it

wontheone116:01:25

small gray box

wontheone116:01:52

I am not sure if this is camera on emulator ... and if it is why so small πŸ˜„

wojciech16:01:04

On emulator in Android you see a fake image

wojciech16:01:09

Because there's no real camera

wontheone116:01:24

is the fake image gray?

wojciech16:01:26

It's a grey background with a box bouncing around, IIRC

wontheone116:01:05

I see I might be going somewhere then... although I don't see the bouncing box

wojciech16:01:09

Can you check on a real device?

wontheone116:01:12

Hmm I only have iPhone right now...

wontheone116:01:36

How did you set the :ref key for the camera component?

wontheone117:01:58

I see this error in logcat

wontheone117:01:35

Current code looks like this, if somebody can point me to code example where it is using react-native-camera, I 'd really appreciate πŸ™‚ I am especially not sure what is the value of the :ref key and how did you use this-as macro if you have used it.

pesterhazy17:01:07

I wouldn't use this

pesterhazy17:01:28

why do you use aspect etc.? Leave it out and see if you can make it work like that

pesterhazy17:01:02

set an explicit width and ehight to the camera component until you make it work β€” then clean it up by using flexbox etc

pesterhazy17:01:22

capturing the camera in a ref only makes sense if you use the ref somehow (in the on-press handler I guess)

wontheone117:01:52

Ok I ll try that when I have time. thanks ! I just thought this.camera = cam; was needed to render camera :)