From 22dd4947f7d88166350c13367f2af7a51a55a36b Mon Sep 17 00:00:00 2001 From: dan Date: Fri, 8 Nov 2024 02:52:03 +0000 Subject: [Lightbox] Add border radius to avatars (#6136) * Preserve shape in lightbox * Rename shapes to semantic meanings It looks like after all I do want to fork based on those. * Round avatars on the web * Oops --- .../components/ImageItem/ImageItem.android.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) (limited to 'src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx') diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx index 17c386771..f882dcf9e 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx @@ -302,6 +302,11 @@ const ImageItem = ({ committedTransform.value = withClampedSpring(finalTransform) }) + const innerStyle = useAnimatedStyle(() => ({ + width: '100%', + aspectRatio: imageAspect, + })) + const composedGesture = isScrollViewBeingDragged ? // If the parent is not at rest, provide a no-op gesture. Gesture.Manual() @@ -312,6 +317,9 @@ const ImageItem = ({ singleTap, ) + const type = imageSrc.type + const borderRadius = + type === 'circle-avi' ? 1e5 : type === 'rect-avi' ? 20 : 0 return ( @@ -326,7 +334,7 @@ const ImageItem = ({ source={{uri: imageSrc.uri}} placeholderContentFit="contain" placeholder={{uri: imageSrc.thumbUri}} - style={[styles.image]} + style={[innerStyle, {borderRadius}]} accessibilityLabel={imageSrc.alt} accessibilityHint="" accessibilityIgnoresInvertColors @@ -342,9 +350,7 @@ const styles = StyleSheet.create({ container: { height: '100%', overflow: 'hidden', - }, - image: { - flex: 1, + justifyContent: 'center', }, loading: { position: 'absolute', -- cgit 1.4.1