Basic Project - Icons / Fonts not working

[jamesnyika]

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

and after I dismiss the error i get this:

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.

If you can please expand on the documentation on your README.md file where you show how to require a new resource and actually show how you would use it on a screen it would really help.

thanks in advance.

James

[jamesnyika]

Sean, I wanted to be sure to say thank you for this template. It has made my development work much much easier. But this issue has been a real bummer and I am sure I am doing something idiotic, I just cannot see what I am doing wrong. I currently use images and can display images, but I have not been able to use any of the vector-icons or using my own fonts.

Any help you can provide is appreciated.

[seantempesta]

Hey @jamesnyika. Sorry you've been having a hard time. I believe this was an issue that was solved by @danielneal 10 days ago with pull request #59. I just confirmed that your code works fine if you're using the latest version. I think the biggest change is calling expo's registerRootComponent instead of React Native's.

[jamesnyika]

Holy Moley!!!!!! Sean - I struggled with this for 1 month! Fan-freaking-tastic. I will try it out

[jamesnyika]

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

 (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.

[jamesnyika]

@seantempesta Question: Does this also solve the problem of loading up custom fonts now ? It seems that icons and font loading may have been part of this same problem ?

[seantempesta]

Yeah. I think so.