Fork me on GitHub
#cljsrn
<
2019-06-07
>
alex02:06:06

Hi all, I'm having a pretty challenging time getting React Navigation to work in my app. The error I'm getting is that "The component for route 'meta' must be a React component". I'm a little bit confused by the error message because I don't have a 'meta' route (I only have the single :dashboard route)

(def rn (js/require "react-navigation"))

(defn simple-reagent-comp []
  [(r/adapt-react-class (.-Text rn)) "Hello"])

(def route-config {:dashboard {:screen (r/reactify-component simple-reagent-comp)}})
(def createStackNavigatorFn (. nav -createStackNavigator))
(def createAppContainerFn (. nav -createAppContainer))

(defn app-navigator []
  (print "REACTIFY" (r/reactify-component simple-reagent-comp))
  (createStackNavigatorFn route-config))


(defn app-root []
  (fn []  [(r/adapt-react-class (app-navigator))]))

(defn init []
  (dispatch-sync [:initialize-db])
  (ocall expo "registerRootComponent" (r/reactify-component app-root)))

alex02:06:34

I suspect I'm missing some clj->js or js->clj interop somewhere

alex03:06:49

Borrowed some code from @emilior's example above and got it working. I neglected to clj->js the route-config that was passed to the create(Stack|Drawer|Switch)NavigatorFn. Also a silly mistake in there where I had both nav and rn defined for (js/require "react-navigation) but tried to use (.-Text rn)

(def nav (js/require "react-navigation"))
(def rn (js/require "react-native"))

(defn simple-reagent-comp [{:keys [navigation state]}]
  (fn [{:keys [navigation state]}] [ (r/adapt-react-class (.-Text rn)) "Hello"]))

(def route-config {:dashboard {:screen (r/reactify-component simple-reagent-comp)}})
(def createStackNavigatorFn (. nav -createStackNavigator))
(def createAppContainerFn (. nav -createAppContainer))
(def createDrawerNavigatorFn (. nav -createDrawerNavigator))

(def drawerNavigatorOptions
  {:drawerWidth 300
   :drawerPosition "left"
   :drawerBackgroundColor "#c0c0c0"
   :drawerType "front"
   :edgeWidth 10
   :contentComponent (r/reactify-component simple-reagent-comp)})


(defn app-root []
  (let [app (createAppContainerFn (createDrawerNavigatorFn
                                   (clj->js route-config)
                                   (clj->js drawerNavigatorOptions) ))]
    (fn []  [(r/adapt-react-class app)])))

(defn init []
  (dispatch-sync [:initialize-db])
  (ocall expo "registerRootComponent" (r/reactify-component app-root)))

alex04:06:14

Anyone using the Google sign-in module from Expo? https://docs.expo.io/versions/v31.0.0/sdk/google/ I'm able to trigger the system web browser and select a Google account with the following code. After selecting an account, Google redirects me back to Expo as expected. However, I never see the js/console.log get triggered, which makes me wonder what exactly happens to the request

(def expo (js/require "expo"))
(def google-auth (.-Google expo))

(defn some-comp []
  [touchable-highlight
   {:onPress (fn []
               (let [android-client-id "my_android_client_id"
                     config {:androidClientId android-client-id
                             :scopes ["profile" "email"]}]
                 (-> (.logInAsync google-auth (clj->js config))
                     (.then #(js/console.log %))
                     (.catch #(js/console.log %)))
                 ))}
   [text  "Google Sign In"]] )