How to use moralis SDK correctly in React Native？

sirzs · October 7, 2021, 4:17am

Hi, i want to log in with Moralis in React Native, but the following code has an error

import { useMoralis } from "react-moralis";

error message:

error: Error: Unable to resolve module crypto from /Users/macbookpro/reactnative/node_modules/swarm-js/node_modules/eth-lib/lib/bytes.js: crypto could not be found within the project or in these directories:
 node_modules/swarm-js/node_modules

I have done according to the forum, but the error is still there
moralis-react-native-crypto-dep-error
Do you have any good suggestions？

ivan · October 25, 2021, 10:39am

React Native support is here!

Follow this https://www.youtube.com/watch?v=FRilwynjW1c

raghav · November 1, 2021, 8:48am

Hello Everyone,
I am facing issue while connecting with react native app without expo. Error Like this
the localStorage does not exits

Property localStorage does not exits

Taken reference from this demo repo:
https://github.com/abdulmalik97/walletconnect-react-native-moralis.
So, Please provide me the solution I am stuck here from last 3 days.

ivan · November 1, 2021, 8:49am

Malik is US time, will ask him to check this

malik · November 1, 2021, 3:02pm

Hi,

Which platform are you using to run the app, ios? or Android? And where are you getting this error? My best guess is that there is a linking problem with react native and pods but would keep my judgement after more details.

Thanks

raghav · November 1, 2021, 3:26pm

for now I am using Android. and while using the react-moralis authenicate method.
like the below

 const {
   authenticate,
    authError,
    isAuthenticating,
    isAuthenticated,
  } = useMoralis()
{!isAuthenticated && (
                <Button
                  onPress={() => authenticate({ provider:'walletconnect', chainId:42, signingMessage: "Welcome!" })}
                  title="Authenticate With Crypto Wallet"></Button>
              )}

malik · November 1, 2021, 6:30pm

You would need to use the connector from the walletConnect hook that we built in. Your implementation is perfect for the web but has issues with react native.

github.com

abdulmalik97/walletconnect-react-native-moralis/blob/8032deaf45813721d8cb9fe17e1a12bb40e97479/frontend/App.tsx#L79


        User Email: {user.getEmail() ?? "-"}
      </Text>
      <Text numberOfLines={1} ellipsizeMode="tail" style={styles.weightHeavey}>
        User Address: {user.get("ethAddress")}
      </Text>
    </View>
  );
}
function App(): JSX.Element {
  const connector = useWalletConnect();
  const {
    authenticate,
    authError,
    isAuthenticating,
    isAuthenticated,
    logout,
    Moralis,
  } = useMoralis();
  return (

github.com

abdulmalik97/walletconnect-react-native-moralis/blob/8032deaf45813721d8cb9fe17e1a12bb40e97479/frontend/App.tsx#L128


  <Text style={styles.margin}>Authenticating...</Text>
)}
{!isAuthenticated && (
  <Button
    buttonStyle={{ width: 200, backgroundColor: "green" }}
    containerStyle={{ margin: 5 }}
    disabledStyle={{
      borderWidth: 2,
      borderColor: "#00F",
    }}
    onPress={() => authenticate({ connector })}
    loadingProps={{ animating: true }}
    title="Authenticate With Crypto Wallet"></Button>
)}
{isAuthenticated && (
  <>
    <Button
      buttonStyle={{ width: 200, backgroundColor: "red" }}
      containerStyle={{ margin: 5 }}
      disabledStyle={{
        borderWidth: 2,

Also, side note - there is more polishing to be done for the android implementation. We are working on it as we speak. Please try the ios version as that works perfectly as of now.

Let me know if you need more input.

Thanks

raghav · November 2, 2021, 9:19am

Same error I am getting while using the above code snippet.
if you have alternate then you can share with me @malik.
Bcoz I have to deliver first android part after that i can start working on the ios one.