Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

expo-assets useAssets: Type 'Asset' is not assignable to type 'ImageSourcePropType'

$
0
0

Following the small example provided by expo-asset's docs, passing an element from the asset array to an Image source prop gives the following typescript error:

No overload matches this call.  Overload 1 of 2, '(props: ImageProps | Readonly<ImageProps>): Image', gave the following error.    Type 'Asset' is not assignable to type 'ImageSourcePropType'.      Type 'Asset' is not assignable to type 'ImageURISource'.        Types of property 'width' are incompatible.          Type 'number | null' is not assignable to type 'number | undefined'.            Type 'null' is not assignable to type 'number | undefined'.  Overload 2 of 2, '(props: ImageProps, context: any): Image', gave the following error.    Type 'Asset' is not assignable to type 'ImageSourcePropType'.ts(2769)index.d.ts(3783, 5): The expected type comes from property 'source' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Image> & Readonly<ImageProps>'index.d.ts(3783, 5): The expected type comes from property 'source' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Image> & Readonly<ImageProps>'

I'm on macOS using Node version 16.15.0, Yarn version 1.22.18 and expo-cli version 5.4.7.

The issue is reproducible by:

  • initializing a new project with expo init and choosing the blank (Typescript) template
  • adding expo-asset with expo install expo-asset

The package.json looks something like this (scripts removed for easier reading):

{"name": "asset-test","version": "1.0.0","main": "node_modules/expo/AppEntry.js","dependencies": {"expo": "~45.0.0","expo-asset": "~8.5.0","expo-status-bar": "~1.3.0","react": "17.0.2","react-dom": "17.0.2","react-native": "0.68.2","react-native-web": "0.17.7"  },"devDependencies": {"@babel/core": "^7.12.9","@types/react": "~17.0.21","@types/react-native": "~0.66.13","typescript": "~4.3.5"  },"private": true}

and with the following App.tsx:

import { StatusBar } from "expo-status-bar";import { Image, StyleSheet, Text, View } from "react-native";import { useAssets } from "expo-asset";export default function App() {  let [assets] = useAssets([require("./assets/icon.png")]);  return (<View style={styles.container}>      {assets ? <Image source={assets[0]} /> : null}<StatusBar style="auto" /></View>  );}const styles = StyleSheet.create({  container: {    flex: 1,    backgroundColor: "#fff",    alignItems: "center",    justifyContent: "center",  },});

the mentioned error gets shown at line (10, 24) (on the source prop)

I really hope that I have done something wrong because it just seems to me that somehow the type definitions are incompatible (as in the Asset class'width property should be defined with undefined instead of null), so how do I fix this?


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>