Fork me on GitHub
#cljsrn
<
2021-12-08
>
FlavaDave20:12:10

I have a shadow-cljs react native project going and keeping having issues using npm packages I am trying to get the stack navigator to work (though i think i might just end up using bidi) and cant figure out why. I will thread examples:

FlavaDave20:12:56

package.json

{
  "name": "UdemyRNChap5",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.11",
    "create-react-class": "^15.7.0",
    "highlight.js": "11.1.0",
    "react": "17.0.2",
    "react-native": "0.66.3",
    "react-native-gesture-handler": "^2.1.0",
    "react-native-reanimated": "^2.3.0",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.10.1",
    "react-native-unimodules": "^0.14.10",
    "react-navigation": "^4.4.4",
    "react-navigation-drawer": "^2.7.1",
    "react-navigation-stack": "^2.10.4",
    "react-navigation-tabs": "^2.11.1",
    "shadow-cljs": "^2.16.7"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/runtime": "^7.16.3",
    "@react-native-community/eslint-config": "^3.0.1",
    "@testing-library/react-native": "^9.0.0",
    "babel-jest": "^27.4.2",
    "eslint": "^8.4.0",
    "jest": "^27.4.3",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

FlavaDave20:12:33

shadow-cljs.edn

;; shadow-cljs configuration
{:source-paths
 ["src"]
 :test-paths ["test"]

 :dependencies
 [[org.clojure/clojure "1.10.3"]
  [org.clojure/core.async "1.5.640"]
  [org.clojure/clojurescript "1.10.891"]
  [bidi "2.1.6"]
  [reagent "1.1.0"]
  [com.rpl/specter "1.1.3"]
  [re-frame "1.2.0"]
  [day8.re-frame/re-frame-10x "1.2.0"]]

 :builds
 {:app
  {:target     :react-native
   :init-fn    udemy-rn.core/init
   :output-dir "app"
   :js-options {:js-package-dirs ["node_modules"]}}
  :test {:target :node-test
         :output-to "target/test/test.js"
         :autorun true}}}

FlavaDave20:12:05

source file:

(ns udemy-rn.naviagators.meals-navigator
  (:require [udemy-rn.screens.categories-screen.views.categories-screen :refer [categories-screen]]
            [udemy-rn.screens.category-meals-screen.views.category-meals-screen :refer [category-meals-screen]]
            [udemy-rn.screens.meal-detail-screen.views.meal-detail-screen :refer [meal-detail-screen]]
            ["react-navigation-stack" :refer [createStackNavigator]]
            ["react-navigation" :refer [createAppContainer]]))

(def meals-navigator
  (createAppContainer
   (createStackNavigator   {:categories categories-screen
                            :category-meals {:screen category-meals-screen}
                            :meal-details meal-detail-screen})))

FlavaDave20:12:24

error:

Execution error (TypeError) at (<cljs repl>:1).
undefined is not an object (evaluating 'shadow.js.shim.module$react_navigation.createAppContainer')

lepistane15:12:46

too much code sorry i can't help via slack. Did you check any examples with react navigation available and see if u are missing something? I dont know where but to me it seems like u are calling non existent object so try to check other working examples and to inspect navigator object to see what in it actually

FlavaDave22:12:29

@U45SLGVHV it ended up being cd ios && pod install that made the difference for me

FlavaDave22:12:04

and then I found some more errors and concluded with

(def meals-navigator
  (let [categoriesScreen (r/reactify-component categories-screen)
        categoryMealsScreen (r/reactify-component category-meals-screen)
        mealDetailScreen (r/reactify-component meal-detail-screen)]
    (createAppContainer
     (createStackNavigator  ^js (-> {:Categories categoriesScreen
                                     :categoryMeals {:screen  categoryMealsScreen}
                                     :mealDetails  mealDetailScreen}
                                    (clj->js))))))

👍 1