I am porting a react-js project to react-native. I would like to reuse the react-click-outside library. But I consider the following problem when adding it to my dependencies and using handleClickOutside() method. The error message is:
The development server returned response error code: 500
URL:
http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false
Body: {"message":"Unable to resolve module react-dom from
/Users/xxx/ReactNativeProjects/react_native_prototype/node_modules/react-click-outside/dist/index.js:
Module does not exist in the module map or in these directories:\n
/Users/xxx/ReactNativeProjects/react_native_prototype/node_modules\n\nThis
might be related to
https://github.com/facebook/react-native/issues/4968\nTo resolve try
the following:\n
Clear watchman watches: watchman watch-del-all.\n
Delete the node_modules folder: rm -rf node_modules && npm install.\n
Reset packager cache: rm -fr $TMPDIR/react-* or npm start -- --reset-cache
I went through all the steps but still I get the same error message when I run the app in Android and/or iOS simulator.
Then I looked into the /Users/xxx/ReactNativeProjects/react_native_prototype/node_modules/react-click-outside/dist/index.jsfile and saw that the library imports something from react-dom. But I think react-native doesn't use any DOM? Is that right? So react-click-outside only seems to be compatible with react-js but not with react-native. Am I right? Or did anyone maybe find a simple solution to simulate handleClickOutside()behaviour?
My code looks like this:
import React from 'react';
(...)
import clickOutside from 'react-click-outside';
const newClass = class TrafficNodeFinder extends React.Component {
(...)
handleClickOutside() {
this.setState({
listOfNodes: ds.cloneWithRows([])
});
}
(...)
}
export default clickOutside(newClass);
The error I get now looks like this:
Can't find variable: document
WrappedTrafficNodeFinder_componentDidMount
index.js:17
ReactCompositeComponent.js:353
measureLifeCyclePerf
ReactCompositeComponent.js:85
ReactCompositeComponent.js:352
notifyAll
CallbackQueue.js:73
close
ReactNativeReconcileTransaction.js:36
closeAll
Transaction.js:222
perform
Transaction.js:163
batchedMountComponentIntoNode
ReactNativeMount.js:77
perform
Transaction.js:149
batchedUpdates
ReactDefaultBatchingStrategy.js:65
batchedUpdates
ReactUpdates.js:111
renderComponent
ReactNativeMount.js:141
render
ReactNative.js:31
renderApplication
renderApplication.js:33
run
AppRegistry.js:76
runApplication
AppRegistry.js:105
__callFunction
MessageQueue.js:236
MessageQueue.js:108
guard
MessageQueue.js:46
callFunctionReturnFlushedQueue
MessageQueue.js:107
I just tried to simulate the behaviour of react-click-outside. I wanted to already surrounded the component which shall react on a click outside of it with View-Elements. But it seems that Views and other react-native UI components don't have any click handler. When I surround my View with a TouchableHighlight it is only clickable if I put a padding. Otherwise all children components "consume" the click events of there parents. Maybe I can somehow tell the children in my view hierarchy to pass the click events to there parents?
No, react-click-outside relies on document.addEventListener, but there is no document in React Native, as there is no underlying DOM.
Related
After upgrading React Native to 0.62.2, and installing react-native-material-dropdown` library, project is giving this error:
I solved this by,
Commenting itemTextStyle: Text.propTypes.style in
..\node_modules\react-native-material-dropdown\src\components\dropdown
file.
And remove Animated in Animated.Text.propTypes.style in
affix/index
helper/index
label/index
of react-native-material-textfield.
And added import { Animated, Text} from 'react-native'; in each of
above three files.
Here is another solution I've found.
Remove installed package react-native-material-dropdown
yarn remove react-native-material-dropdown
Install new packages react-native-material-dropdown-v2 and react-native-paper
yarn add react-native-material-dropdown-v2 react-native-paper
Swap react-native-material-dropdown to react-native-material-dropdown-v2 in your code
e.g.
import { Dropdown } from 'react-native-material-dropdown' to import { Dropdown } from 'react-native-material-dropdown-v2'
I found the same problem while using #react-navigation/drawer
I've solved it by these steps.
Open node_modules and then search for react-native-material-textfield open the file and go to src folder
Under src you will see affix, helper, label folder - under each folder, there is an index.js
open the index.js of the mentioned folders one by one (all 3 folders) and search for the text style: Animated.Text.propTypes.style, and replace it by style: Text.propTypes
And import text form react-native like this import { Animated , Text} from 'react-native';
And now reload the terminal, and you are good to go
There is an issue open on github about this problem. As mentioned in the comment, it is possible to use this option to edit node modules, or create a patch so that it is not necessary to edit the files every time you add a new library or run an npm install.
Instruction:
Create patches directory in your project's root
Copy patch to
patches/react-native-material-textfield+0.16.1.patch
yarn add patch-package postinstall-postinstall or npm i patch-package
yarn patch-package or npx patch-package
Fix is already applied. Add the following to package.json to not repeat the same next time:
"scripts": {
+ "postinstall": "patch-package"
}
https://github.com/n4kz/react-native-material-textfield/issues/249#issuecomment-625791243
I faced the same issue while using react-native-material-dropdown.
Fix:
navigate to node_modules/react-native-material-textfield/src/components
Open files affix/index.js, helper/index.js and label/index.js
Replace style: Animated.Text.propTypes.style with style: Text.propType
import {Text} in each of these 3 files import { Animated ,Text} from 'react-native'
This should fix the issue
react-native version: 0.64.0
Just update the library they updated their library with fixes here is the link
https://www.npmjs.com/package/react-native-material-dropdown-v2-fixed
For me it was the package "react-native-easy-toast" at version 2.0.0. The weird thing was, that I couldn't find "propTypes" or "Animated" anywhere in my Code or in my libs (node-modules). I'd expect to find it somewhere in the react-native-easy-toast folder in node_modules...
Anyway, after commenting all my toasts the app started again.
I now also found a patch for this: "https://github.com/crazycodeboy/react-native-easy-toast/issues/118" and with this and from other here mentioned patch-package it worked with the toasts and the patch gets automatically applied after npm install:)
I am using react-native-material-textfield package, and I also faced this error so I added this piece of code in my JS file right before importing:
import { Animated, Text } from 'react-native';
Animated.Text.propTypes = Animated.Text.propTypes || Text.propTypes;
import { TextField } from 'react-native-material-textfield';
I have faced the same issue while using react-native-material-dropdown.
Fixed using this:
navigate to node_modules/react-native-material-textfield/src/components
Open files affix/index.js, helper/index.js and label/index.js
I have resolved my issue by using this lib
react-native-material-dropdown-no-proptypes
I'm working on a project where I use electron-vue and to make the app look better I use bootstrap-vue. After a lot of debugging, I have found that changing a data property(in the parent component) that is linked to bootstrap components props. It will give me error messages telling me not to mutate props values, and that they are read-only. As it seems for me, the code works and executes, but will give me a lot of errors in the console. When I say it seems to work, what I mean is that both console.log and visually on bootstrap component it seems to change the variables correctly.
After writing a lot of test cases I have found out that changing a data property does not give an error. But when changing a data property that is linked to a bootstrap component prop it will.
A test case that shows where these error messages show up is in the code below:
<template>
<b-progress :max="maxNumberOfFiles" show-value>
<b-progress-bar :value="currentNumberOfErrorFiles"
:max="maxNumberOfFiles"
variant="danger"
show-value
/>
</b-progress>
</template>
export default {
data() {
maxNumberOfFiles: 1,
currentNumberOfErrorFiles: 0
},
methods {
test: function() {
currentNumberOfErrorFiles = 1;
}
}
}
The code above will result in 3 errors:
$attrs is readonly
$listeners is readonly
Avoid mutating a prop directly since the value will be overwritten whenever
the parent component re-renders. Instead, use a data or computed property
based on the prop's value. Prop being mutated: "value"
But this code produces zero errors:
<template>
<progress :value="currentNumberOfErrorFiles"
:max="maxNumberOfFiles"
>
</progress>
</template>
export default {
data() {
maxNumberOfFiles: 1,
currentNumberOfErrorFiles: 0
},
methods {
test: function() {
currentNumberOfErrorFiles = 1;
}
}
}
I have tried to use google for similar problems and look at the doc for both electron-vue and bootstrap-vue, and can't find anything that helped me. Is there anyone that have run into the same problem or have a solution on how to get rid of those errors?
So after a lot of headaches, I finally found a way to avoid all these warnings and errors. When I initialized the project I used these commands:
$ npm install vue-cli -g
$ vue init simulatedgreg/electron-vue <<project-name>>
After a suggestion on reinitializing the project using the vue-cli and add the plugin for electron after (This person created a quick project and had no problems). So when initializing the project again I used these commands:
npm install vue-clie -g
vue create <<project-name>>
cd <<project-name>>
vue add electron-builder
npm install bootstrap-vue
npm install
If I remeber correctly those were all the npm install commands you needed, but if you get an error of a package missing, just use npm install <> to install it.
Now I had to move every .vue file over to the new project and check that all the import statements are correct, and import and use bootstrap again in the index.js.
If you use vue-router, vuex or vuex-electron these also need to be moved over and installed again. This should just be to move the files over to the new project and check where they were imported in the old files and copy that over.
For me, it seemed that the vue init command did something that the bootstrap-vue package doesn't like. I didn't have a very large project, so the whole process took about 15-20 min.
To run an auto update dev server use the command npm run electron:serve and the command npm run electron:build to build the project. These commands can be changed in the package.json file.
The folder structure is a bit different, there will no longer be a renderer and main folder. Everything will be in the src folder. The main.js from the main folder is now named background.js. Apart from that, I think it is similar enough to figure out by just looking through the files.
I've already tried what's recommended in this screenshot
by using this line of code
import AsyncStorage from '../../../node_modules/#react-native-community/async-storage'; in the file where I'm importing async-storage from react-native
but this path is unresolved, i.e. async-storage doesn't exist in this directory. I also tried installing async-storage (even though it's already installed) by running yarn add async-storage, but nothing appeared in the previously mentioned directory
There are two ways you can do this.
Firstly import AsyncStorage correctly. This will remove the warning and fix the problem.
Secondly, suppress the warning. This will just hide the warning but will cause you issues once AsyncStorage has been removed from react-native. I would not do this as the first way actually solves the problem.
Note you can get this warning if you are using a dependency that uses AsyncStorage and still imports it the old way from react-native. Installing AsyncStorage won’t fix the error. You will need to look through your dependencies’ dependencies to find out which one is causing it.
This means actually going through the code of each your dependencies to see if they use AsyncStorage. Searching through your node modules or on the dependency's Github usually is sufficient but it can take some time to find it.
Once you have found out which one is causing it, you should open an issue or create a PR with a fix on the dependency’s repo. At this point suppressing the warning is all you can do until it is fixed.
Install AsyncStorage
Install it using your favourite package manager npm or yarn
Link the dependency
Use the dependency
Installation: choose the method you usually use
npm i #react-native-community/async-storage
or
yarn add #react-native-community/async-storage
Link the dependency (you may not have to do this if you are using 0.60+ as it has Autolinking)
react-native link #react-native-community/async-storage
Then you import it like this, and use it as before.
import AsyncStorage from '#react-native-community/async-storage';
You can see more about it by looking here
Suppress the warning.
Previously you would use YellowBox to suppress warnings, this has now changed to LogBox. The process is similar to that of YellowBox
import { LogBox } from 'react-native';
Then you can add the following
LogBox.ignoreLogs(['Warning: Async Storage has been extracted from react-native core']);
I usually do it in the App.js so it is easy to keep track of which ones I have hidden.
It won't remove the warning from your console, but it will remove any LogBox warnings associated with the error. However, I wouldn’t do this on this occasion as there is a proper fix, which is to install the dependency correctly.
Expo users
Currently Expo still imports AsyncStorage from react-native, due to this you may still experience the warning. I believe it still imports it this way for backwards compatibility reasons. A quick search of the Expo repo shows that there are many instances where it is used as you can see here. In this case your only option would be to suppress the warning. According to the Expo feature requests it is currently in progress, so hopefully it should be added to Expo shortly.
Expo Update
As of June 2020: #react-native-community/async-storage v1.11.0 can be installed in Expo managed apps. Hopefully this will lead to less of these warnings appearing as dependencies transition to the new way of importing async-storage.
Repo update
There is now a new repository for async-storage which can be found here
https://github.com/react-native-async-storage/async-storage
Check out the documentation for installation and linking instructions
https://react-native-async-storage.github.io/async-storage/docs/install/
If the source of the issue is Firebase then a working solution as of version 9.9.2 is to set the default persistence layer used by Firebase to store the authentication session to be AsyncStorage after correctly importing it:
expo install #react-native-async-storage/async-storage
then to add in firebase.js
import AsyncStorage from '#react-native-async-storage/async-storage';
import { initializeAuth, getReactNativePersistence} from 'firebase/auth/react-native';
and then to export { auth } via
const auth = initializeAuth(app, {
persistence: getReactNativePersistence(AsyncStorage)
});
export { auth };
Unlike getAuth(), initializeAuth() gives us control over the persistence layer .
Reference.
For me this issue was with #firebase.
node_modules/#firebase/app/dist/index.rn.cjs.js
following the steps above from Andrew, in vscode I was able to remove the warning.
copy "AsyncStorage"
cmd + shift + f - then paste "AsyncStorage" into search
click three dots under search '...'
right click node_modules folder select 'copy path'
add path to 'files to include' in vscode search
find one example of the import or require statement for the original (incorrect) AsyncStorage, copy that. Paste it into the search, replacing the first search query.
Once all the imports are found install the AsyncStorage correctly for the new version (as mentioned above), also add to pods, then go through and replace all
require('react-native').AsyncStorage; => require('#react-native-community/async-storage').AsyncStorage;
import AsyncStorage from 'react-native'; => import AsyncStorage from '#react-native-community/async-storage';
I did a clean build with xcode, Then all was good to go, no more warning :-)
This seems to be an ongoing issue on Firebase with React Native.
Check out this thread:
https://github.com/firebase/firebase-js-sdk/issues/1847
I have been annoyed by this similar issue and here is my warning message. I simply solved it by:
go to: 'node_modules/react-native/index.js'
simply comment out all the lines that contains 'AsyncStorage'
Then it was working fine for me.
Credits to #Rory for the below steps:
Note: We need to find var reactNative = require('react-native') in node_modules
Note: If you don't want to do the following steps, just navigate to node_modules/#firebase/auth/dist/rn/index.js
cmd + shift + f - then paste var reactNative = require('react-native') into search
click three dots under search '...'
right click node_modules folder select copy path
add path to files to include in vscode search
Then in index.js where we find our search, do the following replacements:
// var reactNative = require('react-native');
var AsyncStorage = require('#react-native-community/async-storage');
// and further below
// var reactNativeLocalPersistence = getReactNativePersistence(reactNative.AsyncStorage);
var reactNativeLocalPersistence = getReactNativePersistence(AsyncStorage);
Refresh and the warning is gone!
if you're using npm
npm install #react-native-async-storage/async-storage
yarn
yarn add #react-native-async-storage/async-storage
YellowBox has been replaced with LogBox. You can use LogBox.ignoreLogs() instead to suppress the warning
In my case firebase using asyn storage from react native . I am using v8 firebase which has no getReactNativePersistence.
So I had this solution which may be helpful.
Keep below code snippet in one file ignoreWarning.js and import in App.js on top of file .
import { LogBox } from "react-native";
const ignoreWarns = [
"AsyncStorage has been extracted from react-native",
];
const warn = console.warn;
console.warn = (...arg) => {
for (const warning of ignoreWarns) {
if (arg[0].startsWith(warning)) {
return;
}
}
warn(...arg);
};
LogBox.ignoreLogs(ignoreWarns);
My team recently added CodePush to our React Native app, and while it works perfectly fine on the original local repository, when I pull the changes I get the error
Cannot read property 'CheckFrequency' of undefined
This occurs after installing react-native-code-push and linking it properly. All answers I found for similar questions seemed to have this error when using Jest, but we are not using Jest and this error happens any time I run react-native run-ios
The code looks like this:
CodePush is imported
import codePush from "react-native-code-push";
And later in the same file, the error occurs on
let codePushOptions = {
checkFrequency: codePush.CheckFrequency.MANUAL, // error here
updateDialog: false,
installMode: codePush.InstallMode.IMMEDIATE
}
Try changing import to
import * as CodePush from 'react-native-code-push';
In my case that was because I didn't link the package properly.
once you link "react-native-codepush" properly (either automatic or using rnpm or manually) codePush won't be undefined.
After upgrading React Native from 0.29 to 0.30, I get this error message. I multiple times deleted node_modules, installed them back again, cleared watchman cache and npm start --reset-cache.
I tried it also on new project with react-native init someProject. The same error. Was this module renamed or deleted? I haven't found any info about it in release notes or in commits.
Thanks for help!
It's no longer needed. onTouchStart, onTouchEnd and onTouchMove are props of Views now.
Look here
I don't know, what really happened to this component.
But, at least, currently on RN 0.30 you can require ReactNativeEventEmitter as follows:
var ReactNativeEventEmitter=require(127);
The following line ...
console.log(ReactNativeEventEmitter)
...will print then this in the console (in Debug-Mode):
(I've figured it out while searching the react-native libraries in "node-modules" in the following file: "./node_modules/react-native/ReactAndroid/src/androidTest/assets/AndroidTestBundle.js:13879", and it is also working under iOS [the screenshot above originates from iOS]).
Have you tried to import using below snippet?
import { DeviceEventEmitter } from 'react-native';