Clojurescript - Expo Icons never showing

#1

Hi. I am attempting to perform the simplest case of icon use with Expo in a clojurescript environment and I cannot seem to get it to work. I am attempting this on the IOS simulator.

I get this screen

which when dismissed shows

I create a basic project using the expo-cljs-template for leiningen to generate a project.

My core.cljs file looks as follows

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

(def ReactNative (js/require "react-native"))
(def AtExpo (js/require "@expo/vector-icons"))
(def ionicons (.-Ionicons AtExpo))
(def ic (r/adapt-react-class ionicons))

(def app-registry (.-AppRegistry ReactNative))
(def text (r/adapt-react-class (.-Text ReactNative)))
(def view (r/adapt-react-class (.-View ReactNative)))
(def image (r/adapt-react-class (.-Image ReactNative)))
(def touchable-highlight (r/adapt-react-class (.-TouchableHighlight ReactNative)))
(def Alert (.-Alert ReactNative))

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

(defn app-root []
  (let [greeting (subscribe [:get-greeting])]
    (fn []
      [view {:style {:flex-direction "column" :margin 40 :align-items "center"}}
       [image {:source (js/require "./assets/images/cljs.png")
               :style {:width 200
                       :height 200}}]
       [text {:style {:font-size 30 :font-weight "100" :margin-bottom 20 :text-align "center"}} @greeting]
       [ic {:name "ios-add" :size 32 :color "green"}]
       [touchable-highlight {:style {:background-color "#999" :padding 10 :border-radius 5}
                             :on-press #(alert "HELLO!")}
        [text {:style {:color "white" :text-align "center" :font-weight "bold"}} "press me"]]])))

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

Key points: I am trying to follow this example [here] (https://docs.expo.io/versions/v27.0.0/guides/icons#expovector-icons)
except that I have tried to translate it for clojurescript. I require the @expo/vector-icons library and then reference Ionicons. I further run adapt-react-native-class on it to make it a component I can reference in my screen and then use it. (right below the greeting)

Here is my package.json

{
  "name": "unit",
  "version": "0.0.1",
  "description": "",
  "author": "",
  "private": true,
  "main": "main.js",
  "dependencies": {
    "expo": "^25.0.0",
    "react": "16.2.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz",
    "create-react-class": "15.6.3"
  }
}

Other things I have tried : using the async caching approach - no luck.

My question: is there something about what I have done that is missing setting or a call or is the lein template I am using not setting something up ?

Any suggestions or ideas would be appreciated. If I solve this, it should solve the whole custom font loading capability which I am also not able to do.

thanks in advance.

J

#2

Solution

I solved my own problem.
The problem lay with the initial application mounting in Expo as performed by the Sean Tempesta template for leiningen. If you create a project from the latest template (as of today) then you will not have this problem.

For those who would like to save time, here are the steps to applying the change above if you ALREADY have a project going but were struggling with this issue.

This is specific to Reagent only. You may need to perform this exercise yourself if you are going to try and modify for Rum or Om

Step 1: add this dependency to your project.clj

[binaryage/oops "0.5.8"]

Step 2: Modify js/figwheel-bridge.js as follows

// add a new var after React native require (around line 18 or so) 
var Expo = require('expo'); 

// replace your startApp function at around line 222 with this below

function startApp(appName, platform, devHost) {
    Expo.registerRootComponent(figwheelApp(platform, devHost));
}

Step 3: Modify your core.cljs file

;; add a new dependency
[oops.core :refer [ocall]] 

;; modify the init function at the bottom to use this registration function instead of what you have
;; note - expo here refers to the expo you required earlier... 

 (ocall Expo "registerRootComponent" (r/reactify-component app-root)) 

Step 4. Once you do these things… the code I have higher up in this issue should work perfectly fine when you run lein figwheel and start up expo.

1 Like
#3

Awesome! Glad you got it sorted out!

closed #4

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.