Ethereum React Native Boilerplate Questions

I solved it, it was something dumb: The component was calling a “NFTBalances”, with an s at the end (no idea where that hook came from, it’s not on the hooks folder), which used getNFTs, instead of NFTBalance, which was the one I intended (although it isn’t in the GitHub anymore, was it removed?).

Hey @malik not sure what changed, but now my user logins are appearing in the table. Thank you very much! And I saw that Moralis is going to phase out expo from the repo, why is that? I find expo extremely useful for deploying MVPs.

On a side note, is there an example on how to properly take care of user sessions on mobile? I know this is unrelated to react-native, but since I figure it has to do with hooks it was worth asking here.
This is what I am doing in LoginScreen.handleCryptoLogin():

    const currentUser = Moralis.User.current();
    if (currentUser) {
      const userSession = currentUser.getSessionToken();
      const query = new Moralis.Query(Moralis.Session);
      query.equalTo("sessionToken", userSession);
      query.find()
        .then( function (results) {
          console.log("User session authenticated with: ", results[0]);
          navigation.replace("DrawerNavigationRoutes");
        })
        .catch( (error) => {
          console.warn("error user sessions query: ", error);
        });
    } else {
      console.log("currentUser: ", currentUser);
    }

But after going to the Assets screen via DrawerNavigationRoutes, I get a bunch of error alerts. I am guessing it’s because I did not properly authenticate the current user and the hooks are missing information. I see that both the currentUser and the User object from the queried Session have the same objectId. Do I have to do something like Setting the Current User? Any help would be much appreciated, thanks again!

Thank you for the reply. So you are saying the source code is in that folder? I see a few options to choose from when i click that folder with the adroid symbol. Which one do I choose?

Thank you for your response.

Hello! I installed react-moralis on a react native project and whenever I import anything from it I get

Unable to resolve module crypto from ‘/path/to/module’: crypto could not be found within the project or in these directories:
node_modules/web3-eth-accounts/node_modules
node_modules

I’ve changed android package name and after wallet connect i want it to connect the wallet and return to my app. is this possible?
Should I change anything in android manifest file?
What should I change here?

