img.tsx

import React from 'react'
import Thumbnail from './Thumbnail'
import { withTheme } from 'styled-components'
import styled from 'styled-components/native'
import Animated from 'react-native-reanimated'
import ImageLoaderInterface from './ImageLoaderInterface'
import { coverParent, roundImageEdges } from '@utils/styleBuilder'

const imageOpacity = new Animated.Value(0)

const _imagefadeIn = () => imageOpacity.setValue(1)

const ImageContainer = styled.View<{ theme: Record<string, any> }>`
  background-color: ${({ theme }) => theme.colors.secondary.dark}
`

const ImageLoader: React.FC<ImageLoaderInterface> = (props) => {
  const borderRadiusStyles = props.roundedEdges
    ? roundImageEdges({
      theme: props.theme,
      edges: props.roundedEdges,
      radius: props.edgeRadius || 'regular'
    })
    : {}

  const containerStyle = Object.assign({
    width: '100%',
    height: '100%',
    overflow: 'hidden',
    ...borderRadiusStyles
  })

  return (
    <ImageContainer style={{ ...containerStyle, ...props.style }}>

      {props.thumbnailSource && <Thumbnail {...props} />}

      <Animated.Image
        source={props.source}
        resizeMode='cover'
        onLoad={_imagefadeIn}
        style={coverParent({ ...props.imageStyle, ...borderRadiusStyles })}
      />
    </ImageContainer>
  )
}

export default withTheme(ImageLoader)