ReactNativeでfabricのlib使えるかサンプルアプリ作成

[shohu]

#9 の流れで

fabricとのAPIやりとりをbrowserだと厳しいため、アプリでやる。
そのために ReactNativeでやる。js使えるから
fabric APIのサンプルもそのまま使える。
結局一部 node モジュールしか使えなかった 😓

以下参考に進める
【React Native入門】Java Scriptでアプリ作ろう【Reactやったことない人向け】１

[shohu]

mac本体での手順

ReactNativeインストール

$ brew install watchman
$ npm install -g react-native-cli

プロジェクト作成

$ react-native init estate_native

コマンドで起動

$ react-native run-ios

X-CODEで起動

[shohu]

iOS エミュレータのconsole.log

safari の開発ツールから以下がひらけた

[shohu]

jsからfabricのメソッドを読み込んでみる。これがいければ、署名いける

[shohu]

npm install で fabric の関連lib入れると以下エラーが発生して起動できない？
それかそもそも npm install はしちゃだめとか。

それかそもそも npm install はしちゃだめとか。

npm install しただけでこちらのエラーになった。これが原因か。

以下で同じような内容を質問してるけど、答えがない 😓
https://stackoverflow.com/questions/55671556/index-js-cannot-find-module-react-native-community-cli-node-modules-metro

[shohu]

プロジェクトの作り方が最近新しくなったらしい

【React Native】Expo CLIを利用してReact Nativeプロジェクトを作成する
expo-cli を使うようにする

$ npm install -g expo-cli
$ expo init my-app
$ cd my-app
$ yarn start

その後、i をおすと iOSシミュレーターが起動
あとは、普通の開発。

fabric lib 試す

以下追加してinstallしたが、

    "fabric-ca-client": "^1.4.1",
    "fabric-client": "^1.4.1",
    "fabric-common": "^1.4.1",
    "fabric-network": "^1.4.1"

以下エラー

$ yarn install
yarn install v1.15.2
[1/4] 🔍  Resolving packages...
warning fabric-client > hoek@4.2.1: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
warning fabric-network > fabric-client > hoek@4.2.1: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
[2/4] 🚚  Fetching packages...
error fabric-ca-client@1.4.1: The engine "node" is incompatible with this module. Expected version "^8.9.0". Got "11.13.0"
error Found incompatible module

node の version落とさないといけないと。

nodeのversion落とす

https://qiita.com/kuriya/items/36ae29366df0b7c95dec

$ brew uninstall --ignore-dependencies node
$ brew install nodebrew
$ mkdir -P /Users/shohu33/.nodebrew/src/v8.16.0/
$ nodebrew install-binary v8.16.0
$ nodebrew use v8.16.0
use v8.16.0

~/.bashrcのファイルに以下パスを追加します。

export PATH=$HOME/.nodebrew/current/bin:$PATH

setup

$ nodebrew setup

で、version確認。できた 👍

$ node -v
v8.16.0

備考

downloadのフォルダ作成しなかったら以下エラー。このため、あらかじめ作成しておいた。

$ nodebrew install-binary v8.16.0
Fetching: https://nodejs.org/dist/v8.16.0/node-v8.16.0-darwin-x64.tar.gz
Warning: Failed to create the file
Warning: /Users/shohu33/.nodebrew/src/v8.16.0/node-v8.16.0-darwin-x64.tar.gz:
Warning: No such file or directory
                                                                           0.0%
curl: (23) Failed writing body (0 != 1059)

以下実施すればよかったとのこと

$ nodebrew setup

再度 fabricをinstall

warningはでたがうまくいった 👍

$ yarn install
yarn install v1.15.2
[1/4] 🔍  Resolving packages...
warning fabric-client > hoek@4.2.1: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
warning fabric-network > fabric-client > hoek@4.2.1: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "expo > react-google-maps@9.4.5" has unmet peer dependency "@types/googlemaps@^3.0.0".
warning "expo > react-google-maps@9.4.5" has unmet peer dependency "@types/markerclustererplus@^2.1.29".
warning "expo > react-google-maps@9.4.5" has unmet peer dependency "@types/react@^15.0.0 || ^16.0.0".
warning "expo > react-native-reanimated@1.0.1" has incorrect peer dependency "react@16.0.0-alpha.6".
warning "expo > react-native-reanimated@1.0.1" has incorrect peer dependency "react-native@^0.44.1".
warning "react-native > metro-react-native-babel-transformer@0.51.0" has unmet peer dependency "@babel/core@*".
warning "react-native > @react-native-community/cli > metro-react-native-babel-transformer@0.51.1" has unmet peer dependency "@babel/core@*".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 28.86s.

起動

ただ、このnode versionだと起動しないっぽい 😢

$ yarn start
yarn run v1.15.2
$ expo start
Starting project at /Users/shohu33/sc/estate-expo
Expo DevTools is running at http://localhost:19002
Opening DevTools in the browser... (press shift-d to disable)

Something went wrong installing the "sharp" module

