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
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