66 lines
1.4 KiB
JavaScript
66 lines
1.4 KiB
JavaScript
import { Image } from 'expo-image'
|
|
import { memo } from 'react'
|
|
import { Platform, StyleSheet, View } from 'react-native'
|
|
import { Palette } from '../styles'
|
|
|
|
const DEFAULT_INTENSITY = Platform.select({ ios: 22, default: 14 })
|
|
|
|
const ProfilePicture = ({
|
|
uri = null,
|
|
size = 48,
|
|
style,
|
|
blurIntensity = DEFAULT_INTENSITY,
|
|
blurTint = 'dark',
|
|
imageProps = {},
|
|
transitionDuration = 120,
|
|
cachePolicy = 'memory-disk',
|
|
contentFit = 'cover',
|
|
accessibilityLabel,
|
|
...rest
|
|
}) => {
|
|
const dimensionStyle = {
|
|
width: size,
|
|
height: size,
|
|
borderRadius: size / 2,
|
|
}
|
|
|
|
return (
|
|
<View
|
|
accessible
|
|
accessibilityRole="image"
|
|
accessibilityLabel={accessibilityLabel}
|
|
style={[styles.container, dimensionStyle, style]}
|
|
{...rest}
|
|
>
|
|
{uri ? (
|
|
<Image
|
|
source={{ uri: uri }}
|
|
contentFit={contentFit}
|
|
cachePolicy={cachePolicy}
|
|
transition={transitionDuration}
|
|
style={StyleSheet.absoluteFill}
|
|
{...imageProps}
|
|
/>
|
|
) : (
|
|
<>
|
|
<View style={[styles.fallback, dimensionStyle]} />
|
|
</>
|
|
)}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
overflow: 'hidden',
|
|
backgroundColor: 'transparent',
|
|
},
|
|
fallback: {
|
|
backgroundColor: '#7373736e',
|
|
borderColor: Palette.ultraLightWhite,
|
|
borderWidth: 2,
|
|
},
|
|
})
|
|
|
|
export default memo(ProfilePicture)
|