Fork me on GitHub
#cljsrn
<
2017-07-16
>
husain.mohssen17:07:41

beginner question: I'm trying to use a new react-native module and I'm getting stuck. Here is what I did: 1. I installed the module as outlined here: https://github.com/airbnb/react-native-maps/blob/master/docs/installation.md specifically I ran: npm install react-native-maps --save and then: react-native link react-native-maps and I get

rnpm-install info Android module react-native-maps is already linked 
rnpm-install info iOS module react-native-maps is already linked 
2. I restart the REPL and the native env using
re-natal use-ios-device simulator
        react-native run-ios
and it builds ok. now from the repl when I do: (def MapView (js/require "react-native-maps")) I get this error message
#object[Error Error: Unknown named module: 'react-native-maps']
_require@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:46:22
require@http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false:46521:26



eval code
eval@[native code]
figwheel$client$utils$eval_helper

husain.mohssen17:07:27

as I said I can see a react-native-maps folder in the node_module folder:

du -h node_modules/react-native-maps/ | tail 
1.6M	node_modules/react-native-maps//lib/ios/build/Build
  0B	node_modules/react-native-maps//lib/ios/build/Logs/Build
  0B	node_modules/react-native-maps//lib/ios/build/Logs
 16M	node_modules/react-native-maps//lib/ios/build/ModuleCache/2FAQ0U4HD9N1L
 16M	node_modules/react-native-maps//lib/ios/build/ModuleCache
 17M	node_modules/react-native-maps//lib/ios/build
 18M	node_modules/react-native-maps//lib/ios
189M	node_modules/react-native-maps//lib
4.0K	node_modules/react-native-maps//scripts
198M	node_modules/react-native-maps/

pesterhazy17:07:09

@husain.mohssen have you used re-natal use-component ?

husain.mohssen17:07:34

@pesterhazy No, let me google how to use it

husain.mohssen17:07:35

I did

re-natal use-component react-native-maps
 re-natal use-figwheel
and then restarted the repl and still getting the same error I also edited the package.json to manually add the dependency

pesterhazy17:07:20

restart the packager

pesterhazy17:07:25

clear the packager cache

pesterhazy17:07:47

(`react-native start --reset-cache true` I think)

husain.mohssen17:07:15

hmm something is not right... I'm getting this:

husain.mohssen17:07:06

the problem seems to be that I'm somehow including the component incorrectly.

husain.mohssen17:07:51

the instructions said var MapView = require('react-native-maps'); so I assumed I should have used: re-natal use-component react-native-maps/MapView ios

husain.mohssen17:07:02

but it seems that's wrong

pesterhazy17:07:29

why do you assume that?

pesterhazy17:07:04

did you try re-natal use-component react-native-maps and (def map-view (js/require "react-native-maps"))?

pesterhazy17:07:56

remember to do the following steps after a change: use-figwheel, restart figwheel

pesterhazy17:07:14

you can check the components that were added in .re-natal

husain.mohssen17:07:08

hmm I think I changed it to that state and I'm getting an unrelated error

husain.mohssen17:07:58

I'm confused it is complaining about the style property of reactNative

husain.mohssen18:07:48

I reset the application to make sure I'm in a known state and it works. As soon as I do re-natal use-component react-native-maps and restart everything it breaks and gives me the above error message. my .re-natal file looks like this now:

{
  "name": "MyVal",
  "interface": "reagent6",
  "androidHost": "localhost",
  "iosHost": "localhost",
  "envRoots": {
    "dev": "env/dev",
    "prod": "env/prod"
  },
  "modules": [
    "react-native-maps"
  ],
  "imageDirs": [
    "images"
  ]
}

pesterhazy18:07:05

@husain.mohssen that's probably related to your react-native version

pesterhazy18:07:24

or the react version actually

pesterhazy18:07:41

which version are you using?

husain.mohssen18:07:45

here is package.json

