How to import react-native-maps to Clojruescript Expo project

Question

I am trying to create a simple Map app using Expo and Clojurescript, but when I try to render the map I get the following error:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

This is what the code looks like:

(ns map-test.core
  (:require [reagent.core :as r :refer [atom]]
            [re-frame.core :refer [subscribe dispatch dispatch-sync]]
            [oops.core :refer [ocall]]
            [map-test.handlers]
            [map-test.subs]))

(def ReactNative (js/require "react-native"))
(def expo (js/require "expo"))
(def view (r/adapt-react-class (.-View ReactNative)))
(def text (r/adapt-react-class (.-Text ReactNative)))
(def MapView (js/require "react-native-maps"))
(def map-view (r/adapt-react-class MapView))

(defn app-root []
  [view {:style {:flex 1}}
   [map-view]])

(defn init []
  (dispatch-sync [:initialize-db])
  (ocall expo "registerRootComponent" (r/reactify-component app-root)))

This is my package.json:

{
  "name": "map-test",
  "version": "0.0.1",
  "description": "",
  "author": "",
  "private": true,
  "main": "main.js",
  "dependencies": {
    "expo": "^34.0.3",
    "react": "16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
    "create-react-class": "15.6.3",
    "react-native-maps": "~0.24.0"
  }
}

I tried to follow the answer shown in here: Using React Native MapView in ClojureScript Reagent but it doesn't seem to work.

All help appreciated!

score 0 · Answer 1 · answered Mar 24 '20 at 22:45

If you console.log the react-native-maps object, you can see that the MapView is assign to default.

(.log js/console ReactNativeMaps)

So you must require the library like that:

(def ReactNativeMaps (js/require "react-native-maps"))
(def map-view (r/adapt-react-class (.-default ReactNativeMaps)))

This is my working test (core.cljs file):

(ns map-test.core
    (:require [reagent.core :as r :refer [atom]]
              [re-frame.core :refer [subscribe dispatch dispatch-sync]]
              [oops.core :refer [ocall]]
              [myapp.handlers]
              [myapp.subs]))

(def ReactNative (js/require "react-native"))
(def expo (js/require "expo"))

(def text (r/adapt-react-class (.-Text ReactNative)))
(def view (r/adapt-react-class (.-View ReactNative)))

(def ReactNativeMaps (js/require "react-native-maps"))
(def map-view (r/adapt-react-class (.-default ReactNativeMaps)))

(def styles {:container
             {:flex 1
              :alignItems "center"
              :justifyContent "center"}
             :mapStyle
             {:width 300
              :height 400}})

(defn app-root []
  [view (:container styles)
    [map-view (:mapStyle styles)]])

(defn init []
  (dispatch-sync [:initialize-db])
  (ocall expo "registerRootComponent" (r/reactify-component app-root)))

Can't get your code to run but I got the point and now my app works. Thousand thanks! — Miika Moilanen, Mar 25 '20 at 12:08

How to import react-native-maps to Clojruescript Expo project

1 Answers1