Currently in the process of constructing my initial app using react-native. I encountered issues while attempting to run the simulator for both IOS and Android. When trying to launch the simulator for IOS with 'npm run ios', it operates successfully, but any modifications made in the App.js do not reflect in the simulator menu...Restarting the simulator multiple times did not resolve this issue, and commands like 'cmd+R' to reload within the simulator are also unresponsive despite no error messages being displayed. Regarding Android, I face difficulties even initiating the simulator (by using 'npm run android'), as I consistently receive the following error message:
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] android:
react-native run-androidnpm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] android script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in: npm ERR!
/Users/maurice/.npm/_logs/2020-07-13T08_19_29_328Z-debug.log Maurices-MacBook-Air:myApp maurice$
Here's an excerpt from my App.js:
/** * Sample React Native App *
https://github.com/facebook/react-native * * @format * @flow
strict-local */
import 'react-native-gesture-handler';
import 'react-native-gesture-handler';
import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
const App = () => {
return (
<NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
);
};
export default App;
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
const App: () => React$Node = () => {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<Header />
{global.HermesInternal == null ? null : (
<View style={styles.engine}>
<Text style={styles.footer}>Engine: Hermes</Text>
</View>
)}
<View style={styles.body}>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Step One</Text>
<Text style={styles.sectionDescription}>
Edit <Text style={styles.highlight}>App.js</Text> to change this
screen and then come back to see your edits.
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>See Your Changes</Text>
<Text style={styles.sectionDescription}>
<ReloadInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Debug</Text>
<Text style={styles.sectionDescription}>
<DebugInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Learn More</Text>
<Text style={styles.sectionDescription}>
Read the docs to discover what to do next!
</Text>
</View>
<LearnMoreLinks />
</View>
</ScrollView>
</SafeAreaView>
</>
);
};
const styles = StyleSheet.create({
scrollView: {
backgroundColor: Colors.lighter,
},
engine: {
position: 'absolute',
right: 0,
},
body: {
backgroundColor: Colors.white,
},
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: Colors.black,
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
color: Colors.dark,
},
highlight: {
fontWeight: '700',
},
footer: {
color: Colors.dark,
fontSize: 12,
fontWeight: '600',
padding: 4,
paddingRight: 12,
textAlign: 'right',
},
});
export default App;
If anyone has suggestions on resolving these problems, I would greatly appreciate the assistance. Best regards, Maurice