Fork me on GitHub

Allright, let's see how far I got with: I seem to be succeeded to let it run without any errors so far ūüôā. in .re-natal:

"modules": [
in core.cljs:
(def Mapbox (js/require "react-native-mapbox-gl")) ;; import Mapbox from 'react-native-mapbox-gl';
(.setAccessToken Mapbox "xxx") ;; Mapbox.setAccessToken('xxx');
(def mapview (partial create-element (.-MapView Mapbox))) ;; import { MapView } from 'react-native-mapbox-gl';
 (view {:style {:flexDirection "column" :margin 40 :alignItems "center"}}
                (text {:style {:fontSize 30 :fontWeight "100" :marginBottom 20 :textAlign "center"}} (:greeting @state))
                (image {:source logo-img
                        :style  {:width 80 :height 80 :marginBottom 30}})
                (touchable-highlight {:style   {:backgroundColor "#999" :padding 10 :borderRadius 5}
                                      :onPress #(alert "HELLO!")}
                                     (text {:style {:color "white" :textAlign "center" :fontWeight "bold"}} "press me"))
                (mapview))) ;; <MapView />
Two problems: 1. No map is shown, so I guess my mapview is not right ūüôā. 2. Figwheel doesn't seem to run. When starting the app, it shows waiting for figwheel to load..., but the console where I run lein figwheel android shows Prompt will show when Figwheel connects to your application (so, Figwheel doesn't seem to connect)


Try defining your mapview like this instead (def mapview (r/adapt-react-class (.-MapView MapBox)))


And make sure to enable both Android then Figwheel in that order


$ re-natal use-android-device <real|genymotion|avd>
$ re-natal use-figwheel
$ lein figwheel android 


Figwheel doesn't connect (I commented the new lines, just to be sure there's nothing wrong with these). The app does start, though.

$ re-natal use-android-device real
Using 'localhost' for device type real
Please run: re-natal use-figwheel to take effect.
$ re-natal use-figwheel
index.ios.js was regenerated was regenerated
Host in RCTWebSocketExecutor.m was updated
Dev server host for iOS: localhost
Dev server host for Android: localhost
$  lein figwheel android 
Figwheel: Cutting some fruit, just a sec ...
Figwheel: Validating the configuration found in project.clj
Figwheel: Configuration Valid :)
Figwheel: Starting server at 
Figwheel: Watching build - android
Figwheel: Cleaning build - android
Compiling "target/android/not-used.js" from ["src" "env/dev"]...
Successfully compiled "target/android/not-used.js" in 8.062 seconds.
Launching ClojureScript REPL for build: android
Figwheel Controls:
          (stop-autobuild)                ;; stops Figwheel autobuilder
          (start-autobuild [id ...])      ;; starts autobuilder focused on optional ids
          (switch-to-build id ...)        ;; switches autobuilder to different build
          (reset-autobuild)               ;; stops, cleans, and starts autobuilder
          (reload-config)                 ;; reloads build config and resets autobuild
          (build-once [id ...])           ;; builds source one time
          (clean-builds [id ..])          ;; deletes compiled cljs target files
          (print-config [id ...])         ;; prints out build configurations
          (fig-status)                    ;; displays current state of system
  Switch REPL build focus:
          :cljs/quit                      ;; allows you to switch REPL to another build
    Docs: (doc function-name-here)
    Exit: Control+C or :cljs/quit
 Results: Stored in vars *1, *2, *3, *e holds last exception object
Prompt will show when Figwheel connects to your application


Not sure about this line: (def mapview (r/adapt-react-class (.-MapView MapBox))) - is that reagent specific? (I'm using rum now, and it has this create-element function; maybe I should try with reagent instead of rum?)


Got it. Very true didn't ask what you are using. I haven't used rum myself so not sure how it's done there


That's odd about the hang, I do know there was something about some avd magic you have to do to forward ports


Sorry meant adb


To run figwheel with real Android device please read Running on Device.
To make it work on a USB connected device I also had to run:
$ adb reverse tcp:8081 tcp:8081
$ adb reverse tcp:3449 tcp:3449 
$ re-natal use-android-device real
$ re-natal use-figwheel
$ lein figwheel android
$ react-native run-android 


Right... will try again. clean etc. if it doesn't work, I'll try a fresh project with reagent.


ok, got figwheel running now ūüôā thx. Problem one: solved ūüėõ


probably rerunning adb reverse did the trick. Weird, but well, nice ūüôā.


Notice the line about Figwheel starting on 3449, that's the reason for the need to forward the port. Can't recall why 8081


Without those forwards your device can't talk back to Figwheel


So, things seem to move forward; in the repl, from my ns

.core=> (str Mapbox)
"[object Object]"
.core=> (mapview)
#js {:$$typeof 60103, :type #object[MapView "function MapView(props) {
    babelHelpers.classCallCheck(this, MapView);

    var _this = babelHelpers.possibleConstructorReturn(this, (MapView.__proto__ || Object.getPrototypeOf(MapView)).call(this, props));

    _this._native = null;

    _this._onRegionDidChange = _this._onRegionDidChange.bind(_this);
    _this._onRegionWillChange = _this._onRegionWillChange.bind(_this);
    _this._onOpenAnnotation = _this._onOpenAnnotation.bind(_this);
    _this._onRightAnnotationTapped = _this._onRightAnnotationTapped.bind(_this);
    _this._onChangeUserTrackingMode = _this._onChangeUserTrackingMode.bind(_this);
    _this._onUpdateUserLocation = _this._onUpdateUserLocation.bind(_this);
    _this._onLongPress = _this._onLongPress.bind(_this);
    _this._onTap = _this._onTap.bind(_this);
    _this._onFinishLoadingMap = _this._onFinishLoadingMap.bind(_this);
    _this._onStartLoadingMap = _this._onStartLoadingMap.bind(_this);
    _this._onLocateUserFailed = _this._onLocateUserFailed.bind(_this);
    _this._onNativeComponentMount = _this._onNativeComponentMount.bind(_this);
    return _this;
  }"], :key nil, :ref nil, :props #js {:initialCenterCoordinate #js {:latitude 0, :longitude 0}, :initialDirection 0, :initialZoomLevel 0, :minimumZoomLevel 0, :maximumZoomLevel 20, :debugActive false, :rotateEnabled true, :scrollEnabled true, :pitchEnabled true, :showsUserLocation false, :styleURL "", :userTrackingMode 0, :zoomEnabled true, :annotationsPopUpEnabled true, :attributionButtonIsHidden false, :logoIsHidden false, :compassIsHidden false, :annotationsAreImmutable false, :annotations #js [], :contentInset #js [0 0 0 0]}, :_owner nil, :_store #js {}}
