Skip to content

fix: custom emoji are not visible in user status #6739

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

fix: custom emoji are not visible in user status #6739

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a36820b
Show custom emoji in status
Rohit3523 Oct 18, 2025
4fb8557
chore: format code with Prettier [skip ci]
Rohit3523 Oct 18, 2025
13529ed
Merge branch 'develop' into custom-emoji-in-status
Rohit3523 Oct 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions app/containers/RoomHeader/RoomHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@
import { useTheme } from '../../theme';
import { useAppSelector } from '../../lib/hooks/useAppSelector';
import useStatusAccessibilityLabel from '../../lib/hooks/useStatusAccessibilityLabel';
import { type IUsersTyping } from '../../reducers/usersTyping';
import { IUsersTyping } from '../../reducers/usersTyping';

Check failure on line 14 in app/containers/RoomHeader/RoomHeader.tsx

View workflow job for this annotation

GitHub Actions / ESLint and Test / run-eslint-and-test 

All imports in the declaration are only used as types. Use `import type`
import StatusTextContainer from '../../containers/StatusText';

Check failure on line 15 in app/containers/RoomHeader/RoomHeader.tsx

View workflow job for this annotation

GitHub Actions / ESLint and Test / run-eslint-and-test 

Useless path segments for "../../containers/StatusText", should be "../StatusText"

