I'm trying to add the following package to my project but it causes the error:
'Tried to register two views with the same name RNGestureHandlerButton",
which it doesn't do in my other project and I don't know why.
When I change the import of FlatList from "react-native-gesture-handler", and change to from "react-native" the error mentions but it doesn't work scrolling the list
The package I'm trying to get working:
https://github.com/Bur0/react-native-actions-sheet-picker
Link to changed file where scrolling does not work (On github it is located in /src/components/Picker.tsx):
https://controlc.com/9b7a0988
I installed "react-native-gesture-handler" unnecessarily.
Just uninstall it since I use expo and this package is already in it.
See answer:
Tried to register two views with the same name RNGestureHandlerButton
I'm trying to use this library. I cloned the code, ran npm install and then ran react-native run-android. As a result I got an error Cannot find module 'metro-config/src/defaults/blacklist'. I looked it up, and found an answer that suggest
to change the content of the blacklist.js file because of faulty regex.
However, I looked at the path suggested in the answer metro-config/src/defaults/blacklist but it didn't contain any blacklist.js files. I also looked at other paths but still didn't find anything with the name blacklist.js.
How can I fix this issue and get the library working?
Node version: v14.17.0
React native version: 0.64.2
I had the same issue in expo-yarn-workspace with the same react-native version.
I fixed it by find where 'metro-config/src/defaults/blacklist' is call and replace it
by 'metro-config/src/defaults/exclusionList' because it's been renamed.
https://github.com/facebook/metro/blob/a94200229df4e7f3a9549665142d4ad4b8d32de5/packages/metro-config/src/defaults/exclusionList.js
https://github.com/facebook/metro/issues/453
Let me know if it works for you !
Since I've been recently made aware of React Navigation, I tried using it, but I can't get it to work.
I've followed the instructions presented at the documents of reactnavigation.org, normally, with npm. Since that didn't work, I also tried installing via their yarn commands, but the same error was presented.
While I couldn't find any answer to this same problem, since apparently it was react-navigation-stack instead of #react-navigation/stack, I tried out solutions for similar errors - trying to install it with --saveand trying to reinstall react-navigation, rebuild the project, then restart the packager with react-native-start.
The relevant part of the error reads as this:
The development server returned response error code: 500
URL:
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false
Body:
{"originModulePath":"App.js","targetModuleName":"#react-navigation/stack;","message":"Unable
to resolve module #react-navigation/stack; from App.js:
#react-navigation/stack; could not be found within the project.
Alternatively, I also tried using react-navigation-stack by following old setup tutorials, but I couldn't get that version to work either. I'd much prefer using something up-to-date, though.
I went to code as soon as I woke up and immediatly identified the problem, it was a semicolon.
Instead of import { createStackNavigator } from "#react-navigation/stack";, I'd written import { createStackNavigator } from "#react-navigation/stack;" so yeah. Silly problem.
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.