I use this boilerplate. I nearly got React Native working on my Android device. But somehow it fails in the last step because it does not find an index.js file. But that file is located in my project.
So when I now run this in src/
yarn react-native run-android
this is the Node CLI window:
So my issue is:
Error: Unable to resolve module `./index` from ``:
None of these files exist:
* index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
From the console itself I cannot see any issue:
So somehow it does not find the index.js file for some reason.
I already tried yarn react-native start -- --reset-cache but it did not change anything.
Edit #1:
When I add a fake empty index.js file on root folder, the error is gone and in the emulator I get this one:
Edit #2:
I'm getting nearer to a solution. I just added this to the fake index.js in the root:
import {AppRegistry} from 'react-native';
import App from './src/components/App';
import {name as appName} from './src/app.json';
AppRegistry.registerComponent(appName, () => App);
and there I got:
Edit #3:
Now it helped me to overwrite the app.json with the following:
{
"name": "test",
"displayName": "test"
}
and new error is:
Edit #4:
I now moved all back to the src folder. So in the root there is no index.js anymore. Now this works pretty good. The usual react-scripts start is running. Also react-native start runs. And the issue with run-android was fixed with this in the MainApplication.java
protected String getJSMainModuleName() {
return "index.android";
}
to
protected String getJSMainModuleName() {
return "src/index.android";
}
I think this is another issue with the location...
So the main issue is fixed relatively easy. All that needs to be done is having a placeholder App.js file and another index.js file. How to do that in detail here. Here is the short description:
First move your existing App.js file to src/App.js.
Now create a new App.js in the main folder:
import React from 'react';
import HybridApp from './src/App';
const App = (props) => {
return (
<HybridApp />
);
}
export default App;
Also create a new src/index.js file:
import React from 'react';
import ReactDom from 'react-dom';
import App from './App';
ReactDom.render(<App />, document.getElementById("root"));
And all the other issues are related to using the wrong technology. Like you cannot use window in React Native. Here the code needs to be rewritten to be working again.
Related
I was running my project well but suddenly this error start to appear:
Logs for your project will appear below.
Error: Unable to resolve module ./index from C:\Users\mateu\OneDrive\Documentos\React JS\Projetos\sleeper-app\sleeper-app-v1\sleeper-app/.: None of these files exist: * index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json) * index\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json) at ModuleResolver.resolveDependency (C:\Users\mateu\OneDrive\Documentos\React JS\Projetos\sleeper-app\sleeper-app-v1\sleeper-app\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:136:15) at DependencyGraph.resolveDependency (C:\Users\mateu\OneDrive\Documentos\React JS\Projetos\sleeper-app\sleeper-app-v1\sleeper-app\node_modules\metro\src\node-haste\DependencyGraph.js:231:43) at C:\Users\mateu\OneDrive\Documentos\React JS\Projetos\sleeper-app\sleeper-app-v1\sleeper-app\node_modules\metro\src\lib\transformHelpers.js:129:24 at Server._resolveRelativePath (C:\Users\mateu\OneDrive\Documentos\React JS\Projetos\sleeper-app\sleeper-app-v1\sleeper-app\node_modules\metro\src\Server.js:1107:12) at Server.requestProcessor [as _processBundleRequest] (C:\Users\mateu\OneDrive\Documentos\React JS\Projetos\sleeper-app\sleeper-app-v1\sleeper-app\node_modules\metro\src\Server.js:450:37) at Server._processRequest (C:\Users\mateu\OneDrive\Documentos\React JS\Projetos\sleeper-app\sleeper-app-v1\sleeper-app\node_modules\metro\src\Server.js:406:9)
The weird part is that I actually have an index.js file and I did not any change in it:
My index.js file contains this:
import 'react-native-gesture-handler'
import { registerRootComponent } from 'expo';
import TrackPlayer from 'react-native-track-player';
import App from './App';
// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in Expo Go or in a native build,
// the environment is set up appropriately
registerRootComponent(App);
// AppRegistry.registerComponent(...);
TrackPlayer.registerPlaybackService(() => require('./service'));
I tried to reinstall all the packages, clean the node_modules, upgrade the expo, clean the gradle, reset the cache by using expo r -c, stop my onedrive, restart my computer and nothing works
There is probably something wrong with my OneDrive. I took my app folder out of the /OneDrive folder and it worked.
I'm trying to use react-navigation with my react-native project. The project will work up until I install react-navigation. After I install it when I try to run my app using a virtual device I keep getting an error when I try to use the command react-native run-android.
I'm not sure what happened, but it was working just fine before installing react-navigation. Below is the error I'm getting after I try to start it.
react-native start bundler after using react-native run-android
Judging by the "EPERM" this error is telling you that you do not have the rights to do the operation.
If you have followed the guide on the documentation page and have verified that you have added the lines from the answer written by Anish (to which I edited out the "+" from the lines of code) then you should be able to use the dependency.
If the error still shows up, check where you created the project (check that you have the priviledges to write to that folder) and check your code. I would like to point out that in the latest version, react navigation has spilt its dependencies in multiple packages (for example there's one for the stack navigator, one for the tab navigator and so on). Also be sure to install the packages named react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context .
You should also try to use npm cache clean --force to clean the cache and npm install -g npm#latest --force to install the latest npm globally as administrator.
make the following modifications to MainActivity.java:
package com.reactnavigation.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);
}
};
}
}
Then add the following at the top of your entry file, such as index.js or App.js:
import 'react-native-gesture-handler';
https://reactnavigation.org/docs/en/getting-started.html
native. I want to active StackNavigator in App.js file. Please note my App.js file in different folder named 'app' and under app there is components folder under this I want to make all component file. here is my App.js
import React, { Component } from "react";
import { StackNavigator } from "react-navigation";
import Attendence from "./components/Attendence";
const Application = StackNavigator(
{
Home: { screen: Attendence }
},
{
navigationOptions: {
header: false
}
}
);
export default class App extends React.Component {
render() {
return <Application />;
}
}
As you said you have downloaded an old project ! it means you are about to tackle different node dependency packages errors on the route to get it running!
My tips to get your self saved from errors are like this
1: go into the package.json
2: note down every dependency names and versions
(the reason why to do that is simple ! you gonna need some awesome code that were in old version is now deprecated in new versions of those libs running!) so installing old ones would help you with that
3: if the point 2 does not work! please do check the version number of react native that you have and the one the real coder of the app used! and install the older version of react native in newer version there are some new things than old versions!
PRO TIP::: USE YARN
instead of NPM to save your self from the problems!
I get the following error log when I run my Android app: http://pastebin.com/1jHEfdQ3 The app sometimes crashes in the simulator but most of the time it just displays a white screen. I can console.log one or two things until the app won't respond. R-R to refresh doesn't work. None of the dev tools work. I'm stumped with what to do at this point.
I'm running react native 0.38.0
EDIT:
I've tried cleaning my gradle and deleting and reinstalling my node modules.
One thing to note is that I am using React Native Navigation which means I had to modify MainApplication and MainActivity to the following:
MainActivity:
package com.prayerrequest;
import com.facebook.react.ReactActivity;
import com.reactnativenavigation.NavigationApplication;
import com.airbnb.android.react.maps.MapsPackage;
import com.cmcewen.blurview.BlurViewPackage;
import io.realm.react.RealmReactPackage;
import com.reactnativenavigation.controllers.SplashActivity;
public class MainActivity extends SplashActivity {
}
MainApplication:
package com.prayerrequest;
import com.facebook.react.ReactPackage;
import com.cmcewen.blurview.BlurViewPackage;
import io.realm.react.RealmReactPackage;
import com.airbnb.android.react.maps.MapsPackage;
import com.reactnativenavigation.NavigationApplication;
import java.util.Arrays;
import java.util.List;
public class MainApplication extends NavigationApplication {
#Override
public boolean isDebug() {
// Make sure you are using BuildConfig from your own application
return BuildConfig.DEBUG;
}
#Override
public List<ReactPackage> createAdditionalReactPackages() {
return Arrays.<ReactPackage>asList(
new RealmReactPackage(),
new BlurViewPackage(),
new MapsPackage()
);
}
}
I've crossposted on React Native's issues page here
The issue seems to be 'Couldn't load memtrack module (No such file or directory)'
It looks like there's an issue with the simulator.
This is a config of my fully functional simulator:
Lots of other suggestions can be found here:
Couldn't load memtrack module Logcat Error
I had a similar problem. I would get this white screen when trying to get it to run on device.
The problem was when I would do adb devices or react-native run-android I would get "ADB is Not Recognized as an internal or external command".
So my fix was to add the path to adb.exe's parent directory to my Environment Variables and then restart my command prompts.I then ran react-native run-android and on startup no more red screen showing the completely useless error message Error calling AppRegistry.runApplication! :)
So I found ADB was located in my folder:
C:\Users\dell\AppData\Local\Android\sdk\platform-tools\adb.exe
I am on a Windows 10 system. dell is my user name of the computer.
So I went to System Environment Variables then found "Path" then clicked "Edit", then clicked "New" and added in "C:\Users\dell\AppData\Local\Android\sdk\platform-tools".
I seem to consistently be getting an error similar to below whenever I reach this specific point when working w/ React Native apps.
I create an /App folder with an AppContainer.js file I create a functional component in app/index.js (App & app are two different directories) which renders the AppContainer component. app/index.js looks like this.
import React from 'react'
import { AppContainer } from '~/containers'
export default function SnapshelfApp (props) {
return (
<AppContainer />
)
}
I export AppContainer in containers/index.js
export AppContainer from './App/AppContainer'
It seems like always around this point I get an error saying it's unable to resolve the module and gives me some weird route that doesn't exist.
In iOS I've had this issue and I run react-native start --reset-cache and that solves the issue. I tried the same thing w/ Android but still getting the same error.
I'm also using babel-root-import but my babelrc file is setup fine so I don't see that being the issue.
My project structure is below. The error seems to be skipping over the /app directory.
Any suggestions?