bridge: “https://bridge.walletconnect.org”,
clientMeta: {
description: “Connect with WalletConnect”,
url: “https://walletconnect.org”,
icons: ["…walletconnect-logo.png"],
name: “WalletConnect”,

Thanks.

NOTE: This post has been edited a more accurate question. Not sure why it jsut reposted my old comment.

Thank you for the reply. So you are saying the source code is in that folder with the android symbol? I see a few options in the drop down menu when I click that android folder. Which one do I choose to find the source code. I am unsure how to go about that? Could you explain when you get time please.

Okay so I was able to figure out my answer. You have to use _setUser from the useMoralis() hook to set the currentUser after verifying the sessionToken from the database. Here is what my code looks like:

    const currentUser = Moralis.User.current();
    if (currentUser) {
      const userSessionToken = currentUser.getSessionToken();
      const query = new Moralis.Query(Moralis.Session);
      query.equalTo("sessionToken", userSessionToken);
      query.find()
        .then( function (results) {
          console.log("User session authenticated with: ", results[0]);
          _setUser(currentUser);
          navigation.replace("DrawerNavigationRoutes");
        })
        .catch( (error) => {
          console.warn("error user sessions query: ", error);
        });
    } else {
      console.log("currentUser: ", currentUser);
    }

you should remove the react native svg lib from your project

Hi folks! I tried the boilerplate code it works perfect and When I tried to configure it in my own CLI version of code It throughs me an error which I attached the screenshot.


I covered My whole App in Morales Provider and given each and everything which required to setup.
Here are my libs version and I’m also attaching Package.Json file you may tell if I’m missing any library.Should I add expo too in my project?
Thanks

"dependencies": {
    "@connectedcars/react-native-slide-charts": "^1.0.5",
    "@ethersproject/shims": "^5.5.0",
    "@eva-design/eva": "^2.1.1",
    "@nomiclabs/hardhat-ethers": "^2.0.1",
    "@nomiclabs/hardhat-waffle": "^2.0.1",
    "@react-native-async-storage/async-storage": "^1.15.14",
    "@react-native-clipboard/clipboard": "^1.9.0",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-community/netinfo": "^6.0.2",
    "@react-native-community/push-notification-ios": "^1.8.0",
    "@react-native-community/toolbar-android": "^0.1.0-rc.2",
    "@react-native-firebase/app": "^12.9.1",
    "@react-native-firebase/auth": "^12.9.1",
    "@react-native-firebase/messaging": "^12.4.0",
    "@react-native-google-signin/google-signin": "^7.0.1",
    "@react-navigation/bottom-tabs": "^5.5.2",
    "@react-navigation/drawer": "^5.0.0",
    "@react-navigation/native": "^5.5.1",
    "@react-navigation/stack": "^5.5.1",
    "@tradle/react-native-http": "^2.0.1",
    "@twotalltotems/react-native-otp-input": "^1.3.11",
    "@types/jest": "^26.0.20",
    "@types/node": "14.14.22",
    "@types/react": "~16.9.35",
    "@types/react-native": "~0.63.2",
    "@typescript-eslint/eslint-plugin": "^4.0.1",
    "@typescript-eslint/parser": "^4.0.1",
    "@ui-kitten/components": "^5.1.1",
    "@walletconnect/client": "^2.0.0-beta.21",
    "@walletconnect/qrcode-modal": "^1.7.0",
    "@walletconnect/react-native-dapp": "1.6.6",
    "@walletconnect/web3-provider": "^1.6.6",
    "assert": "^1.5.0",
    "axios": "^0.23.0",
    "browserify-zlib": "^0.1.4",
    "buffer": "^4.9.2",
    "console-browserify": "^1.2.0",
    "constants-browserify": "^1.0.0",
    "currency-formatter": "^1.5.5",
    "dns.js": "^1.0.1",
    "domain-browser": "^1.2.0",
    "ethers": "^5.5.1",
    "events": "^3.3.0",
    "https-browserify": "^0.0.1",
    "i18next": "^19.4.5",
    "lightweight-charts": "^3.6.1",
    "lodash": "^4.17.15",
    "moment": "^2.26.0",
    "moralis": "0.0.99",
    "path-browserify": "^0.0.0",
    "process": "^0.11.10",
    "punycode": "^1.4.1",
    "qs": "^6.9.4",
    "querystring-es3": "^0.2.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-i18next": "^11.6.0",
    "react-moralis": "0.2.7",
    "react-native": "0.64.0",
    "react-native-action-button": "^2.8.5",
    "react-native-app-intro-slider": "^4.0.4",
    "react-native-atoz-listview": "^0.0.7",
    "react-native-barcode-mask": "^1.2.4",
    "react-native-biometrics": "^2.1.4",
    "react-native-camera": "^4.2.1",
    "react-native-chart-kit": "^6.11.0",
    "react-native-crypto": "^2.2.0",
    "react-native-elements": "^2.0.2",
    "react-native-encrypted-storage": "^4.0.2",
    "react-native-floating-action": "^1.22.0",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-get-random-values": "^1.7.1",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-level-fs": "^3.0.1",
    "react-native-maps": "0.27.1",
    "react-native-masked-text": "^1.13.0",
    "react-native-os": "^1.2.6",
    "react-native-paper": "^4.9.2",
    "react-native-permissions": "^3.1.0",
    "react-native-push-notification": "^4.0.0",
    "react-native-qrcode-scanner": "^1.5.4",
    "react-native-randombytes": "^3.6.1",
    "react-native-raw-bottom-sheet": "^2.2.0",
    "react-native-reanimated": "^1.9.0",
    "react-native-restart": "^0.0.17",
    "react-native-safe-area-context": "^3.0.3",
    "react-native-screens": "^2.8.0",
    "react-native-share": "^7.3.0",
    "react-native-slide-charts": "^1.0.4",
    "react-native-slide-verify": "^0.0.2",
    "react-native-snackbar": "^2.4.0",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-splash-screen": "^3.2.0",
    "react-native-status-bar-height": "^2.5.0",
    "react-native-svg-charts": "^5.4.0",
    "react-native-swipe-list-view": "^3.1.1",
    "react-native-swiper": "^1.6.0",
    "react-native-tcp": "^3.3.2",
    "react-native-udp": "^2.7.0",
    "react-native-uuid": "^2.0.1",
    "react-native-vector-icons": "^6.6.0",
    "react-native-webview": "^11.15.0",
    "react-redux": "^7.2.5",
    "readable-stream": "^1.0.33",
    "redux": "^4.1.1",
    "redux-logger": "^3.0.6",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "stream": "^0.0.2",
    "stream-browserify": "^1.0.0",
    "timers-browserify": "^1.4.2",
    "ts-node": "9.1.1",
    "tty-browserify": "^0.0.0",
    "typescript": "~4.0.0",
    "url": "^0.10.3",
    "vm-browserify": "^0.0.4"
  },
  "devDependencies": {
    "@babel/core": "^7.13.15",
    "@babel/runtime": "^7.13.10",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.23.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.65.2",
    "react-test-renderer": "17.0.1",
    "rn-nodeify": "github:tradle/rn-nodeify"
  },

I’ve already configured the wallet connect and added a shim file too is that the reason to have issue.Issue is in react-moralis addListener undefined

Hi, This question is not suitable for this page? Ethereum React Native Boilerplate Questions

Hi, I’m still waiting for reply.
Thanks.

hey, working on a react-native project. I start off with standard email password authentication then I want to link etherium accounts after doing wallet authentication like this

Moralis.onAccountsChanged( async (accounts) => {
  console.log("accounts changed")
  await Moralis.link(accounts[0]);
});

const wallet_connect = () => {
      authenticate({ connector })
      .then(() => {
        if (authError) {
          setErrortext(authError.message);
          setVisible(true);
        }
      })
      .catch(() => {});
    }

When I call the wallet_connect method the account gets created but the Moralis.onAccountsChanged method doesn’t seem to be getting called. Any thoughts on how to use onAccountsChanged properly in react native?

this may not be something that works with wallet connect

I’m trying to import my App ID and Server URL from my .env file but I keep getting this error and I’m not sure why:

Module ‘"@env"’ has no exported member ‘REACT_APP_MORALIS_APPLICATION_ID’.ts(2305)

Can anyone help me fix this?

You can add these two lines to index.d.ts

declare module '@env' {
   export const HARDHAT_PORT: string;
   export const HARDHAT_PRIVATE_KEY: string;
   export const REACT_APP_MORALIS_APPLICATION_ID: string;
   export const REACT_APP_MORALIS_SERVER_URL: string;
}

Hey @malik not sure if this is helpful but I was able to run WalletConnect and authenticate with expo via the Expo Go this is a bare bone example on how to do it, https://github.com/clxyder/walletconnect-expo-example. Hopefully this helps keep expo in the Moralis boilerplate.

1 Like

ive been getting the same thing in the non react boiler plate the last few days as well. cant figure it out

Thanks I’ll try that

1 Like

Hello @apost crypto is now available in node. If you are trying to install all dependencies from this boilerplate to your new react-native project, you should include crypto and other modules that could not be found under post-install in your package.json. I’m currently creating a CLI version of this boilerplate and I managed to fix most issues including this one that you encountered. If you find it interesting, you can check it here:

It’s still unofficial but we will publish it once we confirm this to be working on most dev environments and will delete this one in my repo.

1 Like