I'm looking for a handle that would allow me to run async code in the RN runtime before my React Native app executes.
I tried something like this
// index.js
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
asyncTask.then(() => {
AppRegistry.registerComponent(appName, () => App);
});
but the code crashes with
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.
Isn't there a provided way to run async tasks before the app starts ?
In my case I need this to do required updates on AsyncStorage
Related
I have been following the instructions of react-native-share-menu that they have on their repository, and everything is working fine. Until I wanted to redirect to another component. I also looked at this answer, and yet it fails.
What am I doing wrong?
//index.share.js
import { AppRegistry } from 'react-native';
import Share from './Share';
AppRegistry.registerComponent('ShareMenuModuleComponent', () => Share);
//Share.tsx
import React, { useEffect } from 'react';
import { ShareMenuReactView } from 'react-native-share-menu';
import AnotherScreen from './src/screens/AnotherScreen';
const Share = () => {
useEffect(() => {
ShareMenuReactView.data().then(({ mimeType, data }) => {
ShareMenuReactView.continueInApp({ shareInfo: data });
});
}, []);
return <AnotherScreen />;
};
export default Share;
Error:
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.
ERROR TypeError: Restricted in strict mode, js engine: hermes is getting thrown when trying to import Axios for network request in react native application. The error gets removed when i'm trying to remove the import statement from the below code.
api.js
import axios from "axios";
export default axios.create({
baseURL:"https://.com/v3/test",
headers:{
Authorization:'Bearer fsdfsfsd'
}
});
Try to downgrade the axios version.
yarn remove axios
yarn add axios#0.27.2
If it is not getting listed from node modules when trying to import Axios, import the package as follows:
const axios = require('axios')
I am using the package react-native-coreml and running into this error at startup.
My intention is to use this package to use a CoreML package in my react native app. I am running this within EXPO if that makes any difference.
I can't even run the app. These two errors are together.
Unable to start your application. Please refer to https://expo.fyi/no-registered-application for more information.
and
TypeError: null is not an object (evaluating 'RNCoreML.mainBundlePath')
- node_modules/react-native/Libraries/LogBox/LogBox.js:148:8 in registerError
Obviously the first error isn't useful, just including for thoroughness.
My implementation is as follows:
import React, { useState } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import FaceScanner from './FaceScanner';
import { classifyImage } from "react-native-coreml";
const Onboarding = () => {
const [imageURL, setImageURL] = useState('');
const [tested, setTested] = useState(false);
console.log(imageURL)
if (imageURL !== '' && !tested) {
async () => {
// const { label, confidence } = await classifyImage(imageURL, './model.mlmodelc')
setTested(true);
console.log("The image is a " + label + ". I think. ")
}
}
...
edit I have ejected from expo as per a comment's suggestion. I am now encountering these errors.
BUNDLE ./index.js
ERROR TypeError: null is not an object (evaluating 'RNCoreML.mainBundlePath')
LOG Running "main" with {"rootTag":1,"initialProps":{}}
ERROR Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
react-native-coreml is a library with native extensions that do not work in the expo managed workflow currently. you can read about the managed workflow limitations in the expo docs.
if you'd like to use it, run expo eject and build the project in xcode
I need to perform network check, and if the device is online then i should trigger a post request even if the application is running in the background.
I found that react-native-sync-adapter library will help me to do that. but when i tried to implement app is force closing every time
below is my code.
//index.js
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
AppRegistry.registerHeadlessTask('TASK_SYNC_ADAPTER', () => App);
//App.js
import SyncAdapter from 'react-native-sync-adapter';
useEffect(() => {
SyncAdapter.init({
syncInterval,
syncFlexTime,
});
}, []);
please help me to find the issue
AppRegistry.registerHeadlessTask('TASK_SYNC_ADAPTER', () => App);
I'm also looking for some answers regarding this library, but in your case I think I know enough to say this is your problem. You're saying your Headless JS task is the App itself, and I'm guessing calling that is what's crashing your app.
I'm trying to enable the new LogBox in React Native (v0.62.0-rc.2), I just have to add a line to the "index.js" file but it doesn't work.
RC2 introduces the new LogBox experience behind a feature flag. To try
it out, add the following to your index.js file:
require('react-native').unstable_enableLogBox()
index.js
require('react-native').unstable_enableLogBox();
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
Error output:
TypeError: _$$_REQUIRE(_dependencyMap[1], "react-native").unstable_enableLogBox is not a function.
I'm sure I'm doing something wrong, maybe it's not the right way.
you need to do the following:
create a file in the project root title it intro.js
add require('react-native').unstable_enableLogBox(); to intro.js
add import './intro'; at the top of index.js
This worked with me.
Here's how I did it. For some reason imports get resolved super early, which seems to cause the following error:
Error: LogBox must be enabled before AppContainer is required so that it can properly wrap the console methods.
Please enable LogBox earlier in your app.
Move the contents of your entrypoint (usually index.js) to another file (_index.js for example), then require() it from your entrypoint AFTER enabling the logbox:
if(__DEV__)
require('react-native').unstable_enableLogBox();
require('./_index');
import {name as appName} from './app.json';
require('react-native').unstable_enableLogBox();
please write in simple manner I mentioned above please check screen shot for Log box.
First of all, identify where is the main file of your entire app. For example, if you are using a file like Reactotron config file you will put this line before all imports:
require('react-native').unstable_enableLogBox();
Therefore, if you are not using something like Reactotron you will put the above line, before your App import on index.js in the root of project, like this:
require('react-native').unstable_enableLogBox();
...
import { AppRegistry } from 'react-native';
import App from './src/App';
import { name } from './app.json';
AppRegistry.registerComponent(name, () => App);
I hope i've helped! =)
According to the React Native docs this is how you would implement it:
import { LogBox } from 'react-native';
// Ignore log notification by message:
LogBox.ignoreLogs(['Warning: ...']);
// Ignore all log notifications:
LogBox.ignoreAllLogs();
I did this at the very top of App.js and it worked great.