brunolemos / react-native-web-monorepo

Code sharing between iOS, Android & Web using monorepo
https://dev.to/brunolemos/tutorial-100-code-sharing-between-ios-android--web-using-react-native-web-andmonorepo-4pej
865 stars 175 forks source link

Problems when try to use an image #77

Closed FacuPerri closed 3 years ago

FacuPerri commented 3 years ago

Hi there!

i added a types.d.tsx with this code :

declare module "*.png" {} 
declare module "*.jpg" {}

and this on the tsconfig.tsx :

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "jsx": "preserve",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "noEmit": true,
    "target": "ESNext",
    "isolatedModules": false
  },
  "include": ["**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

When I try to use an image like this :

import LogoImage from './images/logo.png';

...

<Image
    source = { LogoImage}
    style={styles.logoImage}
    resizeMode="contain"
 />

I have the following error :

Type 'string' is not assignable to type 'ImageSourcePropType'.

What is missing???

brunolemos commented 3 years ago

try console.log(LogoImage) and see what type is it. if it's a string you need to use <Image source={{ uri: LogoImage }} />, it it's the image file you need to search how to fix the typescript type