Can't load dapp on Expo

critesjosh commented 2 years ago

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 commented 2 years ago

Bumping this, I'm encountering the same issue.

epshtielsl commented 2 years ago

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 commented 2 years ago

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

clxyder commented 2 years ago

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 commented 2 years ago

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

epshtielsl commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

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

cawfree / create-react-native-dapp

Can't load dapp on Expo #30