0

I want to created a custom component in my own UI Library (with storybook) using the react-native-fast-image library, but when i execute storybook, it display the error: "Cannot read properties of undefined (reading 'displayName')"

I noticed that sometimes it throws this error the first time lauching the storybook, if i do a change and it re-render the component display (sometimes).

Also that error is only present when i test storybook on web (executing yarn storybook), when i compile my UI Library and import it in my client React Native app, the error is not being shown, it works perfectly.

If i change FastImage for BackgroundImage or Image it works fine also, the problem is the FastImage library in storybook, i dont know if i need to do any other ocnfiguration on webpack or something like that. Thanks for any help

Error

This is my own custom component that implements FastImage

import React, { useCallback, useMemo, useState } from 'react'
import FastImage, { ImageStyle, Source } from 'react-native-fast-image'
import { StyleProp } from 'react-native'

export interface ResourceImageProps {
  source: Source
  width?: number
  height?: number
  aspectRatio: number
  placeHolder?: boolean
  borderRadius?: number
  style?: StyleProp<ImageStyle>
}

const ResourceImage: React.FC<ResourceImageProps> = ({
  source,
  width,
  height,
  aspectRatio,
  style,
  placeHolder,
  borderRadius,
}) => {
  const [error, setError] = useState<boolean>(false)
  const { icons, colors } = useTheme()
  const { ImageNotFound } = icons

  

  const onError = useCallback(() => {
    setError(true)
  }, [setError])

  const onLoadStart = useCallback(() => {
    setError(false)
  }, [setError])

  return (
    <FastImage
      testID="ResourceImage"
      source={source}
      style={[style]}
      onError={onError}
      resizeMode="contain"
      onLoadStart={onLoadStart}>
      {error && (
        <ImageNotFound
          testID="ImageNotFound"
          fill={colors.foreground0}
          stroke={colors.foreground0}
        />
      )}
    </FastImage>
  )
}

export default ResourceImage
Luis Quijada
  • 3
  • 1
  • 5

0 Answers0