No map is shown, but at least, I seem to have a component ūüėõ


What does your new view code look like


  (:require-macros [rum.core :refer [defc]])
  (:require [ :as support]
            [rum.core :as rum]))

(set! js/window.React (js/require "react"))
(def ReactNative (js/require "react-native"))

(def Mapbox (js/require "react-native-mapbox-gl"))
(.setAccessToken Mapbox "XXX")

(defn create-element [rn-comp opts & children]
      (apply js/React.createElement rn-comp (clj->js opts) children))

(def app-registry (.-AppRegistry ReactNative))
(def view (partial create-element (.-View ReactNative)))
(def text (partial create-element (.-Text ReactNative)))
(def image (partial create-element (.-Image ReactNative)))
(def touchable-highlight (partial create-element (.-TouchableHighlight ReactNative)))
(def mapview (partial create-element (.-MapView Mapbox)))

(def logo-img (js/require "./images/cljs.png"))

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

(defonce app-state (atom {:greeting "Hey hey! Welcome to cljs in iOS and Android!"}))

(defc AppRoot < rum/cursored-watch [state]
          (view {:style {:flexDirection "column" :margin 40 :alignItems "center"}}
                (text {:style {:fontSize 30 :fontWeight "100" :marginBottom 20 :textAlign "center"}} (:greeting @state))
                (image {:source logo-img
                        :style  {:width 80 :height 80 :marginBottom 30}})
                (touchable-highlight {:style   {:backgroundColor "#999" :padding 10 :borderRadius 5}
                                      :onPress #(alert "HELLO!")}
                                     (text {:style {:color "white" :textAlign "center" :fontWeight "bold"}} "press me"))

(defonce root-component-factory (support/make-root-component-factory))

(defn mount-app [] (support/mount (AppRoot app-state)))

(defn init []
      (.registerComponent app-registry "app" (fn [] root-component-factory)))


Looks like with rum you're supposed to do? (def mapview (aget MapBox "MapView"))


.core=> (def mapview (aget MapBox "MapView")) 
#object[TypeError TypeError: undefined is not an object (evaluating '["MapView"]')]
Well, doing it with (def mapview (partial create-element (.-MapView Mapbox))), I seem to get at least a valid-looking function.


same type as text (if that matters at all):

.core=> (text)
#js {:$$typeof 60103, :type #object[Function "function (props, context, updater) {

      if (process.env.NODE_ENV !== 'production') {
        process.env.NODE_ENV !== 'production' ? warning(this instanceof Constructor, 'Something is calling a React component directly. Use a factory or ' + 'JSX instead. See:  : void 0;

      if (this.__reactAutoBindPairs.length) {

      this.props = props;
      this.context = context;
      this.refs = emptyObject;
      this.updater = updater || ReactNoopUpdateQueue;

      this.state = null;

      var initialState = this.getInitialState ? this.getInitialState() : null;
      if (process.env.NODE_ENV !== 'production') {
        if (initialState === undefined && this.getInitialState._isMockFunction) {
          initialState = null;
      !(typeof initialState === 'object' && !Array.isArray(initialState)) ? process.env.NODE_ENV !== 'production' ? invariant(false, '%s.getInitialState(): must return an object or null', Constructor.displayName || 'ReactCompositeComponent') : _prodInvariant('82', Constructor.displayName || 'ReactCompositeComponent') : void 0;

      this.state = initialState;
    }"], :key nil, :ref nil, :props #js {:accessible true, :allowFontScaling true, :ellipsizeMode "tail"}, :_owner nil, :_store #js {}}


Yeah I'm not familiar enough with rum to know what might be off, but it definitely looks like you're close


thanks a lot for helping me so far ūüôā. .


got it working! cool, thanks - it was about styling:

(view ;;{:style {:flexDirection "column" :margin 40 :alignItems "center"}}
                {:style {:flex 1, :alignItems "stretch"}}
                (mapview {:style {:flex 1}})
                (text {:style {:fontSize 30 :fontWeight "100" :marginBottom 20 :textAlign "center"}} (:greeting @state))
                (image {:source logo-img
                        :style  {:width 80 :height 80 :marginBottom 30}})
                (touchable-highlight {:style   {:backgroundColor "#999" :padding 10 :borderRadius 5}
                                      :onPress #(alert "HELLO!")}
                                     (text {:style {:color "white" :textAlign "center" :fontWeight "bold"}} "press me"))))


Nice ūüôā


{:style {:flex 1, :alignItems "stretch"}} - have map {:flexDirection "column" :margin 40 :alignItems "center"}} - no map


Bah. I should have caught that...I was wondering if it was view ordering at one point but it was size


Nice work