[expo-asset] useAssets: Type 'Asset' is not assignable to type 'ImageSourcePropType'

  1. SDK Version: 45
  2. Platforms(Android/iOS/web/all): all
  3. Add the appropriate “Tag” based on what Expo library you have a question on.

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 have type undefined instead of null), so how do I fix this?

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.