Using React Native MapView in ClojureScript Reagent

Question

I am trying to use MapView from https://github.com/airbnb/react-native-maps using Reagent. It works fine but how could I get local state for MapView when onRegionChange event is fired? Trying to use current/component but it is always nil.

(def Expo (js/require "expo"))
(def map-view (r/adapt-react-class (.-MapView Expo)))

(defn my-map []
   (r/create-class
     {:component-did-mount (fn [this] 
                       (println "component mount "))
      :reagent-render (fn []
                  (let [this (r/current-component)]
                    [map-view {:style {:flex 1}
                               :initialRegion {:latitude 37.78825
                                               :longitude -122.4324
                                               :latitudeDelta 0.0922
                                               :longitudeDelta 0.0421}
                                 :onRegionChange (fn []
                                                  ;; Would like to see state here.
                                                  (println (.. this -state))                                                       )}]))}))

Here is expo documentation for more info docs.expo.io/versions/latest/sdk/map-view.html — Mamun
– Mamun, Commented Sep 22, 2017 at 3:18

user2609980 · Accepted Answer · 2017-09-23 19:58:55Z

1

Region information

The onRegionChange callback has Region as argument. Region has the following signature:

type Region {
  latitude: Number,
  longitude: Number,
  latitudeDelta: Number,
  longitudeDelta: Number,
}

You can get the values from the Region by using goog.object/get.

If you get the region and extract the values from it your my-map looks like:

(defn my-map []
  [map-view {:style         {:flex 1}
             :initialRegion {:latitude       52.3702
                             :longitude      4.89516
                             :latitudeDelta  0.0922
                             :longitudeDelta 0.0421}
             :onRegionChange (fn [region]
                               (alert (str "Latitude: "
                                           (goog.object/get region "latitude")
                                           "\nLongitude: "
                                           (goog.object/get region "longitude"))))}])

You can obtain the latitudeDelta and longitudeDelta in the same manner.

When you drag the map the latitude and longitude show up:

react-native-maps

The component

If you want access to the component itself your code works fine, you just have to visualize it:

(defn jsx->clj
  [x]
  (into {} (for [k (.keys js/Object x)] [k (aget x k)])))

(defn my-map []
  (let [this (r/current-component)]
    [map-view {:style          {:flex 1}
               :initialRegion  {:latitude       37.78825
                                :longitude      -122.4324
                                :latitudeDelta  0.0922
                                :longitudeDelta 0.0421}
               :onRegionChange (fn [region]
                                 ;; Would like to see state here.

                                 (alert "The component..."
                                        (str (jsx->clj this))))}]))

This prints something like:

Print component itself

Not sure if you can do anything with the component, I think you need the Region information.

answered Sep 23, 2017 at 19:58

user2609980

10.5k17 gold badges87 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mamun Over a year ago

Thanks for your hard work. But my problem was to get local state not region. Because local state has child component, region, markers etc. I need all local state of that component. How do I get local state?

user2609980 Over a year ago

Thank you for the question. ;) Glad I am now on my way to programming a React Native app as well. And aha I see. When I look in this the "state" is nil, also when there are markers available. Maybe you can create your own override of a callback function that has more state in :componentDidMount. This is a begin: stackoverflow.com/questions/43176862/….

Collectives™ on Stack Overflow

Using React Native MapView in ClojureScript Reagent

1 Answer 1

Region information

The component

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Region information

The component

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related