The module '/usr/local/lib/node_modules/expo-cli/node_modules/sharp/build/Release/sharp.node'
was compiled against a different Node.js version using
NODE_MODULE_VERSION 67. This version of Node.js requires
NODE_MODULE_VERSION 57. Please try re-compiling or re-installing
the module (for instance, using `npm rebuild` or `npm install`).

- Ensure the version of Node.js used at install time matches that used at runtime
- Consult the installation documentation at https://sharp.pixelplumbing.com/en/stable/install/
- Search for this error at https://github.com/lovell/sharp/issues

error Command failed with exit code 1.

なんで、expo-cli を入れ直してみた。

$ npm remove -g expo-cli
$ npm install -g expo-cli

そのご、fabricのlibをpackage.confにいれて yarn install したあと、yarn startで起動して途中で "i" をおしたらうまくいった 👍

[shohu]

fabricのテストソースのっけたら、fsモジュールがない問題 😓
また、fsか。。。

React Nativeは Node.jsで実行されていなかった
ん、react native でもだめ・・・？
ではなくて、１つ１つ

$ yarn add fs

のようにnodeの標準packageと思われるものも install してあげる必要があと思ったらこれでもだめ。

React Native: Unable to resolve module fs
こっちか。react-native-fs を使えといっている。

いや、node の core module 使えるようになる
npm install rn-nodeify
こちらがよさそう.

package.json を変更して以下のようにして、 yarn postinstall 実行

  "scripts": {
: 
    "postinstall": "rn-nodeify --install fs,path,console --hack"

事前に以下いれておく

$ npm install node-pre-gyp -g

うまくいったっぽい？

$ yarn postinstall
yarn run v1.15.2
$ rn-nodeify --install fs,path,console --hack
not overwriting "react-native-level-fs"
not overwriting "path-browserify"
not overwriting "console-browserify"
normalized "main" browser mapping in readable-stream, fixed here: https://github.com/facebook/metro-bundler/pull/3
hacking /Users/shohu33/sc/estate-expo/node_modules/form-data/package.json
hacking /Users/shohu33/sc/estate-expo/node_modules/iconv-lite/package.json
hacking /Users/shohu33/sc/estate-expo/node_modules/immediate/package.json
hacking /Users/shohu33/sc/estate-expo/node_modules/readable-stream/readable.js
hacking /Users/shohu33/sc/estate-expo/node_modules/levelup/lib/util.js
hacking /Users/shohu33/sc/estate-expo/node_modules/fwd-stream/node_modules/readable-stream/readable.js
hacking /Users/shohu33/sc/estate-expo/node_modules/levelup/node_modules/readable-stream/readable.js
hacking /Users/shohu33/sc/estate-expo/node_modules/fwd-stream/node_modules/readable-stream/lib/_stream_writable.js
hacking /Users/shohu33/sc/estate-expo/node_modules/fwd-stream/node_modules/readable-stream/lib/_stream_readable.js
hacking /Users/shohu33/sc/estate-expo/node_modules/level-blobs/node_modules/readable-stream/lib/_stream_readable.js
hacking /Users/shohu33/sc/estate-expo/node_modules/level-blobs/node_modules/readable-stream/lib/_stream_writable.js
hacking /Users/shohu33/sc/estate-expo/node_modules/levelup/node_modules/readable-stream/lib/_stream_writable.js
hacking /Users/shohu33/sc/estate-expo/node_modules/levelup/node_modules/readable-stream/lib/_stream_readable.js
✨  Done in 1.29s.

その後もう1度、 yarn install 。これがなぜか必要。

次は以下エラー

Unable to resolve "asyncstorage-down" from "node_modules/react-native-level-fs/index.js"
Failed building JavaScript bundle.

このため、以下入れる

yarn add asyncstorage-down

次は以下。crypto がないって。

The package at "node_modules/fabric-client/lib/hash.js" attempted to import the Node standard library module "crypto". It failed because React Native does not include the Node standard library. Read more at https://docs.expo.io/versions/latest/introduction/faq/#can-i-use-nodejs-packages-with-expo
Failed building JavaScript bundle.

https://www.npmjs.com/package/rn-nodeify
をみると

If you are using the crypto shim, you will need to manually uncomment the line to require('crypto') in shim.js, this is because as of react-native 0.49, dynamically requiring a library is no longer allowed.

とのこと。なので、shim.js の require('crypto') 部分をuncomment
さらに、postinstall に crypto 追加

    "postinstall": "rn-nodeify --install fs,path,console,crypto --hack"

またあとで色々足りないとでて最終的に以下

    "postinstall": "rn-nodeify --install child_process,constants,assert,zlib,https,http,stream,fs,path,console,crypto,os,events --hack"

ただ、child_process に rn-nodeify が対応していない、、、

The package at "node_modules/grpc/node_modules/detect-libc/lib/detect-libc.js" attempted to import the Node standard library module "child_process". It failed because React Native does not include the Node standard library. Read more at https://docs.expo.io/versions/latest/introduction/faq/#can-i-use-nodejs-packages-with-expo
Failed building JavaScript bundle.

以下の rn-nodeify みると、child_process は なさそうだが、processでもいけないみたい。。。
https://github.com/mvayngrib/rn-nodeify/blob/master/shims.js

[Kefir101]

How did you figure it out? I am getting the same error.