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