I’m simply tying to display a local image in my react native expo project and it refuses to work. I get no errors, its just not there. I understand this question has been asked before, but I can’t find an answer that works or that uses the recent versions of the packages.
my packages:
“expo”: “^51.0.9”,
“react”: “18.2.0”,
“react-native”: “0.74.1”,
“@expo/metro-runtime”: “~3.2.1”,
“@expo/vector-icons”: “^14.0.0”,
“expo-constants”: “~16.0.2”,
“expo-linking”: “~6.3.1”,
“expo-router”: “~3.5.15”,
“expo-secure-store”: “~13.0.1”,
“expo-status-bar”: “~1.12.1”,
“react-dom”: “18.2.0”,
“react-native-safe-area-context”: “4.10.1”,
“react-native-screens”: “3.31.1”,
“react-native-web”: “~0.19.10”,
“expo-image”: “~1.12.9”,
“expo-asset”: “~10.0.6”
If I change the image source path, I then get an error saying it can’t find the image, so by that logic if it is not complaining about the current path, then it can see the file, its just not showing it. I tried importing “Image” from react-native and expo-image, neither worked (I’m ok with using either I really don’t care I just want one to work). Finally I have tried swapping in other pictures to see if that picture was corrupt or something but no luck, the below setup won’t show any pictures. I’d appreciate any help. I am using the expo go app to scan the terminal qr code and test on my iPhone. Here is my code:
`import {View, Text, StyleSheet, Image} from ‘react-native’;
import React from ‘react’;
export default function Full() {
return (
Title
<Image
source={require(‘../../assets/icon.png’)}
width={50}
height={50}
style={styles.image}
/>
Subtitle
);
};
export const styles = StyleSheet.create({
container: {
backgroundColor: ‘rgb(30, 41, 59)’,
alignItems: ‘center’,
justifyContent: ‘center’,
width: 200,
height: 200
},
image: {
width: 50,
height: 50
},
});
`