React-Native: Module AppRegistry is not a registered callable module
AndroidReact NativeWebpackAndroid Problem Overview
I'm currently trying to get the ES6 react-native-webpack-server running
on an Android emulator. The difference is I've upgraded my package.json
and build.grade
to use react 0.18.0
, and am getting this error on boot. As far as I'm aware AppRegistry
is imported correctly. Even if I were to comment out the code this error still comes up. This does work on iOS without issue.
What am I doing wrong?
EDIT: After trying other boilerplates that do support 0.18.0, I'm still coming across the same issue.
Android Solutions
Solution 1 - Android
i just upgraded to react-native 0.18.1
today tough having some peer dependencies issues with 0.19.0-rc
pre-release version.
Back to your question, what I did was
cd android
sudo ./gradlew clean
(more information about how clean works here)
then back to the working directory and run
react-native run-android
you should restart your npm too after that upgrade.
hope this works for you.
Solution 2 - Android
I had the same issue on iOS and the cause for me was that my index.ios.js was incorrect (because I copy-pasted one of the examples without looking at its contents), it was ending with a module export declaration
exports.title = ...
exports.description = ...
module.exports = MyRootComponent;
Instead of the expected
AppRegistry.registerComponent('MyAppName', () => MyRootComponent);
You could have the same issue on android with the index.android.js I guess.
Solution 3 - Android
The one main reason of this problem could be where you would have installed a plugin and forget to link it.
try this:
react-native link
Re-run your app.
Hope this will help. Please let me know in comments. Thanks.
Solution 4 - Android
I solved this issue just by adding
import { AppRegistry } from "react-native";
import App from "./App";
import { name as appName } from "./app.json";
AppRegistry.registerComponent(appName, () => App);
to my index.js
make sure this exists in your index.js
Solution 5 - Android
For me just restarting the computer fixed it. (My error was "module appRegistry is not a registered callable module (calling runapplication) js engine: hermes")
Another top answer that is missing here and might have worked was just to kill node processes:
killall -9 node
Solution 6 - Android
For me my issue was putting the wrong entry-file when bundling.
I was using App.js as my entry-file, hence the App couldn't find AppRegistry
Correct:
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
Incorrect:
react-native bundle --platform android --dev false --entry-file App.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
Solution 7 - Android
I had this issue - across iOS & Android, developing on Mac - after I had been fiddling with a dependency's code in the node_modules
dir.
I solved it with:
rm -rf node_modules
npm i
npx pod-install ios
Which basically just re-installs your dependencies fresh.
Solution 8 - Android
Hopefully this can save someone a headache. I got this error after upgrading my react-native version. Confusingly it only appeared on the android side of things.
My file structure includes an index.ios.js
and an index.android.js
. Both contain the code:
AppRegistry.registerComponent('App', () => App);
What I had to do was, in android/app/src/main/java/com/{projectName}/MainApplication.java
, change index
to index.android
:
@Override
protected String getJSMainModuleName() {
return "index.android"; // was "index"
}
Then in app/build/build.gradle
, change the entryFile
from index.js
to index.android.js
project.ext.react = [
entryFile: "index.android.js" // was index.js"
]
Solution 9 - Android
I don't know why, but when I move AppRegistry.registerComponent from the index.js file that is included in index.android.js to reside inside index.android.js directly, it seems to work.
Solution 10 - Android
restart packager worked for me. just kill react native packager and run it again.
Solution 11 - Android
If you are facing this error in windows with android
open your root directory app folder and move into android folder .
cd android
gradlew clean
start your app again
react-native run-android
Solution 12 - Android
Check to see if you are not directly rendering something inside SafeAreaView
Ensure you are following this format
<SafeAreaView>
<View>
{children}
</View>
</SafeAreaView>
Solution 13 - Android
If you are using some of the examples they might not work
Here is my version for scroll view
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
ScrollView,
TouchableOpacity,
Image
} from 'react-native';
class AwesomeProject extends Component {
render() {
return (
<View>
<ScrollView
ref={(scrollView) => { _scrollView = scrollView; }}
automaticallyAdjustContentInsets={false}
onScroll={() => { console.log('onScroll!'); }}
scrollEventThrottle={200}
style={styles.scrollView}>
{THUMBS.map(createThumbRow)}
</ScrollView>
<TouchableOpacity
style={styles.button}
onPress={() => { _scrollView.scrollTo({y: 0}); }}>
<Text>Scroll to top</Text>
</TouchableOpacity>
</View>
);
}
}
var Thumb = React.createClass({
shouldComponentUpdate: function(nextProps, nextState) {
return false;
},
render: function() {
return (
<View style={styles.button}>
<Image style={styles.img} source={{uri:this.props.uri}} />
</View>
);
}
});
var THUMBS = [
'http://loremflickr.com/320/240?random='+Math.round(Math.random()*10000) + 1,
'http://loremflickr.com/320/240?random='+Math.round(Math.random()*10000) + 1,
'http://loremflickr.com/320/240?random='+Math.round(Math.random()*10000) + 1
];
THUMBS = THUMBS.concat(THUMBS); // double length of THUMBS
var createThumbRow = (uri, i) => <Thumb key={i} uri={uri} />;
var styles = StyleSheet.create({
scrollView: {
backgroundColor: '#6A85B1',
height: 600,
},
horizontalScrollView: {
height: 120,
},
containerPage: {
height: 50,
width: 50,
backgroundColor: '#527FE4',
padding: 5,
},
text: {
fontSize: 20,
color: '#888888',
left: 80,
top: 20,
height: 40,
},
button: {
margin: 7,
padding: 5,
alignItems: 'center',
backgroundColor: '#eaeaea',
borderRadius: 3,
},
buttonContents: {
flexDirection: 'row',
width: 64,
height: 64,
},
img: {
width: 321,
height: 200,
}
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
Solution 14 - Android
I uninstalled it on Genymotion. Then run react-native run-android
to build the app. And it worked. Do try this first before running sudo ./gradlew clean
, it will save you a lot of time.
Solution 15 - Android
npm start -- --reset-cache
Probably port is already in use. I face similar issue when i first run react-native run-android and then npm start. I solve it like this: First, get the id of the process running in port 8081: sudo lsof -i :8081
Solution 16 - Android
My issue was cleared by following these commands (OS: Windows 10).
cd android
gradlew clean
cd..
npx react-native run-android
Solution 17 - Android
In my case, my index.js
just points to another js instead of my Launcher js mistakenly, which does not contain AppRegistry.registerComponent()
.
So, make sure the file yourindex.js
point to register the class.
Solution 18 - Android
My issue was fixed by increasing my inotify max_user_watches:
sudo sysctl fs.inotify.max_user_watches=1280000
Solution 19 - Android
For me it was a issue with react-native dependency on next version of react package, while in my package.json the old one was specified. Upgrading my react version solved this problem.
Solution 20 - Android
For me just i linked with react native as this way : react-native link
Solution 21 - Android
I got this error in Expo because I had exported the wrong component name, e.g.
const Wonk = props => (
<Text>Hi!</Text>
)
export default Stack;
Solution 22 - Android
I solved this problem by doing the following:
- cd android
- ./gradlew clean
- taskkill /f /im node.exe
- uninstall app from android
Solution 23 - Android
If you are using windows machine you need to do cd android
then ./gradlew clean
then run react-native run-android
Solution 24 - Android
I had the same problem several times. The following solutions are solved my problem. I have listed out them according to complexity.
-
Restart the computer and see whether the problem is out
-
If it still exists, try to kill the process on running port usually 8080
netstat -ano | findstr 8080
taskkill /F /PID <PID>
-
If it still exists, go to 'android' directory as follow and go further
cd android
./gradlew clean
and start node
npm start
then run npx react-native run android
or expo stat
and press 'a'
Hope you will OK with the above issues.
Solution 25 - Android
This can because of any cache issue from node, pod ,gradle anywhere, its better to do an entire clean slate cleanup, for this use react native clean project
Solution 26 - Android
A typical reason I get this error is when I import badly a component (like with the wrong name). Same if I export it badly and them import it correctly. This may seem primitive but to err is human and many times this error appears, if cleaning the project and restarting it doesn't fix it, it can be this.
Solution 27 - Android
delete android/.gradle and reac-module. than run yarn install and run-android
Solution 28 - Android
import * as React from 'react';
import { Button, Text, View } from 'react-native';
function Home() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center',backgroundColor:'red'}}>
<Text>hiiiiiiiiiiiiiii</Text>
</View>
);
}
export default Home; <--- cheack this line
Solution 29 - Android
Please use Below mention : pakage
"react-native-reanimated": "^2.2.4",