const HIT_SLOP = {
top: 5,
Expand Down Expand Up @@ -108,7 +109,8 @@

// subtitle
if (subtitle) {
return <MarkdownPreview msg={subtitle} style={[styles.subtitle, { fontSize, color: colors.fontSecondaryInfo }]} />;
return <StatusTextContainer status={subtitle} style={[styles.subtitle, { fontSize, color: colors.fontSecondaryInfo }]} />;
//return <MarkdownPreview msg={subtitle} style={[styles.subtitle, { fontSize, color: colors.fontSecondaryInfo }]} />;

Check failure on line 113 in app/containers/RoomHeader/RoomHeader.tsx

View workflow job for this annotation

GitHub Actions / ESLint and Test / run-eslint-and-test 

Expected space or tab after '//' in comment
}

return null;
Expand Down
20 changes: 20 additions & 0 deletions app/containers/StatusText/Status.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React from 'react';

import Status from './Status';

export default {
title: 'Status'
};

export const All = () => (
<>
<Status status='online' />
<Status status='busy' />
<Status status='away' />
<Status status='loading' />
<Status status='disabled' />
<Status status='offline' />
<Status />
<Status status='online' size={60} />
</>
);
4 changes: 4 additions & 0 deletions app/containers/StatusText/Status.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import { generateSnapshots } from '../../../.rnstorybook/generateSnapshots';
import * as stories from './Status.stories';

generateSnapshots(stories);
39 changes: 39 additions & 0 deletions app/containers/StatusText/Status.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
// @ts-nocheck
import React from 'react';
import { StyleProp, TextStyle, useWindowDimensions } from 'react-native';

Check failure on line 3 in app/containers/StatusText/Status.tsx

View workflow job for this annotation

GitHub Actions / ESLint and Test / run-eslint-and-test 

Imports "StyleProp" and "TextStyle" are only used as type

import { useTheme } from '../../theme';
import { CustomIcon, IconSet, TIconsName } from '../CustomIcon';

Check failure on line 6 in app/containers/StatusText/Status.tsx

View workflow job for this annotation

GitHub Actions / ESLint and Test / run-eslint-and-test 

Imports "TIconsName" are only used as type
import { IStatusComponentProps } from './definition';

Check failure on line 7 in app/containers/StatusText/Status.tsx

View workflow job for this annotation

GitHub Actions / ESLint and Test / run-eslint-and-test 

All imports in the declaration are only used as types. Use `import type`
import { useUserStatusColor } from '../../lib/hooks/useUserStatusColor';

const Status = React.memo(({ style, status = 'offline', size = 32, ...props }: IStatusComponentProps) => {
const { colors } = useTheme();
const userStatusColor = useUserStatusColor(status);

const { fontScale } = useWindowDimensions();

const name: TIconsName = `status-${status}`;
const isNameValid = IconSet.hasIcon(name);
const iconName = isNameValid ? name : 'status-offline';
const calculatedStyle: StyleProp<TextStyle> = [
{
width: size * fontScale,
height: size * fontScale,
textAlignVertical: 'center'
},
style
];

return (
<CustomIcon
{...props}
style={calculatedStyle}
size={size}
name={iconName}
color={userStatusColor ?? colors.userPresenceOffline}
/>
);
});

export default Status;
270 changes: 270 additions & 0 deletions app/containers/StatusText/__snapshots__/Status.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,270 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Story Snapshots: All should match snapshot 1`] = `
[
<Text
allowFontScaling={false}
selectable={false}
style={
[
{
"color": "#158D65",
"fontSize": 32,
},
[
{
"lineHeight": 32,
},
[
{
"height": 32,
"textAlignVertical": "center",
"width": 32,
},
undefined,
],
],
{
"fontFamily": "custom",
"fontStyle": "normal",
"fontWeight": "normal",
},
{},
]
}
>
</Text>,
<Text
allowFontScaling={false}
selectable={false}
style={
[
{
"color": "#D40C26",
"fontSize": 32,
},
[
{
"lineHeight": 32,
},
[
{
"height": 32,
"textAlignVertical": "center",
"width": 32,
},
undefined,
],
],
{
"fontFamily": "custom",
"fontStyle": "normal",
"fontWeight": "normal",
},
{},
]
}
>
</Text>,
<Text
allowFontScaling={false}
selectable={false}
style={
[
{
"color": "#AC892F",
"fontSize": 32,
},
[
{
"lineHeight": 32,
},
[
{
"height": 32,
"textAlignVertical": "center",
"width": 32,
},
undefined,
],
],
{
"fontFamily": "custom",
"fontStyle": "normal",
"fontWeight": "normal",
},
{},
]
}
>
</Text>,
<Text
allowFontScaling={false}
selectable={false}
style={
[
{
"color": "#6C727A",
"fontSize": 32,
},
[
{
"lineHeight": 32,
},
[
{
"height": 32,
"textAlignVertical": "center",
"width": 32,
},
undefined,
],
],
{
"fontFamily": "custom",
"fontStyle": "normal",
"fontWeight": "normal",
},
{},
]
}
>
</Text>,
<Text
allowFontScaling={false}
selectable={false}
style={
[
{
"color": "#F38C39",
"fontSize": 32,
},
[
{
"lineHeight": 32,
},
[
{
"height": 32,
"textAlignVertical": "center",
"width": 32,
},
undefined,
],
],
{
"fontFamily": "custom",
"fontStyle": "normal",
"fontWeight": "normal",
},
{},
]
}
>
</Text>,
<Text
allowFontScaling={false}
selectable={false}
style={
[
{
"color": "#6C727A",
"fontSize": 32,
},
[
{
"lineHeight": 32,
},
[
{
"height": 32,
"textAlignVertical": "center",
"width": 32,
},
undefined,
],
],
{
"fontFamily": "custom",
"fontStyle": "normal",
"fontWeight": "normal",
},
{},
]
}
>
</Text>,
<Text
allowFontScaling={false}
selectable={false}
style={
[
{
"color": "#6C727A",
"fontSize": 32,
},
[
{
"lineHeight": 32,
},
[
{
"height": 32,
"textAlignVertical": "center",
"width": 32,
},
undefined,
],
],
{
"fontFamily": "custom",
"fontStyle": "normal",
"fontWeight": "normal",
},
{},
]
}
>
</Text>,
<Text
allowFontScaling={false}
selectable={false}
style={
[
{
"color": "#158D65",
"fontSize": 60,
},
[
{
"lineHeight": 60,
},
[
{
"height": 60,
"textAlignVertical": "center",
"width": 60,
},
undefined,
],
],
{
"fontFamily": "custom",
"fontStyle": "normal",
"fontWeight": "normal",
},
{},
]
}
>
</Text>,
]
`;
14 changes: 14 additions & 0 deletions app/containers/StatusText/definition.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { TextProps } from 'react-native';

Check failure on line 1 in app/containers/StatusText/definition.ts

View workflow job for this annotation

GitHub Actions / ESLint and Test / run-eslint-and-test 

All imports in the declaration are only used as types. Use `import type`

import { TUserStatus } from '../../definitions';

Check failure on line 3 in app/containers/StatusText/definition.ts

View workflow job for this annotation

GitHub Actions / ESLint and Test / run-eslint-and-test 

All imports in the declaration are only used as types. Use `import type`

export interface IStatus extends TextProps {
id: string;
size: number;
status?: TUserStatus | null;
}

export interface IStatusComponentProps extends Omit<IStatus, 'id' | 'size' | 'status'> {
size?: number;
status?: TUserStatus;
}
Loading
Loading