Hello! I’m getting an error message every time I create a new file and to export it into the App.js file.
This is the error message:
Warning: React.jsx: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.
Check the render method of App
.
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent)
ERROR Warning: React.jsx: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.
And here is the snippet of my code
Welcome.js
import React from ‘react’;
function Welcome(props) {
return (
<ImageBackground
style= {styles.background}
source={require(‘./assets/backgroundEx.jpg’)}
>
<Image style={styles.logoImage} source={require(‘./assets/logo-red.png’)} />
Welcome to my first mobile App
<TouchableOpacity
style={styles.loginButton}
onPress={() => console.log("you've signed in!")}
>
<Text style={{color:"white", textAlign:"center", marginTop: 25, fontSize:20}}>Logn In </Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.signUpButton}
onPress={() => console.log("you've registereed succesfully!")}
>
<Text style={{color:"white", textAlign:"center", marginTop: 25, fontSize:20}}> Register </Text>
</TouchableOpacity>
</ImageBackground>
);
}
const styles = StyleSheet.create({
background: {
flex: 1,
justifyContent: ‘flex-end’,
alignItems:‘center’,
},
loginButton:{
width:'90%',
height: 70,
backgroundColor: '#fc5c65',
borderRadius: 40,
marginBottom: 30,
},
signUpButton:{
width:'90%',
height: 70,
backgroundColor: '#4ecdc4',
borderRadius:40,
marginBottom:20,
},
logoImage:{
width:100,
height:100,
},
loView:{
position:'absolute',
top:70,
},
trying:{
backgroundColor: 'red'
},
});
export default Welcomes;
App.js::
import { StatusBar } from ‘expo-status-bar’;
import { ImageBackground, View ,Text, Image, StyleSheet, TouchableOpacity} from ‘react-native’;
import {Welcome }from ‘./Welcome’;
export default function App() {
return (
);
}