Sockets not working in release build React Native - react-native

I'm working on a project where I require sockets. So I implemented a socket connection and was working on debug but not in release build.
I need to get sockets working on release build without using socket.io.
I'm using React Native : 0.61.5
And internet permission is mentioned in manifest file.
Please help.

As mentioned on Github: https://github.com/facebook/react-native/issues/24361
Make sure your config.urlServer is not an HTTP endpoint but should be HTTPS. Latest RN versions target recent Android SDK that blocks insecure HTTP connections automatically
If anyone is facing the same issue, because of the "http" just add android:usesCleartextTraffic="true" in tag in android\app\src\main\AndroidManifest.xml
and you should be good.

Related

How can I set up an Expo app to work behind a corporate proxy?

I want to try to React Native / Expo App on my company PC (Windows).
I was following all guides on Proxy setup and settings, but I'm still getting this error.
Unable to reach Expo servers. Falling back to using the cached dependency map (bundledNativeModules.json) from the package "expo" installed in your project.
I've added proxies to .npmrc file, also tried changing URL Server by this command_
export EXPO_PACKAGER_PROXY_URL=http://expo.dev npx expo start
Tried to set up tunneling, but unsuccessfully.
Has anyone encountered similar problems and found solution to it.
Thanks in advance
I deal with this same issue at work. I have discovered a few work-arounds through trial and error.
use yarn to import expo modules. This seems to help with the dependency issues that expo imports often have.
set yarn config to yarn config set strict-ssl false -g if you are receiving SSL errors.
run this command - $Env:NODE_TLS_REJECT_UNAUTHORIZED=0 if you are receiving SELF_SIGNED_CERT_IN_CHAIN errors. <--this is not 100% safe because makes TLS connections and HTTPS requests insecure by disabling certificate verification -- use at your own risk.
The Unable to reach Expo servers... error still renders, but I can just ignore it and continue.

EXPO + react-native-reanimated debug issue

I've had an app running on Expo SDK 41 and it had some basic usage of react-native-reanimated#~2.1.0 and debugging worked just fine.
At some stage SDK 41 was deprecated and I was forced to upgrade, so I went for the latest one which is 45.
After the upgrade I can no longer use remote debugging. When I turn on remote debugging, the app crashes with the following error
Requiring module "node_modules\react-native-reanimated\src\Animated.js", which threw an exception: Invariant Violation: Calling synchronous methods on native modules is not supported in Chrome.
Consider providing alternative methods to expose this method in debug mode, e.g. by exposing constants ahead-of-time.
and I can't do anything (I can't even turn off remote debugging without clearing expo app data).
The issue seems to be related to react-native-reanimated (current version is 2.8.0)
Expo docs state this:
The new APIs in react-native-reanimated#2 use React Native APIs that
are incompatible with Remote JS Debugging. Consequently, you can only
debug apps using these APIs using Flipper, which is not yet available
in the Expo managed workflow. You will be unable to use Remote JS
Debugging if you use the new APIs from Reanimated 2. Remote JS
Debugging will continue to work if you only use the APIs that were
also available in Reanimated 1.
Tried to downgrade to react-native-reanimated#~2.1.0 did not work either.
I must be missing something, because otherwise it seems a bit ridiculous that I'm forced to upgrade SDK which in combination with react-native-reanimated does not allow me to do debug anymore.
Please advise if there is anything I can do.
Thanks
This is what that link to Expo's docs show me at this time:
Reanimated uses React Native APIs that are incompatible with "Remote JS
Debugging" for JavaScriptCore. In order to use a debugger with your app with
react-native-reanimated, you will need to use the Hermes JavaScript engine and > the JavaScript Inspector for Hermes.
Anyways, this appears to be an issue Reanimated themselves talk about in the docs
The workaround around this for some time has been this code shared in this answer here
It isn't even a reanimated problem particularly, but an inability of RN to develop using some synchronous features that pertain to debugging.
Anyways, hope this helps you
After posting a question on expo repository, I've got the following answer which actually does not solve the remote debugger issue, but gives the same alternative. Basically they suggested to use hermes engine
hi there! this is unfortunate and inconvenient for sure. it's a side effect of the direction the ecosystem is moving in - away from JavaScript Core and remote debugging in Chrome towards Hermes and attaching a debugger to the on-device Hermes engine. Reanimated no longer supports remote debugging in Chrome.
in order to debug JS using Reanimated in SDK 45+ we recommend using Hermes. you can set this up in your app.json as follows:
{
"expo": {
"// your other config here": "...",
"android": {
"jsEngine": "hermes"
}
}
}
now when you run expo start and launch your app press j and it will launch a Chrome Inspector that will attach directly to the app on your device (I suggest upgrading expo-cli to the latest to ensure you have this feature). be sure to refer to the "Using Hermes Engine" guide for more information

How to open Deep Link in Expo Dev Client

I recently added the dev-client in my Expo (Bare Workflow) React Native App. The deep linking configuration was working fine earlier with my scheme as:
scheme://mobile-prefix/product/10
In the local environment, I tried using the local development Deep-link as follows:
scheme://expo-development-client/?url=http://192.168.5.80:8081
This opened the app ^. This was according to the documentation: https://docs.expo.dev/development/development-workflows/#deep-linking-urls
But it still isn't clear how do I open the deep link say to a particular product which was earlier: mobile-prefix/product/10.
The way to make it work was:
Create development build.
Then use the local scheme URI, like below. See screenshot for reference
scheme://192.168.5.80:8081/mobile-prefix/product/10
So the above URI works ^
where mobile-prefix/product/10 is the one configured on React Native App itself.
I was using your above answer with React Navigation which didn't work.
You might not need the IP address. Just your-scheme-here://mobile-prefix/product/10 will work.

How to run a react native app (a bare workflow from expo or a regular one) in web (browser)?

I'm trying to run my React Native app as a web site, on a browser.
I tried to go according to https://necolas.github.io/react-native-web/docs/installation/ but the instructions on the Setup page are not clear.
I found some (rare) posts regarding this, but they are old (2019) and seem to deviate from the info in the link above.
I use yarn android to run it on android.
So, I tried using yarn web. Didn't work.
Also, tried the basic react-native start followed by react-native run-web.
It seems the run-web command is not what is needed.
Any assist appreciated.
P.S. I initialized my project through Expo, as a Bare Workflow project. Hope that helps
According to the docs:
Expo for web can work on any React Native project. When you initialize a new project with a bare workflow template using expo-cli, if you run yarn web or npm run web it will start up expo-cli and open your project in a web browser.
The same guides for web from the managed workflow apply here.
So basically just initialise your project using expo init project-name and then select bare workflow or managed workflow. After that you can execute npm run web. It will open up the browser and run the web version of it. Keep in mind that there are some incompatibility of libraries from expo, for example, the Webview is incompatible on the web so you need to switch when on web to an iframe or so.

React Native Android debug build is using the prebuilt bundle instead of connecting to Metro

When I try to run my application on android using react-native run-android the app is not connecting to the Metro server but is using the bundle file in android/app/src/main/assets instead.
When I delete the bundle file I get two error screens that tell me that a bundle file could not be found and that a connection to the Metro server could not be made:
This happens on both my physical device and a local emulator, but on iOS devices everything works as expected. I'm pretty clueless what might be causing this. I've also tried deleting all the build output and node_modules without any result.
So after a lot of googling I found out what the issue was...
Some time ago the android API level was updated to level 28, and since API level 28 you need to specify if you want to use HTTP.
Metro uses HTTP for bundling so that's why it wasn't working.
I solved it by adding this line in the application part of AndroidManifest.xml:
android:usesCleartextTraffic="true"