Fork me on GitHub
#cljsrn
<
2017-04-16
>
kurt-o-sys02:04:59

Allright, let's see how far I got with: https://github.com/mapbox/react-native-mapbox-gl/blob/master/API.md#access-token I seem to be succeeded to let it run without any errors so far 🙂. in .re-natal:

"modules": [
    "react-native-mapbox-gl"
  ],
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)

benny02:04:51

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

benny02:04:21

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

benny02:04:35

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

kurt-o-sys02:04:48

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
Cleaning...
index.ios.js was regenerated
index.android.js 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

kurt-o-sys02:04:59

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?)

benny02:04:20

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

benny02:04:18

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

benny02:04:48

Sorry meant adb

benny02:04:55

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 
Then:
$ re-natal use-android-device real
$ re-natal use-figwheel
$ lein figwheel android
$ react-native run-android 

kurt-o-sys02:04:51

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

kurt-o-sys02:04:23

ok, got figwheel running now 🙂 thx. Problem one: solved 😛

kurt-o-sys02:04:01

probably rerunning adb reverse did the trick. Weird, but well, nice 🙂.

benny02:04:34

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

benny02:04:04

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

kurt-o-sys02:04:38

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 😛

benny03:04:17

What does your new view code look like

kurt-o-sys03:04:26

(ns app.android.core
  (:require-macros [rum.core :refer [defc]])
  (:require [re-natal.support :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"))
                (mapview)
))

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

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

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

benny03:04:46

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

kurt-o-sys03:04:23

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

kurt-o-sys03:04:18

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) {
        bindAutoBindMethods(this);
      }

      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 {}}

benny03:04:13

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

kurt-o-sys03:04:20

thanks a lot for helping me so far 🙂. .

kurt-o-sys03:04:30

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"))))

kurt-o-sys03:04:25

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

benny03:04:43

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

benny03:04:45

Nice work