React native: Warning Require cycle - react-native

When I run my app, it show up a warning like this
WARN Require cycle: node_modules/react-native/Libraries/Network/fetch.js -> node_modules/whatwg-fetch/dist/fetch.umd.js -> node_modules/react-native/Libraries/Network/fetch.js
I don't understand its meaning, please help me if you knew and solved this issue

Related

React Native Multiple versions of React (when using hooks)

I've gone through the 3 main causes of the infamous invalid hook call warning, and have determined that I have multiple versions of React in my app. I've confirmed this by this step:
// Add this in node_modules/react-dom/index.js
window.React1 = require('react');
// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);
Based on my research, I understand that it is probably a dependency I have that is listing react as a dependency instead of a peer dependency, and that there are a few ways to solve this problem. However, I don't know how to figure out which package it is that is causing the issue.
There are lots of solutions online that are relevant to react (such as adding a webpack alias), but unfortunately are not for react-native. I have (perhaps naively) tried to add an alias with module-resolver to babel.config.js, but that did not work:
plugins: [
[
'module-resolver',
{
alias: path.resolve('node_modules/react'),
},
],
]
Figured this out after a long while. The issue was having react-dom library listed as a dependency. I'd read somewhere to do this to support jest testing, but I suppose that advice was dated.
Nonetheless the error was an obvious red herring, so hoping this can help someone out in the future

Getting error Invariant Violation: Tried to register two views with the same name

I have used react-native when it was 0.50 now I'm using it again and it's 0.61.1
I am making an app and using "react-navigation" library for routing.
Since I'm using the react-native-gesture-handler according to the documentation I'm getting the error sometimes of "Invariant Violation: Tried to register two views with the same name" and when I close the app and reopen it, it's gone.
And especially "Invariant Violation: Tried to register two views with the same name gestureHandlerRootView" error comes so many times in-app.
here is the screenshot of error in my console:
And because of this error, My app in release mode is also crashing as soon as I open it. I'm using React Native CLI not EXPO. I've searched in stack overflow and on other places but all the answers I got are saying remove react-native-gesture-handler from the expo.
But I'm not using EXPO what should I do? Please help.
I ran
npm ls react-native-webview
and was showed:
├─┬ react-native-webview-leaflet#5.0.2
│ └── react-native-webview#8.2.1
└── react-native-webview#11.0.2
Two webview.
I solve with:
yarn add react-native-webview-leaflet
That is, I had to reinstall 'react-native-webview-leaflet' probability because an update of 'react-native-webview'.
Try to do find . -name react-native-{name-of-the-package} and look for duplicates. They are probably detected and loaded each time (by use_native_modules), which leads to this error.
Try adjusting your dependencies (and look for deps of deps) to avoid such duplicated. At the end your adjustment should be visible in your lock file.

Using styleguidist in a react native application

I'm trying to use styleguidist in a react native application application;
I come across this link and implemented the exact same set up in my application:
https://github.com/styleguidist/react-styleguidist/tree/master/examples/react-native
After running npx styleguidist build, i got this output:
FAIL Failed to compile
build/bundle.f44bbfd4.js from UglifyJs
Unexpected token punc «:», expected punc «,» [build/bundle.f44bbfd4.js:372,1165]
Any ideas how to solve this ?
Thanks in advance.
Can you please provide more examples of what exact code changes you made and to what files? I had a similar issue and it turned out I was applying config changes to webpack.config.js that needed to go into the styleguide.config.js instead.

ReactNative app crashes only if running in Release mode

