I removed some of unused dependencies from package.json file and then I did rm -rf node_modules and then npm install.
If I now build my project in Xcode I do not get any errors, but If I try yo run it in a simulator I get red screen as follows:
In the simulator I get :
TypeError: Cannot read property 'Symbol(Symbol.iterator)' of null
at launchEditor (/Users/boris/Projects/autralis-seller/AutralisSeller/node_modules/react-native/local-cli/server/util/launchEditor.js:153:29)
at Object.handle (/Users/boris/Projects/autralis-seller/AutralisSeller/node_modules/react-native/local-cli/server/middleware/openStackFrameInEditorMiddleware.js:17:7)
at next (/Users/boris/Projects/autralis-seller/AutralisSeller/node_modules/connect/lib/proto.js:174:15)
at Object.handle (/Users/boris/Projects/autralis-seller/AutralisSeller/node_modules/react-native/local-cli/server/middleware/getDevToolsMiddleware.js:74:7)
at next (/Users/boris/Projects/autralis-seller/AutralisSeller/node_modules/connect/lib/proto.js:174:15)
at Object.handle (/Users/boris/Projects/autralis-seller/AutralisSeller/node_modules/react-native/local-cli/server/middleware/getDevToolsMiddleware.js:74:7)
at next (/Users/boris/Projects/autralis-seller/AutralisSeller/node_modules/connect/lib/proto.js:174:15)
at Object.compression [as handle] (/Users/boris/Projects/autralis-seller/AutralisSeller/node_modules/compression/index.js:205:5)
at next (/Users/boris/Projects/autralis-seller/AutralisSeller/node_modules/connect/lib/proto.js:174:15)
at IncomingMessage.<anonymous> (/Users/boris/Projects/autralis-seller/AutralisSeller/node_modules/react-native/local-cli/server/middleware/loadRawBodyMiddleware.js:20:5)
I do not have idea what's going on. Any idea how to solve it?
EDIT
Scene.js is from react-native router-flux navigation:
/**
* Copyright (c) 2015-present, Pavel Aksonov
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree.
*
*/
import React, { PropTypes } from 'react';
import { ViewPropTypes, Text } from 'react-native';
export default class extends React.Component {
// #todo - should all props be documented/specified here?
static propTypes = {
tabBarStyle: ViewPropTypes.style,
tabBarSelectedItemStyle: ViewPropTypes.style,
tabBarIconContainerStyle: ViewPropTypes.style,
tabBarShadowStyle: ViewPropTypes.style,
tabSceneStyle: ViewPropTypes.style,
tabStyle: ViewPropTypes.style,
tabTitleStyle: Text.propTypes.style,
tabSelectedTitleStyle: Text.propTypes.style,
tabTitle: PropTypes.string,
};
render() {
return null;
}
}
So I had this issue as well and your post helped me solve it. React Native Router Flux was updated roughly 2 weeks ago, where View.propTypes was deprecated for the new ViewPropTypes. Here's the commit for it. https://github.com/aksonov/react-native-router-flux/commit/36dc20418987850677c52905beda59310a0500c3
The issue is that when this update was committed to the live branch the library version was not incremented from 3.37.0 so if you have done an npm install after that commit was implemented, your package would update with the new change, but you would most likely be none the wiser to what they had done (unless you read the commit updates for every package you use in a project)
I found that reverting react-native-router-flux to an earlier version fixed this issue. I used 3.36.0
npm install react-native-router-flux#3.36.0 --save
Related
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';
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.
I'm creating a project with React-Native, and currently when I try to compile my code I get an error saying undefined is not an object (evaluating '_expo_.Asset.loadAsync')
I'm not entirely sure what had caused this, for I entered a lot of code prior to compiling the project. However, from what I gathered this may have something to do with the fonts I'm importing?
currently this is what my code looks like for importing the font.
async componentDidMount() {
await cacheFonts({
georgia: require('../assets/fonts/Georgia.ttf'),
regular: require('../assets/fonts/Montserrat-Regular.ttf'),
light: require('../assets/fonts/Montserrat-Light.ttf'),
});
this.setState({ fontLoaded: true });
}
This worked for me in similar code:
Install :
npm install expo-font
import * as Font from 'expo-font';
...
...
async componentDidMount() {
await Font.loadAsync({
'josefin-sans-regular': require('./assets/fonts/JosefinSans-Regular.ttf')
});
this.setState({ fontLoaded: true });
}
You didn't show the error-causing code. But you seem to have called in the entire module of Expo.
Maybe you used import * as Expo from "expo" and Expo.Asset.loadAsync
With SDK 33, we’re deprecating imports of most modules from the expo package. Each module must be installed and used.
You can run expo install expo-asset
import { Asset } from 'expo-asset';
...
Asset.loadAsync(modules)
If you want to use it as it is now, you can use this module. expo-codemod
I create a new project in react-native ,then install (npm install --save react-navigation npm install --save react-native-gesture-handler),
the latest version (react-native: 0.60.0) auto linking so,I not link ,but still is showing error,
!https://prnt.sc/oaxxuc
Task :react-native-gesture-handler:compileDebugJavaWithJavac **FAILED**
After I uninstall gesture-handler this kind of error showing
!https://prnt.sc/oaxx8i
Please help to solve this error
The react-native latest version:-
System:
OS: Linux 4.15 Ubuntu 16.04.5 LTS (Xenial Xerus)
react: 16.8.6 => 16.8.6
react-native: 0.60.0 => 0.60.0 npmGlobalPackages:
react-native-cli: 2.0.1
thanks
You should paste import 'react-native-gesture-handler'; on the top of index.js which is standard in react native out of the box.
the entry of your app. This is the file where you import your App.js file, its written clearly in the documentations.
documents here https://reactnavigation.org/docs/en/getting-started.html
This issue has been posted on github and you can apply the following solution.
It will work for the RN 0.60.0.
https://github.com/kmagiera/react-native-gesture-handler/issues/642#issuecomment-509113481
First, install the library using yarn:
yarn add react-native-gesture-handler
or with npm if you prefer:
npm install --save react-native-gesture-handler
Linking
react-native link react-native-gesture-handler
Android
Follow the steps below:
If you use one of the native navigation libraries (e.g. wix/react-native-navigation), you should follow this separate guide to get gesture handler library set up on Android. Ignore the rest of this step – it only applies to RN apps that use a standard Android project layout.
Update your MainActivity.java file (or wherever you create an instance of ReactActivityDelegate), so that it overrides the method responsible for creating ReactRootView instance and then use the root view wrapper provided by this library. Do not forget to import ReactActivityDelegate, ReactRootView, and RNGestureHandlerEnabledRootView:
package com.swmansion.gesturehandler.react.example;
import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity {
#Override
protected String getMainComponentName() {
return "Example";
}
+ #Override
+ protected ReactActivityDelegate createReactActivityDelegate() {
+ return new ReactActivityDelegate(this, getMainComponentName()) {
+ #Override
+ protected ReactRootView createRootView() {
+ return new RNGestureHandlerEnabledRootView(MainActivity.this);
+ }
+ };
+ }
}
iOS
There is no additional configuration required on iOS except what follows in the next steps.
Now you're all set. Run your app with react-native run-android or react-native run-ios
If you're on React Native >= 0.60, you need to disable autolinking for react-native-gesture-handler first. To disable autolinking for it, create a react-native.config.js file in the root of your project with the following content:
module.exports = {
dependencies: {
'react-native-gesture-handler': {
platforms: {
android: null,
ios: null,
},
},
},
};
As suggested by documentation
On Android RNGH does not work by default because modals are not located under React Native Root view in native hierarchy. To fix that, components need to be wrapped with gestureHandlerRootHOC
const ExampleWithHoc = gestureHandlerRootHOC(() => (
<View>
<DraggableBox />
</View>
);
);
export default function Example() {
return (
<Modal>
<ExampleWithHoc />
</Modal>
);
}
Here the documentation
for react-native-gesture-handle 2 version onwards we just need to following changes at App.js
import {GestureHandlerRootView} from 'react-native-gesture-handler';
export default function App() {
return <GestureHandlerRootView style={{ flex: 1 }}>{/* content */}</GestureHandlerRootView>;
}
Downgrade from 1.1.0 -> 1.0.16 and use exact version(-E):
npm i react-native-gesture-handler#1.0.16 -D -E
Since this morning I'm having this issue when starting a React-Native server:
transforming [========================================] 100% 613/614Error while persisting cache: SyntaxError /Users/matteo/dev/react-native-starter/src/containers/login.js: A semicolon is required after a class property (24:3)
The code:
class LoginModal extends React.Component {
static propTypes = {
error: PropTypes.string,
isLoading: PropTypes.bool.isRequired,
login: PropTypes.func.isRequired,
} // <-- needs semicolon now
My .babelrc
{
"presets": ["react-native"],
"plugins": ["transform-decorators-legacy"]
}
You can also see the complete repo here here.
I'm having this issue after an npm installI did this morning, I didn't change the code at all.
I already tried deleting the npm cache/node_modules and starting the packager with --reset-cache, without any success.
Anyone else having the same issue?
Thank you in advance!
It comes from a Babel update that happened in a RN update (0.19 if I recall).
Anyways, you have to add a semicolon now, or downgrade RN which I don't recommend. What happened is you upgraded RN when doing an npm install