From 0fc8ab168754c6b0528cae15d58b59101fc79fda Mon Sep 17 00:00:00 2001
From: chahinebrini <chahinebrini@gmail.com>
Date: Fri, 15 May 2026 23:55:57 +0200
Subject: [PATCH] fix(native/profile): round avatar crop frame to match
 circular avatar display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Avatars render as circles everywhere (AppHeader, PostCard, profile
page), so a square crop frame let users compose an image that looked
fine in the cropper and got visibly clipped (lost corners, off-center
faces) after upload.

Switched the crop frame to a perfect circle by setting borderRadius =
CROP_SIZE / 2 on both the frame and the overflow mask. Replaced the
four square corner markers with a single thin white ring overlay
around the circle. Output is still a 512×512 JPEG — the consumer-side
border-radius does the visual circle, so the underlying square is
storage-agnostic and re-usable if we ever surface a non-circular
avatar elsewhere.
---
 .../components/profile/AvatarCropSheet.tsx    | 69 ++++++-------------
 1 file changed, 22 insertions(+), 47 deletions(-)

diff --git a/apps/rebreak-native/components/profile/AvatarCropSheet.tsx b/apps/rebreak-native/components/profile/AvatarCropSheet.tsx
index 4ec524e..5d8c6d6 100644
--- a/apps/rebreak-native/components/profile/AvatarCropSheet.tsx
+++ b/apps/rebreak-native/components/profile/AvatarCropSheet.tsx
@@ -134,8 +134,17 @@ export function AvatarCropSheet({ imageUri, onConfirm, onCancel }: Props) {
           </View>
 
           <View style={styles.body}>
-            <View style={[styles.cropFrame, { width: CROP_SIZE, height: CROP_SIZE }]}>
-              <View style={styles.cropOverflow}>
+            <View
+              style={[
+                styles.cropFrame,
+                {
+                  width: CROP_SIZE,
+                  height: CROP_SIZE,
+                  borderRadius: CROP_SIZE / 2,
+                },
+              ]}
+            >
+              <View style={[styles.cropOverflow, { borderRadius: CROP_SIZE / 2 }]}>
                 <GestureDetector gesture={composed}>
                   <Animated.View style={imageStyle}>
                     {imageUri ? (
@@ -149,10 +158,13 @@ export function AvatarCropSheet({ imageUri, onConfirm, onCancel }: Props) {
                 </GestureDetector>
               </View>
 
-              <View style={styles.cornerTL} />
-              <View style={styles.cornerTR} />
-              <View style={styles.cornerBL} />
-              <View style={styles.cornerBR} />
+              <View
+                pointerEvents="none"
+                style={[
+                  styles.ringOverlay,
+                  { borderRadius: CROP_SIZE / 2 },
+                ]}
+              />
             </View>
 
             <Text style={[styles.hint, { color: colors.textMuted }]}>
@@ -179,8 +191,7 @@ export function AvatarCropSheet({ imageUri, onConfirm, onCancel }: Props) {
   );
 }
 
-const CORNER = 18;
-const BORDER = 2.5;
+const RING_BORDER = 2;
 
 const styles = StyleSheet.create({
   container: {
@@ -214,7 +225,6 @@ const styles = StyleSheet.create({
     gap: 20,
   },
   cropFrame: {
-    borderRadius: 12,
     overflow: 'hidden',
     position: 'relative',
     backgroundColor: '#111',
@@ -224,49 +234,14 @@ const styles = StyleSheet.create({
     height: '100%',
     overflow: 'hidden',
   },
-  cornerTL: {
+  ringOverlay: {
     position: 'absolute',
     top: 0,
     left: 0,
-    width: CORNER,
-    height: CORNER,
-    borderTopWidth: BORDER,
-    borderLeftWidth: BORDER,
-    borderColor: '#fff',
-    borderTopLeftRadius: 12,
-  },
-  cornerTR: {
-    position: 'absolute',
-    top: 0,
     right: 0,
-    width: CORNER,
-    height: CORNER,
-    borderTopWidth: BORDER,
-    borderRightWidth: BORDER,
-    borderColor: '#fff',
-    borderTopRightRadius: 12,
-  },
-  cornerBL: {
-    position: 'absolute',
     bottom: 0,
-    left: 0,
-    width: CORNER,
-    height: CORNER,
-    borderBottomWidth: BORDER,
-    borderLeftWidth: BORDER,
-    borderColor: '#fff',
-    borderBottomLeftRadius: 12,
-  },
-  cornerBR: {
-    position: 'absolute',
-    bottom: 0,
-    right: 0,
-    width: CORNER,
-    height: CORNER,
-    borderBottomWidth: BORDER,
-    borderRightWidth: BORDER,
-    borderColor: '#fff',
-    borderBottomRightRadius: 12,
+    borderWidth: RING_BORDER,
+    borderColor: 'rgba(255,255,255,0.85)',
   },
   hint: {
     fontSize: 12,