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?
Related
I'm running a React Native app which has a local Node project as a dependency, managed through yalc. I'm using rn-nodeify to deal with the Node libraries.
Whenever I try using one of the methods/constants from my Node project, I get the above error during react-native start after the app is built (I'm using Intellij's default "Android" configuration to run RN and have an emulator in Android Studio).
I looked up the error message and people say it's related to supports-color, but neither of my projects use that library and installing it didn't fix it either.
Edit:
I'm not sure if this could be related, but I also have to add the lines
import { Buffer } from 'buffer';
import 'reflect-metadata';
global.Buffer = global.Buffer || Buffer
When I use this file from my Node project or I get errors regarding Reflect.hasOwnMetadata and Buffer
I'm trying to use this package in my react native project.
So far I've followed all the steps in their installation guide and I made it work on iOS.
However, on Android, every time I try to import Batch or BatchPush in my code like this:
import { BatchPush, Batch } from "#bam.tech/react-native-batch";
I get an error on Android only:
null is not an object (evaluating 'RNBatch.NOTIFICATION_TYPES')
So when I go to node_modules/#bam.tech/react-native-batch/dist/BatchPush.js I see this
const RNBatch = react_native_1.NativeModules.RNBatch;
exports.AndroidNotificationTypes = RNBatch.NOTIFICATION_TYPES;
So somehow the native module is not being imported correctly. Do I need to follow extra steps for this to work?
#bam.tech/react-native-batch is being used with version 5.2.1
npm version 6.14.7
react-native version 0.60.5
Update: it turns out that the package was not linked correctly and that I had to manually add the package in MainApplication.java (I don't know why react-native link did not add this automatically)
Add the import:
import tech.bam.RNBatchPush.RNBatchPackage;
And then add
new RNBatchPackage(), in the getPackages() method.
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.
I am attempting to convert my react-native project into an expo project, one small issue I've encountered is when I run the expo project I get an error as such
null is not an object (evaluating 'RCTToastAndroid.SHORT')
After doing some research online on how to fix this problem a user requested that a problem like this can simply be resolved by removing the Android part of RCTToastAndroid.SHORT this user stated that RCTToast is universally compatible with both iOS and Android. However when I do this I receive an error saying null is not an object (evaluating 'RCTToast.SHORT')
What can I do that will help ease the transition from my react-native project to an expo project?
All apps created with create-react-native-app, are compatible with Expo CLI without changes.
Ref link:- https://github.com/react-community/create-react-native-app/blob/master/CHANGELOG.md#upgrading-from-1140-to-201
only do like this
import {ToastAndroid}from 'react-native '
return ToastAndroid.show("some error msg", ToastAndroid.LONG);
I had the same exact problem.
Check to see if you've imported a library called 'react-native-simple-toast'. Remove it from your dependencies.
According to this issue:
this library has a custom native module for ios, and expo does not support that. This lib will not work with expo
it will only work with a bare React Native project.
If you do need to use Toasts
Here's a library that will work with Expo on both Android and iOS. The only downside is that it's pure Javascript.
You can use it like this:
import Toast from 'react-native-root-toast'
Toast.show('Your message here', {
duration: Toast.durations.SHORT,
position: Toast.positions.BOTTOM,
shadow: true,
animation: true
});
EDIT
I figured out what was going wrong. The folder which some-other-module.js was located in started with an underscore _, e.g., _othermodule. Seems like it was being ignored, although I'm not sure if it's ignored during building or during runtime. I removed the underscore and that fixed it.
Original Post
I'm new to Ionic and I stumbled upon a problem which I can't seem to find solutions to.
When injecting multiple dependencies in the main Angular module, Ionic doesn't seem to work on the native Android app. It works on the browser, but when I run it on an Android phone, it just doesn't render properly.
index.html contains just the code for the Todo app in the official Ionic v1 guide.
working app.js (only ionic is injected)
//this code works
angular.module('app', [
'ionic'
])
not working app.js (some-other-module is also injected with ionic)
//this code does not work
angular.module('app', [
'ionic',
'some-other-module'
])
some-other-module.js (empty for testing purposes, doesn't work even with a controller)
angular.module('some-other-module', [])