Question 391209 in React native Question posted in
The official React Native documentation can be found here.

React Native Expo Local Images Not Showing

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 (
        <View style={styles.container}>
            <Text>Title</Text>
            <Image
                source={require('../../assets/icon.png')}
                width={50}
                height={50}
                style={styles.image}
            />
            <Text>Subtitle</Text>
        </View>
    );
};

export const styles = StyleSheet.create({
    container: {
        backgroundColor: 'rgb(30, 41, 59)',
        alignItems: 'center',
        justifyContent: 'center',
        width: 200,
        height: 200
    },
    image: {
        width: 50,
        height: 50
    },
});

Edit: Screen shot after attempting @michael-bahl suggestion
Screen shot after attempting @michael-bahl suggestion

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I figured it out while creating a snack per @Rahmon-Haroon request. The snack editor complained about some compatibility issues between my packages and suggested I bump one. Which I did locally and then on the rerun expo prompted me to bump a few more. I did and now the image is appearing. Thank goodness. Thank you everyone for your help.

    Here is the final working snack: https://snack.expo.dev/@tristan-neateworks/react-native-expo-local-images-not-showing

    And here are my final packages:

    "expo": "^51.0.10",
"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.14",
"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.10",
"expo-asset": "~10.0.7"

  2. 0

    Make sure your path is correct. Mostly the path you given is wrong. Try as below

    import {View, Text, StyleSheet, Image} from 'react-native';
import React from 'react';

const imagePath = require("./assets/snack-icon.png");

export default function Full() {
return (
    <View style={styles.container}>
        <Text>Title</Text>
        <Image
            source={imagePath}
            width={50}
            height={50}
            style={styles.image}
        />
        <Text>Subtitle</Text>
    </View>
);
};

export const styles = StyleSheet.create({
container: {
  flex: 1,
    backgroundColor: "white",
    alignItems: 'center',
    justifyContent: 'center',
},
image: {
    width: 50,
    height: 50
},
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search