fix: online indicator misaligned for 2xl avatar (#3678)

## 🎯 Goal

The online indicator was misaligned for `2xl` avatars. The issue was
that we used a static offset, not a dynamic computed from avatar and
online indicator size.

## 🛠 Implementation details

Moving from static offset to computed offset affects all avatar sizes
with online indicators. The below list contains the changes for other
sizes. They're pretty small, but I checked all occurrences, and they
still look good:

<img width="458" height="201" alt="Screenshot 2026-06-26 at 8 24 43"
src="https://github.com/user-attachments/assets/ee387560-a6aa-4785-b3d1-9e8d969b8c7f"
/>


## 🎨 UI Changes

Before:
<img width="337" height="663" alt="Screenshot 2026-06-26 at 7 52 54"
src="https://github.com/user-attachments/assets/21b399c9-dc40-42cf-a293-d03e01d79076"
/>
After:
<img width="564" height="1240" alt="Screenshot 2026-06-26 at 8 16 32"
src="https://github.com/user-attachments/assets/4c4f93d9-d5d8-451b-8e6c-32558fb765b2"
/>

## 🧪 Testing

<!-- Explain how this change can be tested (or why it can't be tested)
-->

## ☑️ Checklist

- [ ] I have signed the [Stream
CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform)
(required)
- [ ] PR targets the `develop` branch
- [ ] Documentation is updated
- [ ] New code is tested in main example apps, including all possible
scenarios
  - [ ] SampleApp iOS and Android
  - [ ] Expo iOS and Android

Author: szuperaz

package/src/components/ui/Avatar/UserAvatar.tsx

@@ -5,7 +5,13 @@ import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
 import { UserResponse } from 'stream-chat';
 
 import { Avatar, AvatarProps } from './Avatar';
-import { fontSizes, iconSizes, indicatorSizes, numberOfInitials } from './constants';
+import {
+  fontSizes,
+  iconSizes,
+  indicatorPositions,
+  indicatorSizes,
+  numberOfInitials,
+} from './constants';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { PeopleIcon } from '../../../icons/users';
@@ -57,7 +63,7 @@ export const UserAvatar = (props: UserAvatarProps) => {
         style={style}
       />
       {showOnlineIndicator ? (
-        <View style={styles.onlineIndicatorWrapper}>
+        <View style={[styles.onlineIndicatorWrapper, indicatorPositions[size]]}>
           <OnlineIndicator online={true} size={indicatorSizes[size]} />
         </View>
       ) : null}
@@ -71,8 +77,6 @@ const useStyles = () => {
       StyleSheet.create({
         onlineIndicatorWrapper: {
           position: 'absolute',
-          right: -2,
-          top: -2,
         },
       }),
     [],

package/src/components/ui/Avatar/constants.ts

@@ -41,6 +41,45 @@ const indicatorSizes: Record<UserAvatarProps['size'], OnlineIndicatorProps['size
   xs: 'sm',
 };
 
+const onlineIndicatorSizes: Record<
+  OnlineIndicatorProps['size'],
+  { borderWidth: number; height: number; width: number }
+> = {
+  xl: {
+    borderWidth: 2,
+    height: 16,
+    width: 16,
+  },
+  lg: {
+    borderWidth: 2,
+    height: 14,
+    width: 14,
+  },
+  md: {
+    borderWidth: 2,
+    height: 12,
+    width: 12,
+  },
+  sm: {
+    borderWidth: 1,
+    height: 8,
+    width: 8,
+  },
+};
+
+// Anchors the presence dot on the avatar's circular edge at 45°:
+// offset = avatarWidth / 2 * (1 - Math.SQRT1_2) - indicatorDiameter / 2  (rounded to px)
+const indicatorPositions = (Object.keys(avatarSizes) as UserAvatarProps['size'][]).reduce(
+  (acc, size) => {
+    const avatarDiameter = avatarSizes[size].width;
+    const indicatorDiameter = onlineIndicatorSizes[indicatorSizes[size]].width;
+    const offset = Math.round((avatarDiameter / 2) * (1 - Math.SQRT1_2) - indicatorDiameter / 2);
+    acc[size] = { right: offset, top: offset };
+    return acc;
+  },
+  {} as Record<UserAvatarProps['size'], { right: number; top: number }>,
+);
+
 const iconSizes: Record<UserAvatarProps['size'], number> = {
   xs: 10,
   sm: 12,
@@ -99,4 +138,12 @@ const numberOfInitials: Record<UserAvatarProps['size'], number> = {
   '2xl': 2,
 };
 
-export { indicatorSizes, iconSizes, fontSizes, numberOfInitials, avatarSizes };
+export {
+  indicatorSizes,
+  onlineIndicatorSizes,
+  indicatorPositions,
+  iconSizes,
+  fontSizes,
+  numberOfInitials,
+  avatarSizes,
+};

package/src/components/ui/Badge/OnlineIndicator.tsx

@@ -3,38 +3,24 @@ import { StyleSheet, View } from 'react-native';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../../theme';
+import { onlineIndicatorSizes } from '../Avatar/constants';
 
 export type OnlineIndicatorProps = {
   online: boolean;
   size: 'xl' | 'lg' | 'sm' | 'md';
 };
 
-const sizes = {
-  xl: {
-    borderWidth: 2,
-    height: 16,
-    width: 16,
-  },
-  lg: {
-    borderWidth: 2,
-    height: 14,
-    width: 14,
-  },
-  md: {
-    borderWidth: 2,
-    height: 12,
-    width: 12,
-  },
-  sm: {
-    borderWidth: 1,
-    height: 8,
-    width: 8,
-  },
-};
-
 export const OnlineIndicator = ({ online, size = 'md' }: OnlineIndicatorProps) => {
   const styles = useStyles();
-  return <View style={[styles.indicator, sizes[size], online ? styles.online : styles.offline]} />;
+  return (
+    <View
+      style={[
+        styles.indicator,
+        onlineIndicatorSizes[size],
+        online ? styles.online : styles.offline,
+      ]}
+    />
+  );
 };
 
 const useStyles = () => {