0
277
VisualizaçõesRender Error Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined
I am trying to import an image on react-native, from the assets folder,(contains all the images). However the images are not compiling when I export them on the IOS-simulator. I think it is important to add that my assets file (that contains all the images), is a read-only file. I've attached an image on the bottom of what the assets-folder looks like on my end. In addition to that picture, I have also attached screenshots of the two errors I am experiencing with the IOS-simulator.
Thank You for your time!
Now, for better clarity here is my code:
import React from 'react';
import { ImageBackround, StyleSheet, View, Image, Text} from 'react-native';
function WelcomeScreen(props){
return(
<>
<ImageBackround
style={styles.background}
source={require('./assets/icon.png')}
>
<View style={styles.logoContainer}>
<Image style={styles.logo} source={require('./assets/favicon.png')}/>
<Text> Sell what you dont need!</Text>
</View>
<View style ={styles.registerButton}></View>
< View style= {styles.loginButton}></View>
</ImageBackround>
</>
)
}
const styles = StyleSheet.create({
background: {
flex:1,
alignItems: "center" ,
},
loginButton: {
width: "100%",
height: 70,
backgroundColor: "#4ecdc4",
},
logo: {
width: 100,
height: 100,
},
logoContainer: {
position: "absolute",
top: 70,
alignItems:"center",
},
registerButton: {
width: "100%",
height: 70,
backgroundColor: "#4ecdc4"
},
});
export default WelcomeScreen;
Here Ive attached in order, the image of the assets file, and the 2 errors that the Ios-simulator is giving me:
1 Respostas
Responde à pergunta0
Can you try creating a file inside assets which exports all images and call it from your WelcomeScreen.
create index.js file inside assets folder like this
export const Images ={
adaptive:require('./adaptive.png'),
favicon:require('./favicon.png'),
icon:require('./icon.png'),
splash:require('./splash.png')
}
and change your WelcomeScreen like this
import React from 'react';
import { ImageBackround, StyleSheet, View, Image, Text} from 'react-native';
import {Images} from './assets';
function WelcomeScreen(props){
return(
<>
<ImageBackround
style={styles.background}
source={Images.icon}
>
<View style={styles.logoContainer}>
<Image style={styles.logo} source={Images.favicon}/>
<Text> Sell what you dont need!</Text>
</View>
<View style ={styles.registerButton}></View>
< View style= {styles.loginButton}></View>
</ImageBackround>
</>
)
}
const styles = StyleSheet.create({
background: {
flex:1,
alignItems: "center" ,
},
loginButton: {
width: "100%",
height: 70,
backgroundColor: "#4ecdc4",
},
logo: {
width: 100,
height: 100,
},
logoContainer: {
position: "absolute",
top: 70,
alignItems:"center",
},
registerButton: {
width: "100%",
height: 70,
backgroundColor: "#4ecdc4"
},
});
export default WelcomeScreen;