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 theblank (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?