Handling Image Error in React Native Expo

13 October 2022

Imagine that you have a React Native Apps, (either pure one or with Expo), you had your phone connected already physically via USB Debugging. When you importing your picture from your app, it shown something like ‘bridge error’. For the first timer using Expo React Native (without configuring Tethering from phone connection to private & run expo start —tunnel), it was so frustrating.
I remember I cried alot from that error.
It won’t shown my app unless I get rid that error by resolving it.

ERRORDAMNIT

There are Two Solution that I try out:

configuring Tethering from phone connection to private & run expo start —tunnel (and set that adb mode)
creating helper function to load it as uri from Image Component (react-native)

I have no idea what num 1 was back then, so I decided to SO-ing (StackOverflowing) from dawn time to 8 a.m and see this link.

So,I go with the 2nd one.

Now, how do we do it?

Create a your_name_image_helper.js file in your helpers folder in img folder innit (for sake of neat folder structure)
Fill your your_name_image_helper.js file with this syntax :

import { Image } from 'react-native' // import this
import BackGroundDarkFoodDetail from '../../assets/bg-food-detail-dark.jpg' // import your asset
export const BG_FOOD_DETAIL_IMAGE_DARK = Image.resolveAssetSource(BackGroundDarkFoodDetail.uri // use the resolveAssetSource and use the .uri

Import that your_name_image_helper.js to your component / screen to use it.
Use it like you define the Image component from react native

  // a component like this
  // Image or ImageBackground are fine
  // use image background if you want that pic to become your background image
    <ImageBackground source={{ uri: BG_FOOD_DETAIL_IMAGE_DARK }} style={{
      width: "100%",
      height: "100%",
    }} resizeMode="cover">