I'm building this app in RN and after upgrading to 0.49, it started crashing only when in "release" mode. It crashes right after it starts. It took me awhile to even trace down the crash point because my crash reporter (bugsnag) isn't even triggering.
I set the scheme in xcode to "release" and I was finally able to reproduce the crash with a tethered device.
The output is:
43 JavaScriptCore 0x00000001880011ac _ZN3JSC8evaluateEPNS_9ExecStateERKNS_10SourceCodeENS_7JSValueERN3WTF8NakedPtrINS_9ExceptionEEE + 316
44 JavaScriptCore 0x000000018836a558 JSEvaluateScript +2017-10-15 02:54:24.331 [error][tid:com.facebook.react.JavaScript] undefined is not an object (evaluating 's.View.propTypes.style')
B56
INFO : BSG_KSCrashReport.c (2157): void bsg_kscrashreport_writeStandardReport(BSG_KSCrash_Context *const, const char *const): Writing crash report to /var/mobile/Containers/Data/Application/00FD4F8E-DFF5-4166-982B-0D4AB56048DE/Library/Caches/KSCrashReports/GP/GP-CrashReport-0659B2B2-1DB4-48B9-BDDB-5EC72DE8B201.json
2017-10-15 02:54:24.354 [fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: undefined is not an object (evaluating 's.View.propTypes.style')
2017-10-15 02:54:24.357 [error][tid:com.facebook.react.JavaScript] Module AppRegistry is not a registered callable module (calling runApplication)
INFO : BSG_KSCrashReport.c (2157): void bsg_kscrashreport_writeStandardReport(BSG_KSCrash_Context *const, const char *const): Writing crash report to /var/mobile/Containers/Data/Application/00FD4F8E-DFF5-4166-982B-0D4AB56048DE/Library/Caches/KSCrashReports/GP/GP-CrashReport-9288B937-E697-4571-AE3D-5377FB7EABAE.json
libc++abi.dylib: terminating with uncaught exception of type NSException
I suspect it's being caused by the bundler.. Could be Babel or something else. I've tracked down any references to "*.propTypes.style" and commented them out, thinking it'd be those, but that didn't change the result. It still crashes.
Any suggestions would be much appreciated. Thanks!
Try to
1) run your app in debug mode
2) uncheck 'JS Dev Mode' in Dev Settings
3) Reload app
you will see some errors related to propTypes.
I had a similar issue. by disabling JS Dev Mode I figured out my packages are using View.PropTypes.style.
In another similar issue, it was from fabric crashlytics. I changed it's version and problem solved.
I too suffered from this problem. The issue ended up being that some of the components I used were still using:
View.PropTypes.style
Unfortunately had to revert back to react-native 48.4 until the respective packages were updated.
In my case it was react-native-facebook-login.
Try searching your node modules to find the specific components using the above and inform the dev that it needs to be updated to be compatible with 0.49.x
Try to check log where it is breaking with adb log in simulator
View.proptypes is deprecated in latest react
native.use ViewPropTypes instead of View.proptypes.
import {ViewPropTypes } from 'react-native';
styles: PropTypes.shape({
view: ViewPropTypes.style,
})
From your logs, I can see 2 problems:
You use a third party module using ...View.propTypes. It'll not crash in debug mode, but it'll display a red screen during the launch
The module name you use, is not the right one.

Updated react native to v0.6.0 - Error: Invariant Violation: Application TestApp has not been registered.

I'm getting these errors after updating react native to v0.6.0. I even tried creating a project from scratch and I'm still getting these errors. Has anyone else seen this? This code was working before. Any ideas how to fix this?
Error: Cannot read property 'None' of undefined
stack:
index.ios.bundle:24163
require index.ios.bundle:244
index.ios.bundle:23216
require index.ios.bundle:244
index.ios.bundle:1187
require index.ios.bundle:244
index.ios.bundle:1116
require index.ios.bundle:244
Object.ErrorUtils.applyWithGuard index.ios.bundle:880
require index.ios.bundle:195
URL: undefined
line: undefined
message: Cannot read property 'None' of undefinedhandleException # index.ios.bundle:7033
index.ios.bundle:35950 Running application "TestApp" with appParams: {"rootTag":1,"initialProps":{}}. DEV === true, development-level warning are ON, performance optimizations are OFF
index.ios.bundle:7033 Error: Invariant Violation: Application TestApp has not been registered.
stack:
Object.AppRegistry.runApplication index.ios.bundle:35957
jsCall index.ios.bundle:7328
MessageQueueMixin._callFunction index.ios.bundle:7591
index.ios.bundle:7618
index.ios.bundle:7612
ReactDefaultBatchingStrategyTransaction.Mixin.perform index.ios.bundle:6143
Object.ReactDefaultBatchingStrategy.batchedUpdates index.ios.bundle:13907
Object.batchedUpdates index.ios.bundle:4686
URL: undefined
line: undefined
message: Invariant Violation: Application TestApp has not been registered.
I think I figured out the prolblem. It had to do with a component I was using, in my case react-native-device. What I had to do to fix it was delete the node_modules folder located in the component. AppName/node_modules/React-Native-Component/node_modules.
I also updated the dependencies in the package.json file also located in the component folder AppName/node_modules/React-Native-Component/package.json and change the react-native dependency to (or something similar):
"peerDependencies": {
"react-native": ">= 0.4.0 < 1"
},
Update
You can also try restarting the computer. I've noticed with that node starts opening multiple processes and that can cause issues.
Update 2
From the project root folder run in terminal:
./node_modules/react-native/packager/packager.sh --reset-cache
A combination of all the fixes above has fixed it for me. Hope this helps someone.