Using react-native-camera in ClojureScript re-natal development

Question

Has anyone used 'react-native-camera' component with re-natal?

I am just trying out the react-native-camera component in the default re-natal skeleton project.

My code is following

(ns wmshandheld.android.core
  (:require [reagent.core :as r :refer [atom]]
            [re-frame.core :refer [subscribe dispatch dispatch-sync]]
            [wmshandheld.events]
            [wmshandheld.subs]))

(def ReactNative (js/require "react-native"))
(def ReactNativeCamera (js/require "react-native-camera"))

(def app-registry (.-AppRegistry ReactNative))
(def camera (.-Camera ReactNativeCamera))
(def text (r/adapt-react-class (.-Text ReactNative)))
(def view (r/adapt-react-class (.-View ReactNative)))
(def touchable-highlight (r/adapt-react-class (.-TouchableHighlight ReactNative)))

(defn alert [title]
  (.alert (.-Alert ReactNative) title))

(defn app-root []
  (fn []
    [view {:style {:flex-direction "column" :margin 40 :align-items "center"}}
     [camera {:ref    (fn [cam]
                        (this-as this
                          (set! (.-camera this) cam)))
              :style  {:flex 1 :justify-content "flex-end" :align-items "center"}
              :aspect (.-fill (.-Aspect (.-constants camera)))}
      [text {:style {:flex          0 :background-color "#fff"
                     :border-radius 5 :color "#000"
                     :padding       10 :margin 40}
             :on-press #(alert "HELLO!")}
       "[CAPTURE]"]]]))

(defn init []
      (dispatch-sync [:initialize-db])
      (.registerComponent app-registry "WMSHandheld" #(r/reactify-component app-root)))

But I got such an error.

console.error: "Error rendering component (in wmshandheld.android.core.app_root)"
error
    YellowBox.js:71:16
finishClassComponent
    ReactNativeFiber-dev.js:1667:86
updateClassComponent
    ReactNativeFiber-dev.js:1659:33
beginWork
    ReactNativeFiber-dev.js:1786:44
performUnitOfWork
    ReactNativeFiber-dev.js:2528:33
workLoop
    ReactNativeFiber-dev.js:2554:141
_invokeGuardedCallback
    ReactNativeFiber-dev.js:73:23
invokeGuardedCallback
    ReactNativeFiber-dev.js:47:40
performWork
    ReactNativeFiber-dev.js:2593:41
scheduleUpdateImpl
    ReactNativeFiber-dev.js:2728:101
scheduleUpdate
    ReactNativeFiber-dev.js:2711:38
enqueueSetState
    ReactNativeFiber-dev.js:1514:90
setState
    react.development.js:218:31
<unknown>
    figwheel-bridge.js:88:33
waitForFinalEval
    figwheel-bridge.js:197:21
<unknown>
    figwheel-bridge.js:28:17
fireEvalListenters
    figwheel-bridge.js:27:41
<unknown>
    figwheel-bridge.js:118:24
tryCallOne
    core.js:37:14
<unknown>
    core.js:123:25
<unknown>
    JSTimers.js:301:23
_callTimer
    JSTimers.js:154:6
_callImmediatesPass
    JSTimers.js:202:17
callImmediates
    JSTimers.js:470:11
__callImmediates
    MessageQueue.js:278:4
<unknown>
    MessageQueue.js:145:6
__guard
    MessageQueue.js:265:6
flushedQueue
    MessageQueue.js:144:17
callFunctionReturnFlushedQueue
    MessageQueue.js:119:11

Does anyone know what is the problem? and how to solve it? just a bare working example that uses react-native-camera on github or gist would be perfect!...

Answer 1

If this helps this is how I can atleast get the camera to display in the emulator. I havent pasted the whole code but by using [view [camera-component]] in the app root the emulator shows the back camera component. Hope this helps

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


(defn camera-component
  []
  (let data {}]
   (fn []
      [view
       [text "hello"]

       [camera {
                :ref (fn [cam] (this-as this (set! (.-Camera this) cam)))
                :style {:flex 1 :justify-content "flex-end" :align-items "center" :border-color "black" :border-width 1 :min-height "10%"}
                :type (-> ReactNativeCamera .-RNCamera .-Constants .-Type .-back)
                :permission-dialog-title "Permission to use camera"
                :permission-dialog-message "Need permission to use camera on your phone"}]])))