I'm basically having the issue same as here.
https://github.com/firebase/firebase-js-sdk/issues/1899
How I got this error
Since AsyncStorage is deprecated, I tried to install #react-native-community/async-storage following the official documentation
But it failed completely as I got the error above.
Thus I wanted to roll back to my previous working version except none of what I did worked.
None of these solved my problem
4 commands suggested on the error screen
undoing yarn add with yarn remove
I also did npm install #react-native-community/async-storage, did not work.
3.5 so I did npm uninstall #react-native-community/async-storage It was removed, but roll-back did not work.
Re-installing the react-native-cli
Re-creating a completely new project from scratch, but it is still giving the same error.
I could not find a solution for this. Please help.
If it's on iOS you probably forgot to do pod install.
Paste this inside ios/Podfile:
pod 'RNCAsyncStorage', :path => '../node_modules/#react-native-community/async-storage'
then just do cd ios && pod install
EDIT.
I createad a project from scratch, this are the steps i did to make asyncStorage run on iOS and Android:
1) react-native init AsyncTest
2) npm i #react-native-community/async-storage
(trying to use asyncStorage during this step shows error, but works on Android)
3) Pasted inside Podfile this pod:
pod 'RNCAsyncStorage', :path => '../node_modules/#react-native-community/async-storage'
4) From terminal, assuming you are in the project folder do cd ios and pod install
5) Project run succesfully on iOS and works.
react-native version was 0.60.4
This is how the project test App.js was for the test:
import React from 'react';
import { View } from 'react-native';
import AsyncStorageTest from './AsyncStorageTest'
const App = () => {
return (
<View>
<AsyncStorageTest />
</View>
);
};
export default App
And AsyncStorageTest is:
import React, { Component } from 'react'
import { View, Text, Button } from 'react-native'
import AsyncStorage from '#react-native-community/async-storage';
export class AsyncStorageTest extends Component {
constructor(props) {
super(props)
this.state = {
storedData: "myValue"
}
}
storeData = async () => {
console.log("inside storeData")
try {
await AsyncStorage.setItem('Test', 'TestValue')
} catch (e) {
console.log(e)
}
}
getData = async () => {
console.log("inside getData")
try {
const value = await AsyncStorage.getItem('Test')
this.setState({ storedData: value })
} catch (e) {
// error reading value
}
}
render() {
return (
<View style={{ marginTop: 40 }}>
<Text> {this.state.storedData}</Text>
<Button title={"storeData"} onPress={this.storeData}></Button>
<Button title={"getData"} onPress={this.getData}></Button>
</View>
)
}
}
export default AsyncStorageTest
Tested and worked, see if you missed something.
Make sure the that #react-native-community/async-storage is unlinked from your project.
Somehow the path to the package got changed.
This helped me:
import AsyncStorage from '#react-native-async-storage/async-storage';
For someone like me please double-check this as well:
When you install npm i #react-native-community/async-storage you should import it as import AsyncStorage from '#react-native-community/async-storage'; and DO NOT import is as import AsyncStorage from '#react-native-async-storage/async-storage';
after i run npm install react-native-dotenv
i take this error,
then i rerun npm install;
cd ios;pod install;cd ..;
and then close the terminal and uninstall app from phone,and restart them,it's works.
my version "react": "16.9.0",
"react-native": "0.61.5",
I solved this issue by installing #react-native-community/async-storage aliased to #react-native-async-storage/async-storage
The command was
yarn add #react-native-async-storage/async-storage#npm:#react-native-community/async-storage
or
npm install --save #react-native-async-storage/async-storage#npm:#react-native-community/async-storage
I solved this issue following the import...
import {AsyncStorage} from 'react-native';
When you install npm install #react-native-community/async-storage
You could import => import AsyncStorage from '#react-native-community/async-storage';
Dont import this => import AsyncStorage from '#react-native-async-storage/async-storage';
Related
Got this error when try running npm run android.
Component Exception
Can't find variable SafeAreaProvider in files App.js and navigation/index.js.
I dont even have SafeAreaProvider included or used in the files. It looks strange to me, any ideas ?
App.js
import React from 'react';
import Providers from './navigation';
const App = () => {
return (
<Providers/>);
}
export default App;
navigation/index.js
import React from 'react';
import { AuthProvider } from './AuthProvider';
import Routes from './Routes';
const Providers = () => {
return (
<AuthProvider>
<Routes />
</AuthProvider>
);
}
export default Providers;
Apart from installing npm install #react-navigation/native, you will also need to install its dependencies, which you can do by running npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context #react-native-community/masked-view.
If we are supposed to implement the navigation in the react-native application we must have to install all the libraries described in the npm documentation.
So be sure that you have installed all the peer-dependencies and followed the documentation properly.
for the stack navigation implementation, we must have to install the following libraries as per the documentation.
#react-navigation/native
react-native-reanimated
react-native-gesture-handler
react-native-screens
react-native-safe-area-context
#react-native-community/masked-view
#react-navigation/stack
for more information check out the official documentation to crash the issue.
https://reactnavigation.org/docs/getting-started
Getting this warning in the console when React Native app gets built initially.
Can anyone help me with the reason why I am getting this?
Following are the specifications
react-native-cli: 2.0.1
react-native: 0.62.0
Node: v12.9.1
There are generally two categories of cycle warning: one from our own codebase, and another from node_modules packages such as react-navigation-fluid-transitions. In this case, I think it is react-native paper.
We could hardly do anything about the require cycle in node_modules unless the package authors fix it.
But you still wish to keep the package and ignore the warning:
import { YellowBox } from 'react-native'
YellowBox.ignoreWarnings([
'Require cycle:'
])
I fixed it by importing each component separately like this:
import Button from 'react-native-paper/src/components/Button';
import IconButton from 'react-native-paper/src/components/IconButton';
do similar wherever you are using sth from react-native-paper
in your package.json ensure react-native-paper is "react-native-paper": "^4.5.0",
Then
rm -rf node_modules
npm install
npm start --reset-cache
your react-native-paper warning will disappear
If you have multiple Providers wrapping your app, make sure your Provider imported from react-native-paper is way up above in the Hierarchy (there are exceptions like Redux's Provider).
I had multiple providers and had it between other providers, which I think created cycle imports. Fixed the problem when I moved it above the tree, just below redux's provider().
import React from 'react';
import { StatusBar } from 'react-native';
import { Provider } from 'react-redux';
import { Provider as PaperProvider} from 'react-native-paper';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { store } from './your/reduxStore';
import { someTheme } from './your/apptheme';
const App = () => (
<Provider store={store}>
{/* Make sure react-native-paper provider is high up the tree */}
<PaperProvider theme={muiTheme}>
<SafeAreaProvider>
<StatusBar translucent />
{/* Your other App Stuff Here */}
</SafeAreaProvider>
</PaperProvider>
</Provider>
);
export default App;
YellowBox is deprecated, use LogBox:
import { LogBox } from 'react-native';
LogBox.ignoreLogs([
'Require cycle:'
])
sadly the "Require cycles are allowed" warning is still shown in the logs
You can go to each path and remove the cycle.
For example, in node_modules\react-native-paper\src\components\Checkbox\Checkbox.tsx, remove the reference of CheckboxItem.
However, I don't know what the impact of this is.
react-native-background-task
I want the code to run back in time. I'm trying to use react-native-background-task. But BackgroundTask.define does not start.
import React from 'react'
import { Text } from 'react-native'
import BackgroundTask from 'react-native-background-task'
BackgroundTask.define(() => {
console.log('Hello from a background task')
BackgroundTask.finish()
})
export default class Home extends React.Component {
componentDidMount() {
BackgroundTask.schedule({
period:1
})
}
render() {
return <Text>Hello world</Text>
}
}
this is due to linking issue
Android
he linking of the library can be done automatically by running:
$ react-native link react-native-background-task
One manual step is still needed -
in your project file android/app/src/main/java/myapp/MainApplication.java, add the following to the end of the onCreate() method:
BackgroundTaskPackage.useContext(this);
iOS
For iOS support, this library relies on version 2.0.x of react-native-background-fetch which can be installed as follows:
$ npm install react-native-background-fetch#2.0.x --save
$ react-native link react-native-background-fetch
This library will behave correctly on iOS as long as react-native-background-fetch is installed alongside it, and has been linked with your project.
The code in app.js file with import statements for react redux is created to display a header with a text called "Tech stack".
App.js
import React from 'react';
import { View } from 'react-native';
import { Header } from './components/common';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from './reducers';
const App = () => {
return(
<Provider store={createStore(reducers)}>
<View>
<Header headerText="Tech Stack" />
</View>
</Provider>
);
};
export default App;
This is the index file
index.js
import { AppRegistry } from 'react-native';
import App from './src/App';
AppRegistry.registerComponent(tech_stack, () => App);
While running this on the terminal, it throws a error saying unable to resolve module 'react-redux'.
Close the JS bundle(a terminal starts when you run app for first time) and rerun it using the command react-native start from the project path. Basically, you need to rerun the JS bundle after every package installation.
Install 'react-redux' by using
npm install --save react-redux
if you not installed it. By seeing your comment as you mentioned that you installed redux only.
Then restart the JS bundle by using
react-native start --reset-cache
I've faced this issue just now. actually, Our (you and I) main issue is naming the global state folder name is redux and the bundler falls in a conflict because there is a folder inside node_modules that name is redux too.
In fact, the main issue is this line:
import { createStore } from 'redux';
I renamed the resux stuffs folder to reduxStore instead of redux and then everything works properly.
This error occurs because you do not have Redux-Thunk middleware installed on your application. To install run:
npm install redux-thunk
Then, restart your application:
react-native start
More information: https://github.com/reduxjs/redux-thunk
I just ran into this problem and solved it by installing redux in addition to react-redux. Apparently, react-redux requires it.
I've got a strange situation where suddenly my RN app won't load any of its scenes. The app has been running fine for weeks and I haven't moved any of the files. The failure:
error: bundling: UnableToResolveError: Unable to resolve module `./src/scenes/splash` from `/Users/jcollum/projects/starsApp/index.ios.js`: Directory /Users/jcollum/projects/starsApp/src/scenes/splash doesn't exist
at Promise.resolve.then (/Users/jcollum/projects/starsApp/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:445:15)
at process._tickCallback (internal/process/next_tick.js:109:7)
My import statements look like:
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
import { Router, Scene } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/FontAwesome';
import Splash from './src/scenes/splash';
The scene definitely exists:
$ ll /Users/jcollum/projects/starsApp/src/scenes/splash.js
-rw-r--r-- 1 jcollum staff 722B Apr 26 10:12 /Users/jcollum/projects/starsApp/src/scenes/splash.js
And it has an export default:
import React, { Component, PropTypes } from 'react';
import { View, Text, TouchableHighlight, Image } from 'react-native';
import styles from '../styles'
import { Actions } from 'react-native-router-flux';
export default class Splash extends Component {
componentWillMount() {
setTimeout(() => {
Actions.Home()
}, 1000);
}
render() {
console.log(`rendering Splash`);
return (
<View ...
Things I have tried:
restarting packager
resetting content and settings
checking out a previous commit
clearing temp dir: rm -fr $TMPDIR/react-*
react-native --version
react-native-cli: 2.0.1
react-native: 0.43.2
What could be causing this? Why would this suddenly stop loading resources? What's the next thing to try?
Solution (don't know why this works, sorry):
Stop any running packager
Add this to package.json: "clean-start": "rm -rf node_modules && yarn install && rm -rf $TMPDIR/react* && npm start --reset-cache", (or npm install if you don't use yarn)
npm run clean-start
I faced the similar issue once and what i did was nothing fancy, I just cut all the files which were giving error and copied at some place(outside my project dir) and then paste those files again at their place helped me..
Cheers :)
In my case, ran
npm cache verify
in console at my project directory, all was well. Hope it helps