When using lottie in expo and react-native, all animations work on ios however crash the app on android. Is there something special for android I am missing?
I have created a new project and duplicated the issue by coping the code from the docs here
import React from 'react';
import { Button, StyleSheet, View } from 'react-native';
import LottieView from "lottie-react-native";
export default class App extends React.Component {
componentDidMount() {
this.animation.play();
// Or set a specific startFrame and endFrame with:
// this.animation.play(30, 120);
}
resetAnimation = () => {
this.animation.reset();
this.animation.play();
};
render() {
return (
<View style={styles.animationContainer}>
<LottieView
ref={animation => {
this.animation = animation;
}}
style={{
width: 400,
height: 400,
backgroundColor: '#eee',
}}
source={require('./assets/gradientBall.json')}
// OR find more Lottie files # https://lottiefiles.com/featured
// Just click the one you like, place that file in the 'assets' folder to the left, and replace the above 'require' statement
/>
<View style={styles.buttonContainer}>
<Button title="Restart Animation" onPress={this.resetAnimation} />
</View>
</View>
);
}
}
If you are using Expo, you can't use Lottie 3 Files. From the expo api reference (https://docs.expo.io/versions/latest/sdk/lottie/):
"
Known Issues:
The Lottie SDK is currently considered to be under Expo's "DangerZone" because it's implementation is still in Alpha.
Importing Lottie 3 files causes the previewer to crash without a visible error, because Expo relies on lottie-react-native v2.
"
Run Yarn add lottie-react-native#3.0.3 or npm install lottie-react-native#3.0.3
I have created a custom npm module (will use xxx instead of its name) and link it manually using npm install.
I tried very hard and searched :
[Workarounds] Packager unable to resolve module from /Users/node_modules/
Error: jest-haste-map: #providesModule naming collision when using a local dependency
before raising a question. I would be thankful if someone tell me what wrong with my code or my approach or any error in my code.
When I run react-native run-android following error is raised by metro bundler
Error: jest-haste-map: Haste module naming collision:
Duplicate module name: react-native
Paths: E:\cdg-native\CDG\node_modules\react-native-XXX\node_modules\react-native\package.json collides with E:\cdg-native\CDG\node_modules\react-native\package.json
This error is caused by `hasteImpl` returning the same name for different files.
My custom module package.json is
{
"name": "react-native-xxx",
"version": "1.0.0",
"description": "Library to render xxx",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"react native xxx"
],
"author": "Firdous Nath",
"license": "ISC",
"peerDependencies": {
"react": "*",
"react-native": "*"
},
"devDependencies": {
"react": "^16.6.1",
"react-native": "^0.57.5",
"babel-cli": "^6.26.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1"
}
}
index.js of the custom module is very simple as below
import React from "react";
import { Text } from "react-native";
export default class XXXView extends React.Component {
render() {
return (
<Text> From custom module </Text>
);
}
}
file where I am using custom module is
import React from "react";
import {StyleSheet, View} from "react-native";
import XXXView from "react-native-xxx"
//import {XXXView} from "react-native-xxx" -> I tried this as well
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<XXXView/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#f5fcff"
}
});
I tried npm install /absolute/path/to/xxx and it linked module correctly. By correctly I mean I can see react-native-xxx package in nodemodule directory.
I did all possible ways but nothing worked.
I also tried but got no success
yarn add /absolute/path/to/react-native-xxx
react-native link react-native-xxx
react-native run-android
Add rn-cli.config.js In the root project
const blacklist = require('metro-config/src/defaults/blacklist');
module.exports = {
resolver: {
blacklistRE: blacklist([
/node_modules\/.*\/node_modules\/react-native\/.*/,
])
},
};
see this issue
Hope it works for you
The error you get indicates that you have two react-native dependencies. One in your main project, one in your xxx module, thus creating a conflict between their package.jsons. seems like if you install a package from a local path, it copies its node_modules directory.
As you already have react-native as peer dependency in your custom module's package.json, try removing E:\cdg-native\CDG\node_modules\react-native-XXX\node_modules, this should solve the conflict.
It looks like you have a 2 different react-native project folders where one is dependent over another (it's getting included as node_module dependency) and it seems you are running your server start ("react-native start") command from the library folder.
I am running through this tutorial, and have gotten as far as getting the text to display on my emulator screen (run through Android Studio).
I have replaced the code in App.js with the sample code mentioned on the tutorial. The tutorial says to place this text in android.index.js, but I cannot find that file anywhere in the project. The code that used to be in App.js, at any rate, contains the text displayed in the emulator.
The code in App.js before my edit is as follows:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow
*/
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
And, after I replace it, it is:
import React, { Component } from 'react';
import {
Text,
AppRegistry
} from 'react-native';
class ReactCalculator extends Component {
render() {
return (
<View>
<Text>Hello, React!</Text>
</View>
)
}
}
AppRegistry.registerComponent('ReactCalculator', () => ReactCalculator);
However, even if I uninstall the app from my emulator and reinstall it with react-native run-android, the text remains the same as in the above picture. It should be changing to be a css-less "Hell React" in the upper left hand corner of the screen, both according to my own understanding of the code and the tutorial.
From the base project directory, the command ls -R | grep index.android returns the following. I do not have an index.android.js anywhere in the project.
index.android.bundle
index.android.bundle
EDIT I
I surrounded the with a in the code above. Also, the index.js file looks like this:
/** #format */
import {AppRegistry} from 'react-native';
import ReactCalculator from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
I changed the second line from import App from './App'; to import ReactCalculator from './App';, but both ways the app does not change.
The problem was in rebuilding the app. It turns out that the command react-native run-android would build the app the first time it was run, but not any subsequent times. I've written a bash script with the following code to force a rebuild on an app every time it's run.
Put this in a bash script and run from the project directory
sudo rm -rf android/ ios/ #Delete Android and ios folders first...
react-native eject
react-native upgrade //rebuilds android/ios folders
react-native link
react-native run-android &2> /dev/null
cd ~/Library/Android/sdk # Change this if it's not where you sdk is.
dir=$(pwd)
cd -
echo "sdk.dir=$dir" > android/local.properties
mkdir android/app/src/main/assets
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
react-native run-android
I am developing Android app using React Native. I tried running a simple code of a screen being displayed, but I get the following error. I tried closing all command line windows and emulator and re-starting React Native package and run it, but doesn't work. The code is provided below:
index.android.js:
import React, { Component} from 'react';
import {Text, View, AppRegistry,Button} from 'react-native';
import {StackNavigator} from 'react-navigation';
import dhrumil from '.\dhrumil.js';
export default class MainApp extends Component{
render(){
return(
<dhrumil />
);
}
}
const SimpleApp = StackNavigator({
Home: {screen: dhrumil }
});
AppRegistry.registerComponent("MainApp",()=>SimpleApp);
dhrumil.js:
import React, { Component} from 'react';
import {Text, View, AppRegistry,Button,StyleSheet} from 'react-native';
const dhrumil = () =>{
return(
<View style={styles.container}>
<Text style={styles.texter}>Hello World!</Text>
<Button
onPress={() => navigate('dharmin')}
title="Chat with Lucy"
/>
</View>
);
}
const styles = StyleSheet.create({
container:{
justifyContent: 'center',
alignItems: 'center',
flex: 1
}
texter:
{
fontSize: 20,
textAlign: 'center'
}
});
dhrumil.navigationOptions = {
title:'dhrumil'
}
export default dhrumil
How do I solve this?
In index.android.js change the import dhrumil from '.\dhrumil.js'; to import dhrumil from './dhrumil';. You have to use / to specify the path and it is not necessary use dhrumil.js when we are importing the js file.
#Jeffrey Rajan 's suggestion was absolutely correct here.
This error occurs mostly due to :
Issue 1:
A wrong file name in import statement
Using the wrong case in file name
Using '\' instead of '/' in file name
Hope that using this list you can easily find errors causing this in your code.
Issue 2:
An issue with the material design.To resolve this install material design locally using :
react-native-material-design
Issue 3:
babel-preset-react-native making trouble code. To resolve this issue run:
yarn remove babel-preset-react-native
yarn add babel-preset-react-native#2.1.0
Try troubleshooting in this order.Mostly the Issue 1 will solve the problem.
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.
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.
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.
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.
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
[ Module AppRegistry is not registered callable module (calling runApplication) ]
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
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/
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.
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"
]
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
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.
restart packager worked for me.
just kill react native packager and run it again.
Check to see if you are not directly rendering something inside SafeAreaView
Ensure you are following this format
<SafeAreaView>
<View>
{children}
</View>
</SafeAreaView>
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);
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.
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
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.
My issue was cleared by following these commands (OS: Windows 10).
cd android
gradlew clean
cd..
npx react-native run-android
Please use Below mention : pakage
"react-native-reanimated": "^2.2.4",
I had the same problem and that because I was calling Stylesheet without importing..
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.jspoint to register the class.
My issue was fixed by increasing my inotify max_user_watches:
sudo sysctl fs.inotify.max_user_watches=1280000
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.
For me just i linked with react native as this way : react-native link
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;
I solved this problem by doing the following:
cd android
./gradlew clean
taskkill /f /im node.exe
uninstall app from android
If you are using windows machine you need to do cd android then ./gradlew clean then run react-native run-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
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.
delete android/.gradle and reac-module.
than run yarn install and run-android
on iOS I have got this issue.
but after cleaning the build
folder by entering command+shift+k and building it again worked for me
you should also check the scheme should be debug