This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-07-16
Channels
- # aleph (4)
- # bangalore-clj (10)
- # beginners (39)
- # boot (24)
- # cljs-dev (66)
- # cljsrn (79)
- # clojure (39)
- # clojure-italy (7)
- # clojure-russia (6)
- # clojure-spec (4)
- # clojure-uk (1)
- # clojurescript (91)
- # core-async (1)
- # core-typed (2)
- # datomic (49)
- # hoplon (42)
- # lumo (2)
- # nyc (1)
- # off-topic (1)
- # parinfer (20)
- # pedestal (2)
- # reagent (4)
- # rum (14)
- # vim (2)
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
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/
@husain.mohssen have you used re-natal use-component
?
@pesterhazy No, let me google how to use it
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 dependencyrestart the packager
clear the packager cache
(`react-native start --reset-cache true` I think)
hmm something is not right... I'm getting this:
the problem seems to be that I'm somehow including the component incorrectly.
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
but it seems that's wrong
why do you assume that?
did you try re-natal use-component react-native-maps
and (def map-view (js/require "react-native-maps"))
?
remember to do the following steps after a change: use-figwheel, restart figwheel
you can check the components that were added in .re-natal
hmm I think I changed it to that state and I'm getting an unrelated error
I'm confused it is complaining about the style property of reactNative
so odd
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"
]
}
@husain.mohssen that's probably related to your react-native version
or the react version actually
which version are you using?
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"
}
}
yeah, upgrade to a newer version of react
sorry to ask this: -how do I do that properly-?
(ie upgrading the react-native version? )
npm install [email protected] --save
that's all?
don't I need to upgrade the packages.json file?
sorry yeah you have to add --save
I use yarn
these days
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.let me see what's the deal with yarn đ
try adding react as well
hang in there, there's a light at the end of the tunnel
I did,it kept on complaining but at the end itwas installing (I think)
Bah! I spent a few hours tweaking some animations in the simulator, and found they donât run on physical iOS hardware.
annoying. so they worked in the simulator but not on any actual device?
@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.)
reload problem, maybe?
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.
@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:
yeah from what I hear RN's Animated is not an exact science
a bit of trial an error is involved
`npm WARN [email protected] requires a peer of [email protected] but none was installed. `
wait why did you specify react twice? get rid of the 2nd one
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.
should I ignore the warning?
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)
(side note: should cljsrn feel like a text-based adventure game ? đ )
This is an npm problem - unfortunately common enough
I tried nuking node_modules and reinstalling and it did not work
let me try to upgrade npm too đ
Good call
Or jump straight to yarn
is yarn compatible with the re-natal?
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.
where is [email protected] coming from?
it's a devDependency
in my package.json don't know what it does or why
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 **
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?
@U0LJU20SJ yes, I think this builds upon some of the many recent improvements with regards to JS interop
the tweet also states âClojureScript masterâ⌠there will be a release later this week I believe
Oh I am so excited about these changes đ looking forward to getting rid of so many workarounds in the rn cljs projects
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.
@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
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
The TL;DR is you can eliminate lots of explicit js/require
and def
s and instead shove stuff up into your ns
form, or use symbols to refer to things.
You can even use it to require 3rd party components as in having this in your ns
form
[react-native-color-picker :refer [ColorPicker]]
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