Develop Reference

ERROR: Unknown named module "react-native-webrtc"

i'm seeing this error in my react-native app on android before launch. I haven't tested on iOS
this is a copy of my metro
BUNDLE ./index.js
WARN AsyncStorage has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '#react-native-async-storage/async-storage' instead of 'react-native'. See https://github.com/react-native-async-storage/async-storage
ERROR Error: Unknown named module: "react-native-webrtc"
ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
My index.js
/**
* #format
*/
import {AppRegistry} from 'react-native';
import MainProject from './App';
import {name as appName} from './app.json';
import {Provider} from 'react-redux';
import {Provider as PaperProvider} from 'react-native-paper'
import store from './videocall/store'
import 'react-native-gesture-handler'
const AppRedux = () => (
<Provider {...{store}}>
<PaperProvider>
<MainProject />
</PaperProvider>
</Provider>
)
AppRegistry.registerComponent(appName, () => AppRedux);
Already tried the answer here , didn't work.
This is package.json
"react": "17.0.1",
"react-native": "0.64.0",
"react-native-peerjs": "^1.0.4",
"react-native-webrtc": "1.89.1

Realized it only occurs on 1.89.1
downgrading to 1.84.1 worked for me

React Native Error: Unable to resolve module `./index` from `` - multiple issues

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.

Everytime I install react-navigation my project stops working

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

react-native-linkedin-sdk - Cannot read property 'configure' of undefined (LinkedInSessionManager.ios.js)

I have followed all steps described here
Here is props of my environment:
react 16.0.0-alpha.6
react-native 0.43.3
react-native-linkedin-sdk 0.0.4
XCode 8.3.2
The Xcode project compiles without issues but I receive an error msg when I invoke the JS code below that the function configure is undefined
Here is my test code:
const config = {
clientID: '<my client id>',
clientSecret: '<my secret>',
state: '<my state hash>',
scopes: 'r_basicprofile',
redirectUri: '<my redirect URL>'
}
const LISDK = LinkedInSDK.configure(config)
The code snipped that causes the error is in LinkedInSessionManager.ios.js
...
const LinkedInSDK = {
configure(config) {
console.info('LINKEDIN SESSION MANAGER', RNLinkedInSessionManager)
return RNLinkedInSessionManager.configure(config);
},
...
};
module.exports = LinkedInSDK;
I added a console output to check whether I get a RNLinkedInSessionManager object but I get an undefined, which means the code of the RNLinkedInSessionManager project is not connected to react-native.
The file RNLinkedInSessionManager.xcworkspace has been successfully added to my XCode project folder under /ios but it seems there is no link to the library.
Any help is much appreciated.

I gave up using the react-native-linkedin-sdk.
Instead I successfully implemented this library react-native-linkedin-login
Nevertheless the library doesn't work without some modifications.
Here my findings:
Android:
I followed all steps here but I received the following error:
Error:Project :app declares a dependency from configuration 'compile' to configuration 'default' which is not declared in the descriptor for project :react-native-linkedin-login.
It turns out the path described in the above instructions is wrong.
To solve the problem I updated the path in the settings.gradle file like that:
//project(':react-native-linkedin-login').projectDir = new File(rootProject.projectDir, '../../android')
project(':react-native-linkedin-login').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linkedin-login/android')
After that I could successfully build the project.
iOS:
After completing all steps as described here you will have a folder RNLinkedinLogin in your XCode project path.
Drop the LinkedinLogin.m file into the Build Phases -> Compiled Sources
Both files have the old import syntax but since react native 0.40 and above the syntax has changed. You must edit these imports accordingly.
Changed the import in file RNLinkedinLogin.m
// old syntax
//#import "RCTEventDispatcher.h"
// new syntax
#import <React/RCTEventDispatcher.h>
and the import in file 'RNLinkedinLogin.h`
//#import "RCTBridgeModule.h"
#import <React/RCTBridgeModule.h>
Your project will now compile without errors.
Good luck,
Tom

Unable to Resolve Module React Native + Android

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?