Getting below error when trying to import from navigation with expo.
Tried starting Typscript tab project and getting same error when starting the project.
if (!module) {
throw unknownModuleError(moduleId);
}code here`
Related
I have this basic React Native Code which fails to compile as soon as I import anything from react-native-router-flux. It throws Module not found: Can't resolve '#react-navigation/core'
If I uncomment line import { Router, Scene } from "react-native-router-flux";, everything works fine. I also manually did npm install #react-navigation/core but to no avail
import React from "react";
import { Router, Scene } from "react-native-router-flux";
class Index extends React.Component {
render() {
return <div></div>
}
}
export default Index;
What could I be missing?
Versions
React v17.0.2
react-native-router-flux v4.3.1
React-native v0.66.3
The latest react-native version (v0.66.3) is incompatible with react-native-router-flux (v4.3.1) which is pretty old. Its better to look for #react-navigation/native
Thanks #XplosiVe06 for pointing out
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 am new in React Native. Right now, I am studying Props and State. I wanted to try the FlatList Component in this doc https://facebook.github.io/react-native/docs/flatlist. However, I am getting this error.
You're using typed JavaScript known as Type script.
If you want to use TypeScript (I highly encourage it, then you can do so by following below tutorial):
Migrating to TypeScript:
https://facebook.github.io/react-native/blog/2018/05/07/using-typescript-with-react-native
To just get rid of the error!
state = {selected : (new Map())};
TypeScript Migration Continued...
Adding TypeScript
The next step is to add TypeScript to your project. The following commands will:
add TypeScript to your project
add React Native TypeScript Transformer to your project
initialize an empty TypeScript config file, which we'll configure next
add an empty React Native TypeScript Transformer config file, which we'll - configure next
adds typings for React and React Native
Okay, let's go ahead and run these.
yarn add --dev typescript
yarn add --dev react-native-typescript-transformer
yarn tsc --init --pretty --jsx react
touch rn-cli.config.js
yarn add --dev #types/react #types/react-native
The tsconfig.json file contains all the settings for the TypeScript compiler. The defaults created by the command above are mostly fine, but open the file and uncomment the following line:
{
/* Search the config file for the following line and uncomment it. */
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
}
The rn-cli.config.js contains the settings for the React Native TypeScript Transformer. Open it and add the following:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
},
getSourceExts() {
return ['ts', 'tsx'];
},
};
Migrating to TypeScript
Rename the generated App.js and __tests_/App.js files to App.tsx. index.js needs to use the .js extension. All new files should use the .tsx extension (or .ts if the file doesn't contain any JSX).
If you tried to run the app now, you'd get an error like object prototype may only be an object or null. This is caused by a failure to import the default export from React as well as a named export on the same line. Open App.tsx and modify the import at the top of the file:
-import React, { Component } from 'react';
+import React from 'react'
+import { Component } from 'react';
Some of this has to do with differences in how Babel and TypeScript interoperate with CommonJS modules. In the future, the two will stabilize on the same behaviour.
At this point, you should be able to run the React Native app.
I would like to use https://github.com/dgladkov/react-native-image-rotate in react-native project
I download it with yarn add react-native-image-rotate
I link it with react-native link
I import it in my component with import ImageRotate from 'react-native-image-rotate';
But when I try to use it I have a Cannot read property 'rotateImage' of undefined
I put a break-point in node_modules/react-native-image-rotate/index.js on the line:
const RCTImageRotateModule = NativeModules.ImageRotateModule;
And in the object NativeModules there is no ImageRotateModule object.
How Can I add ImageRotateModule in NativeModules ?
Im using react-native 0.50.3
Thx
react-native link react-native-image-rotate
When I load my react-native app in Expo I get the error: "Cannot find entry file index.js in any of the roots."
I am adding onto an existing React Web App, and have index.ios.js at the root level. Everything works fine locally, in simulator and through Xcode on my phone hardwired. I've converted my app with exp convert and integrated all info into exp.json.
All info for the ios app is contained in a folder called "ios".
Has anyone run into this or have any thoughts on how to get unstuck?
check you package.json and rename index.js to your entry file.
//...
},
"main": "index.js"
}
If you are using Expo, you need to go to your project folder and find the below file:
\node_modules\expo\AppEntry.js
import { KeepAwake, registerRootComponent } from 'expo';
import App from '../../App';
if (__DEV__) {
KeepAwake.activate();
}
registerRootComponent(App);
and here just replace the App to Custom_Component_Name in the second line of import.
You can find the entry file by looking in the package.json file. In package.json you will find
{
"main": "node_modules/expo/AppEntry.js"
}
AppEntry.json is the entry file by default in expo projects.