Moralis not working in react native 0.64.x and after

Moralis General
#21

believe me I have spent many hours trying to get latest version to work, but I couldnā€™t get it working. so for now Iā€™m just using 0.0.99. hopefully the Moralis team update their react native boiler plate for the latest version of Moralis in the near future.

#22

I have requested the team to update the boilerplate code

#23

agreed with @taha, the team should update the boilerplate. And normally they will find incompatibilities between different lib versions (which is our issue) and fix their SDK cause thatā€™s the root cause.
Also I donā€™t know if team members like @cryptokid could let them know they should decorelate the Web3 part of the SDK (like Wallet connect) and the Web2 part (like getting data from the Sync Server, events) cause they should not be that tightly coupledā€¦or to provide an API endpoint

#24

@talhabinkhalil can you add this postinstall script to your package.json like what we have in the boilerplate?
"postinstall": "node_modules/.bin/rn-nodeify --install crypto,http,https,os,assert,url,stream,events --yarn"

Screen Shot 2022-03-21 at 16.03.07
Screen Shot 2022-03-21 at 16.03.071658Ɨ342 42.5 KB

#25

@ibox @loekTheDreamer @phyx1u5 I created a PR updating Moralis SDK and React-Native to latest. Can you check and let me know if it works for you?

#26

thanks Gen I will try it soon, I am developing for android as well, are there any changes required to android files?

1 Like
#27

Hi, it doesnā€™t. Did you try it yourself? I already mentioned in Discord that the last version doesnā€™t fix it

#28

@ibox Yes I just created the PR last night. Please try the PR for now and if it works, it will be merged in the main branch.

#29

still not working in my code, I cleaned the node_modules, Pods, reinstalled everything but still have the issue:

Can't find variable: localStorage
at node_modules/moralis/lib/browser/Storage.js:130:5 in getAllKeysAsync
at http://127.0.0.1:8081/index.bundle?platform=ios&dev=true&hot=false&minify=false:413443:56 in getItemAsync
at node_modules/crypto-js/cipher-core.js:19:1 in <anonymous>
at node_modules/moralis/lib/browser/RESTController.js:348:6 in request
at node_modules/moralis/lib/browser/ParseQuery.js:793:43 in first.then$argument_0
at components/TrackListScreen.js:85:28 in fetchData
at components/TrackListScreen.js:84:22 in fetchData
at components/TrackListScreen.js:89:13 in useEffect$argument_0
#30

If youā€™re not using the ethereum-react-native-boilerplate, and wish to implement the same to your rn project, you should install: rn-nodeify (get it here: https://www.npmjs.com/package/rn-nodeify). Also create a shim.js file in your projectā€™s root directory like what I did in the boilerplate, and also include the postInstall script in package.json file:

In your package.json file, put this inside scripts:
"postinstall": "node_modules/.bin/rn-nodeify --install crypto,http,https,os,assert,url,stream,events --yarn"

Copy this shim.js file below and put this in your projectā€™s root folder:

#31

@phyx1u5 none that I know of. I was able to make an android build with it.

#32

thank you Gen.
is it possible for you to put together a bare bones react native + moralis boiler plate?

#34

i cant get it to work in any way on react native, even the boiler plate is throwing errors.
i have tried everything in this thread and nothing worked

#35

it definitely takes finesse to get it working but its doable. if I get time il try put a boilerplate together. no promises tho.

#36

if you can it would be most appreciated, but for now ill just keep punching my monitor trying to figure it out. hahaha

#37

heres a super basic app that has the latest react native working:
https://github.com/youwhoyou/YouwhoMoralisBp

clone it then run yarn install
i recommend yarn over npm for installing packages as I have had heaps of errors when i use npm. yarn seems to work much better.

a few things to note:

  • firstly follow ALL the instructions at https://reactnative.dev/docs/environment-setup for ā€œReact Native CLI Quickstartā€ dont choose the expo way as it wont work.
  • i have only tested this on an android simulator. not tested for ios.
  • moralis is version 0.0.99 and react-moralis is 0.2.7 DO NOT UPGRADE these as it wont work.
  • theres a whole bunch of random packages i also included because i couldnt be bothered deleting them. Not all packages have been linked properly for android and ios so if you try to use some packages and it doesnt work, then check the docs for the package and try reinstalling as per the docs.
  • you will need to edit some files before building:
    • add your moralis app ID and server url to the .env file in the root
    • node_modules/moralis/lib/react-native/EventEmitter.js 1st line change the following
      var EventEmitter = require('../../../react-native/Libraries/vendor/emitter/EventEmitter');
      to
      var EventEmitter = require('../../../react-native/Libraries/vendor/emitter/_EventEmitter');
    • node_modules/react-native-os/android/build.gradle change from line 10 :
      dependencies {
      classpath 'com.android.tools.build:gradle:1.2.3'
      }
      to
      dependencies {
      //noinspection GradlePluginVersion
      classpath 'com.android.tools.build:gradle:1.2.3'
      }
      and at line 48 change
      compile 'com.facebook.react:react-native:+'
      to
      implementation 'com.facebook.react:react-native:+'
  • try build using android studio if running npx react-native run-android doesnt work.

if i think of anything i missed ill let you know.

good luck!

#38

thx so much
really appreciate this!!
have a good weekend!!!

1 Like
#39

i was able to run it but:

i had to change react-native randombytes module
at line 16 change
compile 'com.facebook.react:react-native:+'
to
implementation 'com.facebook.react:react-native:+'

thanks though

1 Like