Search code examples
react-nativeexpocreate-react-native-app

How to display image with React Native and Expo?


I'm making my first react native project, and I've used the create-react-native-app command to get everything set up. However, when I try to get an image to show up in Expo, it gives me an error message that it can't find the png file. I currently have the file under './img/record_video.png' (it's just an icon I'm going to use as a button). Here's my project layout and the code I'm using to call it

That is, I'm using <Image source={require('./img/record_video.png')} /> in order to call that file.

This is the error message I receive on my phone from the Expo app In short it says undefined Unable to resolve module './img/record_video.png' from C:\Users\ddude\Desktop\AwesomeProject\App.js':The module './img/record_video.png' could not be found from 'C:\Users\ddude\Desktop\AwesomeProject\App.js'. Indeed, none of these files exist: *'record_video.png' *'C:\Users\ddude\Desktop\AwesomeProject\img\record_video.png\index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)'

I'm not sure if it's that I'm using Expo and that it's not exporting to the phone properly, or if it needs to be in a specially-named folder. Any help would be appreciated, thanks!


Solution

  • remove the underscore & rename image assets to record-video.png, record-voice.png and convert-to-text.png. Restart the package manager and try.

    Just another observation I do not see an image record_audio.png in img folder as required in second line.

    Hopefully it helps.