We Keep Coding

App.js module not found; Can't resolve, Failed to compile

I am new to javaScript and am having an interesting problem. Here is some context; I am running windows 10, node v15, I have downloaded expo and am using visual studio. The command I am using to run my code is npm start.
The problem happens when I add the code to line 4 of app.js. I am trying to import a file that is simply just a button. The code compiles and loads fine until I add line 4.
The error I get looks like this;
"C:/Windows/System32/pleasework/App.js
Module not found: Can't resolve 'C:WindowsSystem32pleasework"
Thank you for any insight at all!
App.js CODE
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import buttonWelcome from 'C:\Windows\System32\pleasework\node_modules\sweet.js';
export default class App extends Component() {
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>Welcome</Text>
<buttonWelcome text='Login' color='red' />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 32,
textAlign: 'center',
margin: 10,
},
});
button CODE, name of file is sweet.js
import React from 'react';
import { StyleSheet, Text, View,TouchableOpacity } from 'react-native';
const buttonWelcome = props => {
const content = (
<View style={[style.button, {backgroundColor: props.color}]}>
<Text style={styles.text}>{props.text}</Text>
</View>
)
return <TouchableOpacity onPress={props.onPress}>{content}</TouchableOpacity>
}
const styles = StyleSheet.create({
button: {
padding: 16,
width: 200,
borderRadius: 24,
alignItems: 'center'
},
text: {
color: 'white',
fontSize: 20
}
})
export default buttonWelcome;

try a relative url with forward slashes:
import buttonWelcome from '../sweet.js';
btw you should never put source files in node_modules - that's only for node_modules code..

The import statement is wrong.
It should be
import buttonWelcome from './sweet.js';
As you can see it is using linux style file path which is important. This will work on both linux and windows.

undefined is not an object (evaluating '_this.props.navigator.push') react native , when i am trying to navigate from one page to another

Here is the sample code , i am trying react-native-navigation
i used react-native init navigate to start the project
and afterwards i installed
yarn add react-native-navigation#latest
the code run perfect for first screen , but as i am making a call to showNextScreen function it throws the error
undefined is not an object (evaluating 'this.props.navigator.push') react native
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import {Navigation} from 'react-native-navigation';
import firstPage from './app/components/firstPage';
export default class navigate extends Component {
//function to move to next screen
showNextScreen = () =>{
this.props.navigator.push({
screen: 'firstPage',
title: 'firstScreen'
})
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text onPress={this.showNextScreen.bind(this)}
style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</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,
},
});
AppRegistry.registerComponent('navigate', () => navigate);

Using React Native Navigation, you have to bootstrap your app differently than how it's done originally. Native Navigation doesn't use the registerComponent setup since it's a native navigator.
The steps to fully setting up are listed in their docs https://wix.github.io/react-native-navigation/#/usage

React-Native: propTypes and createClass deprecated

I'm beginning in React Native. I followed the instruction as recommended:
react-native init myProject. So to test the running application, I used the remote JS debugging to check if everything is ok.
Then I saw that propTypes and createClass are deprecated.
I don't know how to migrate this to the new version. (The instructions are for React and not React Native, I didn't use createClass but extends Component for example)
Here are my dependencies :
"react": "16.0.0-alpha.12",
"react-native": "0.45.1",
Here is my code :
'use strict';
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export default class myProject extends Component {
render() {
return (
<View >
<Text >
Welcome to React Native!
</Text>
<Text >
To get started, edit index.android.js
</Text>
<Text >
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</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,
},
});
AppRegistry.registerComponent('myProject', () => myProject);

For prop types you should now use the prop-types package:
https://github.com/facebook/prop-types
For createClass you should now use the create-react-class package:
https://www.npmjs.com/package/create-react-class
Read more about it here.

React native. undefined is not object (evaluating 'this.props.navigator.push')

