Image component not working electron macOS

[Ngomana]

Summary

I create a basic image component which I wanted to view on the electron app app. however the image doesn't show but shows up when I run it on web, android and iOS.

Environment

Expo CLI 4.3.4 environment info: System: OS: macOS 10.15.7 Shell: 5.7.1 - /bin/zsh Binaries: Node: 14.16.0 - /usr/local/bin/node Yarn: 1.22.5 - ~/.yarn/bin/yarn npm: 7.8.0 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: 1.10.1 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2 Android SDK: API Levels: 23, 28, 29 Build Tools: 23.0.1, 28.0.3, 29.0.2, 29.0.3 System Images: android-28 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom IDEs: Android Studio: 4.1 AI-201.8743.12.41.7199119 Xcode: 12.4/12D4e - /usr/bin/xcodebuild npmPackages: @expo/webpack-config: ^0.12.65 => 0.12.65 expo: ~40.0.0 => 40.0.1 react: 16.13.1 => 16.13.1 react-dom: 16.13.1 => 16.13.1 react-native: https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz => 0.63.2 react-native-web: ~0.13.12 => 0.13.18 npmGlobalPackages: expo-cli: 4.0.17 Expo Workflow: managed

Please specify your device/emulator/simulator platform, model and version

macos 10.15.7

Error output

there's no error output, picture doesn't show.

Reproducible demo or steps to reproduce from a blank project

import { StatusBar } from "expo-status-bar";
import React from "react";
import { Text, Image, View, ImageBackground } from "react-native";
import { SafeAreaProvider } from "react-native-safe-area-context";

import useCachedResources from "./hooks/useCachedResources";
import useColorScheme from "./hooks/useColorScheme";
import Navigation from "./navigation";

export default function App() {
  return (
    <View style={{ justifyContent: "center", alignItems: "center" }}>
      <Text>Image</Text>
      <View style={{ borderWidth: 1, flex: 1 }}>
        <Image
          source={require("./trust.png")}
          style={{ resizeMode: "cover", width: 200, height: 40 }}
        />
        <ImageBackground
          source={require("./lover.jpg")}
          style={{ width: 200, height: 40 }}
        />
      </View>
    </View>
  );
}

[johnleydelgado]

instead of require("./trust.png") i replace it with import trust from './trust.png' then call that import in Image module <Image source={trust} style={{ resizeMode: "cover", width: 200, height: 40 }} />

Reference on this site https://github.com/expo/expo/issues/9135#issuecomment-655647857

also changing the package.json work for me

{ "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web", "eject": "expo eject", "customize": "yarn expo-electron customize", "desktop": "yarn expo-electron start" }, "dependencies": { "@expo/electron-adapter": "^0.0.55", "@expo/webpack-config": "0.12.16", "@expo-google-fonts/inter": "^0.1.0", "@react-native-community/masked-view": "0.1.10", "@react-navigation/native": "^5.9.4", "@react-navigation/stack": "^5.14.5", "electron": "^6.0.12", "expo": "~41.0.1", "expo-app-loading": "^1.0.3", "expo-font": "^9.1.0", "expo-linear-gradient": "^9.1.0", "expo-status-bar": "~1.0.4", "react": "16.13.1", "react-dom": "16.13.1", "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz", "react-native-elements": "^3.4.1", "react-native-gesture-handler": "~1.10.2", "react-native-reanimated": "~2.1.0", "react-native-safe-area-context": "3.2.0", "react-native-screens": "~3.0.0", "react-native-web": "~0.13.12", "react-responsive": "^8.2.0", "tailwind-rn": "^3.0.1" }, "devDependencies": { "@babel/core": "7.9.0", "@types/react": "~16.9.41", "@types/react-dom": "~16.9.8", "@types/react-native": "~0.62.13", "typescript": "3.8.3" }, "private": true }