Can't load dapp on Expo

[critesjosh]

• I'm submitting a ...
  [x] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary

I set up the project using npx create-react-native-dapp. I cd into my-react-dapp and run yarn web. It seems like the build hangs. If I try to scan the displayed QR code with Expo, its the blue screen that says "Something went wrong."

When I run expo start, the project seems to build, but when I scan the QR code with Expo Go on my android device, nothing is displayed--there is a blank screen. There are no error messages. Same thing happens when I try to run the app on the iOS simulator.

• Other information (e.g. detailed explanation, stack traces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

I am working on an M1 mac. Node version 16.13.0

[saricden]

Bumping this, I'm encountering the same issue.

[epshtielsl]

Bump. Also seeing something similar. Runs okay on a simulator, but shows nothing but a blank white screen in Expo Go.

Edit: See this post here. It looks like expo start is not supported?

[mertcankose]

Similar issue i run yarn start and then my anroid app screen has big white screen

[clxyder]

Hey all I was able to make a bare bones example that uses expo start and allows you to connect your wallet via WalletConnect all from the Expo Go app. I haven't had a chance to integrate the changes with this current repo, but I might try later on. Here is the link to the repo, https://github.com/clxyder/walletconnect-expo-example, if anyone is interested. I have only tested this on an iPhone.

[mertcankose]

@clxyder hey it's working on android (i'm using huawei). Also, How can i make transaction and sign contract processes?

[epshtielsl]

Hey all I was able to make a bare bones example that uses expo start and allows you to connect your wallet via WalletConnect all from the Expo Go app. I haven't had a chance to integrate the changes with this current repo, but I might try later on. Here is the link to the repo, https://github.com/clxyder/walletconnect-expo-example, if anyone is interested. I have only tested this on an iPhone.

Works on my iOS device. Would you care to outline some of the steps you took to get Web3 working with React Native? I see most have to eject and run npx rn-nodeify --install --hack to get stuff working. What all is included with your project?

[clxyder]

@mertcankose Thank you for confirming that it also works on Android. Hmm it's just an example how to get WalletConnect working on Expo Go, you might be able to sign transactions if you add Moralis (https://github.com/ethereum-boilerplate/ethereum-react-native-boilerplate) and interact with a testnet. If you are able to forward the port to you LAN you should be able to access the hardhat node that way.

@epshtielsl Awesome yea I dropped a link in the README, but TLDR we can use babel/metro to map unsupported packages to ones that are supported as defined in metro.config.js.

[sunaookamishiroko]

Hey all I was able to make a bare bones example that uses expo start and allows you to connect your wallet via WalletConnect all from the Expo Go app. I haven't had a chance to integrate the changes with this current repo, but I might try later on. Here is the link to the repo, https://github.com/clxyder/walletconnect-expo-example, if anyone is interested. I have only tested this on an iPhone.

i have a same issue but you're walletconnet example works well. thank you !

[happyeric77]

@mertcankose Thank you for confirming that it also works on Android. Hmm it's just an example how to get WalletConnect working on Expo Go, you might be able to sign transactions if you add Moralis (https://github.com/ethereum-boilerplate/ethereum-react-native-boilerplate) and interact with a testnet. If you are able to forward the port to you LAN you should be able to access the hardhat node that way.

@clxyder
I got inspired by your example code to have the walletconnect work.
However, it turns out several issues when I tried to bring in moralis library. See here. The reason why I do not use their official boilerplate is that it is not working with expo go. Instead, we need to use react-native-cli with bare bone project.
I am wondering if you have got around it (moralis + expo go) already. If yes, it will be appreciated if you could share some hints with me.

[clxyder]

Hey @happyeric77 I am glad you where able to get help from Gen! https://forum.moralis.io/t/ethereum-react-native-boilerplate-questions/4511/145?u=cwong
I will also try to add those modification to my repo as it's something I've wanted to do.

Thanks again.

[safaksonmez]

@clxyder it works on ios when I connect with qr code but when I try to run with android simulator on my windows pc or qr code with my android device then click to connect wallet button browser opens and give 404 not found error

These are on simulator

This is on my android device

these are on my ios device

Do you guys have any idea to fix this ?

[sunaookamishiroko]

@safakyavsan

I fix it by comment out some codes in WalletConnectProvider.js
Go to
node_modules/@walletconnect/react-native-dapp/dist/providers/WalletConnectProvider.js

Comment out codes like this then it works

[clxyder]

Hey @somewheregreeny thanks sharing your fix. Yea @safakyavsan it has something to do with deep links not being properly setup in expo go.