{
  "name": "MyVal",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node_modules/react-native/packager/packager.sh --nonPersistent",
    "test": "jest"
  },
  "dependencies": {
    "babel-plugin-transform-es2015-block-scoping": "6.15.0",
    "react": "15.4.2",
    "react-native": "0.42.0",
    "react-native-maps": "^0.15.3"
  },
  "devDependencies": {
    "babel-jest": "19.0.0",
    "babel-preset-react-native": "1.9.1",
    "jest": "19.0.2",
    "react-test-renderer": "15.4.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

pesterhazy18:07:11

yeah, upgrade to a newer version of react

husain.mohssen18:07:39

sorry to ask this: -how do I do that properly-?

husain.mohssen18:07:55

(ie upgrading the react-native version? )

husain.mohssen18:07:15

don't I need to upgrade the packages.json file?

pesterhazy18:07:30

sorry yeah you have to add --save

pesterhazy18:07:41

I use yarn these days

husain.mohssen18:07:07

npm WARN [email protected] requires a peer of [email protected] but none was installed.
I tried to install them all and they don't work.

husain.mohssen18:07:19

let me see what's the deal with yarn 🙂

pesterhazy18:07:30

try adding react as well

pesterhazy18:07:18

hang in there, there's a light at the end of the tunnel

husain.mohssen18:07:26

I did,it kept on complaining but at the end itwas installing (I think)

mfikes18:07:27

Bah! I spent a few hours tweaking some animations in the simulator, and found they don’t run on physical iOS hardware.

mfikes18:07:42

TIL 🙂

pesterhazy18:07:09

annoying. so they worked in the simulator but not on any actual device?

mfikes18:07:50

@pesterhazy I have timed opacity “fade out” animation, and when I ran it in the simulator with :useNativeDriver true it actually complained that the native driver doesn’t support a “left” property. So I switched it to :useNativeDriver false and it ran fine in the simulator. On the device the duration expires, but I see no actual change in opacity. (This is no generally true, though, as I have other “opacity” animations that work.)

mfikes18:07:29

Wait… I just tried again and the animations are now working on the device. Odd. OK.

pesterhazy18:07:06

reload problem, maybe?

mfikes18:07:33

Yeah. I think I concluded too quickly that they won’t work on device.

mfikes18:07:26

Oh, I think I know what is going on: I’m mixing a native pan spring animation with a non-native opacity animation. My guess is that if the spring animation doesn’t need to move the view, the opactity animation can run in JavaScript.

husain.mohssen18:07:49

@pesterhazy it's not working:( I did an install using npm install [email protected] [email protected] react@^15.4.2 --save and it updates the package.json but then gives me the warning:

pesterhazy18:07:03

yeah from what I hear RN's Animated is not an exact science

pesterhazy18:07:12

a bit of trial an error is involved

husain.mohssen18:07:18

`npm WARN [email protected] requires a peer of [email protected] but none was installed. `

pesterhazy18:07:39

wait why did you specify react twice? get rid of the 2nd one

mfikes18:07:41

Lesson learned: Try your stuff on device fairly regularly 🙂

husain.mohssen18:07:28

I tried this:

npm install [email protected] [email protected]  --save
and Iget:
[email protected] /Users/husain/src/my-val
├── UNMET PEER DEPENDENCY [email protected]
└── [email protected] 

npm WARN [email protected] requires a peer of react@^15.4.2 but none was installed.
even when I run the react install alone I get into trouble: npm install [email protected] --save
[email protected] /Users/husain/src/my-val
└── UNMET PEER DEPENDENCY [email protected]

npm WARN [email protected] requires a peer of react@^15.4.2 but none was installed.

husain.mohssen18:07:37

should I ignore the warning?

husain.mohssen18:07:36

I don't think I can because I can't proceed: when I run react-native start --reset-cache I get this compile message:

/Users/husain/src/my-val/node_modules/babel-core/lib/transformation/file/index.js:590
      throw err;
      ^

SyntaxError: /Users/husain/src/my-val/node_modules/react-native/local-cli/core/index.js: Unexpected token (29:2)
  27 | 
  28 | export type RNConfig = {
> 29 |   ...ConfigT,
     |   ^
  30 |   /**
  31 |    * Returns an array of project commands used by the CLI to load
  32 |    */
    at Parser.pp$5.raise (/Users/husain/src/my-val/node_modules/babylon/lib/index.js:4373:13)
    at Parser.pp.unexpected (/Users/husain/src/my-val/node_modules/babylon/lib/index.js:1716:8)
    at Parser.pp$3.parseIdentifier (/Users/husain/src/my-val/node_modules/babylon/lib/index.js:4251:10)
    at Parser.pp$8.flowParseObjectPropertyKey (/Users/husain/src/my-val/node_modules/babylon/lib/index.js:5169:90)
    at Parser.pp$8.flowParseObjectType (/Users/husain/src/my-val/node_modules/babylon/lib/index.js:5283:26)
    at Parser.pp$8.flowParsePrimaryType (/Users/husain/src/my-val/node_modules/babylon/lib/index.js:5462:19)
    at Parser.pp$8.flowParsePostfixType (/Users/husain/src/my-val/node_modules/babylon/lib/index.js:5580:19)
    at Parser.pp$8.flowParsePrefixType (/Users/husain/src/my-val/node_modules/babylon/lib/index.js:5597:17)
    at Parser.pp$8.flowParseAnonFunctionWithoutParens (/Users/husain/src/my-val/node_modules/babylon/lib/index.js:5602:20)
    at Parser.pp$8.flowParseIntersectionType (/Users/husain/src/my-val/node_modules/babylon/lib/index.js:5617:19)

husain.mohssen18:07:09

(side note: should cljsrn feel like a text-based adventure game ? 🙂 )

pesterhazy18:07:38

This is an npm problem - unfortunately common enough

husain.mohssen18:07:35

I tried nuking node_modules and reinstalling and it did not work

husain.mohssen18:07:42

let me try to upgrade npm too 🙂

pesterhazy18:07:45

Or jump straight to yarn

husain.mohssen19:07:28

is yarn compatible with the re-natal?

husain.mohssen19:07:16

seems like yarn is not happy either 😞

yarn install
yarn install v0.27.5
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning "[email protected]" has incorrect peer dependency "[email protected]".
warning "[email protected]" has incorrect peer dependency "react@^15.4.2".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 49.43s.

husain.mohssen19:07:10

it's a devDependency

husain.mohssen19:07:23

in my package.json don't know what it does or why

husain.mohssen19:07:01

hmm now the build fails:

/Users/husain/src/my-val/ios/build/Build/Intermediates/MyVal.build/Debug-iphonesimulator/MyVal.build/Script-00DD1BFF1BD5951E006B06BC.sh: line 3: ../node_modules/react-native/packager/react-native-xcode.sh: No such file or directory



** BUILD FAILED **

carocad08:07:49

martinklepsch: nice ! but I actually tried using :nodejs target before and it didnt work 😞 RN complained about needing some filesystem modules. Do you know if this only works on the latest cljs version?

martinklepsch08:07:40

@U0LJU20SJ yes, I think this builds upon some of the many recent improvements with regards to JS interop

martinklepsch08:07:19

the tweet also states “ClojureScript master”… there will be a release later this week I believe

carocad08:07:06

Oh I am so excited about these changes 🙂 looking forward to getting rid of so many workarounds in the rn cljs projects

Oleh K.07:07:43

I've tried this with clojurescript master and react-native packager didn't compile (path and fs modules are not found, :optimizations :none). And I've noticed that lein prod-build writes node dependencies into package.json. In this case this whole thing with :npm-deps has no sense.

carocad09:07:24

@U5JRN2PU0 afaik the react native packager is not able to recognize js code compiled with :none. If you check the index.android.js there are some goog.require commands there, which are a problem for rn. Please try with :simple. Also the changes in cljs master are not regarding the :npm-deps. Those are still a problem with react native. This is only about the way in which you require javascript libraries from clojurescript. Before you had to manually write the js/require form. Now you just put it inside the ns declaration like any other cljs library. I recommend you this blog entry from @U04VDQDDY: http://blog.fikesfarm.com/posts/2017-07-17-cleaner-clojurescript-react-native-interop.html

mfikes21:07:52

You can also use :refer, so for example:

(ns my-app.core
  (:require
   [react-native :refer [AppRegistry View Text Image TouchableHighlight Animated]])
and if you need something deeper, you can do something like refer to react-native/Animated.View or react-native/Animated.spring

mfikes21:07:16

The TL;DR is you can eliminate lots of explicit js/require and defs and instead shove stuff up into your ns form, or use symbols to refer to things.

mfikes21:07:42

You can even use it to require 3rd party components as in having this in your ns form

[react-native-color-picker :refer [ColorPicker]]

mfikes22:07:11

I’ve tested the above with :advanced and it doesn’t seem to change the story (which is good). TL;DR, externs continue to be honored, etc. One way you can look at it is extremely nice sugar that gets the compiler to emit a lot of the stuff you might explicitly write by hand, especially js/require statements, and def forms that can be eliminated in favor of just using interop