I am testing my code and got an error. I need to press a button and go to the next page.
First, I created Safay.js and wrote code to set the initial route in this page. Then I created buttonsubmit.js so that when I press the button it will go to the next page, route.js. However, when testing I get an error. I just rechecked my code, which I may have typed wrong, or maybe it's something I don't know.
This is my error:
got error: undefined is not an object (evaluating 'this.props.navigator.push')
error in file ButtonSubmit.js :22
This is my code:
Safay.js
import index from './index.js';
import React, { Component, PropTypes } from 'react';
import {Navigator, StatusBar, TouchableHighlight,
AppRegistry, StyleSheet, Text, View} from 'react-native';
import Route from './Route.js';
import Signup from './Signup.js';
import ButtonSubmit from './ButtonSubmit.js';
export default class Safay extends Component {
renderScene(route, navigator){
if(route.name == 'Safay'){
return <Safay navigator={navigator}/>
}
if(route.name == 'Route'){
return <Route navigator={navigator}/>
}
}
render() {
return (
<View style={styles.container}>
{<navigator
initialRoute={{name: 'Safay'}}
renderScene={this.renderScene.bind(this)}
/>}
</View>
);
}
}
ButtonSubmit.js
import React, { Component, PropTypes } from 'react';
import Dimensions from 'Dimensions';
import {
StyleSheet,
TouchableOpacity,
Text,
Animated,
Easing,
Image,
Alert,
View,
} from 'react-native';
const DEVICE_WIDTH = Dimensions.get('window').width;
const DEVICE_HEIGHT = Dimensions.get('window').height;
const MARGIN = 40;
export default class ButtonSubmit extends Component {
navigate(routeName){
this.props.navigator.push({
name: routeName
})
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.navigate.bind(this, 'Route')} style={styles.button}>
<Text style={styles.text}>LOGIN</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
top: -20,
alignItems: 'center',
justifyContent: 'flex-start',
},
button: {
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ff8011',
height: MARGIN,
borderRadius: 20,
zIndex: 100,
width: DEVICE_WIDTH - 40,
},
circle: {
height: MARGIN,
width: MARGIN,
marginTop: -MARGIN,
borderWidth: 1,
borderColor: '#ff8011',
borderRadius: 100,
alignSelf: 'center',
zIndex: 99,
backgroundColor: '#ff8011',
},
text: {
color: 'white',
fontWeight: '700',
fontSize: 21,
backgroundColor: 'transparent',
},
});
Route.js
import React, { Component } from 'react';
import {Navigator, StatusBar, TouchableHighlight,
AppRegistry, StyleSheet, Text, View} from 'react-native';
export default class Route extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#05121F',
},
});
Thank you for your support.

You were wrong in button class because you did not pass the instance of the navigator to the button class and you are using navigator.
If i was you i would have removed onpress from the button for a while then i would have used button in the class Safay. like this:
<View style={styles.container}>
<ButtonSubmit navigator={navigator} />
<navigator
initialRoute={{name: 'Safay'}}
renderScene={this.renderScene.bind(this)}
/>
</View>
After all the above process i would have include onPress again.
Cheers :)

React Native: Create component error

I am trying to create a react native component, basically just re-rendering the default screen via a component. But I am getting an error:
Cant find variable: Component
Login.js:
'use strict';
var React = require('react-native');
var {
AppRegistry,
Component,
StyleSheet,
Text,
View
} = React;
var SearchScreen = React.createClass({
getInitialState: function() {
return {
};
},
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Shake or press menu button for dev menu
</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,
},
});
module.exports = Login;
index.android.js:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
var React = require('react-native');
var {
AppRegistry
} = React;
var Login = require('./Login');
class theUI extends Component {
render() {
return (
<Login />
);
}
}
AppRegistry.registerComponent('theUI', () => theUI );
Component it cannot find is <Login />.
I have looked at the movies example in the official repo, as well as a couple of other examples, and I cant see what I am doing wrong/differently.
I am on windows 10, both index.android.js and login.js are in the root directory (neither in sub dirs).

You forgot to include the Component class from React.
var {
AppRegistry,
Component,
} = React;
OR
class fortysevenui extends React.Component {