chore: Merge 4.53.0 into master (#5901)

android/app/build.gradle

@@ -93,7 +93,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode VERSIONCODE as Integer
-        versionName "4.52.0"
+        versionName "4.53.0"
         vectorDrawables.useSupportLibrary = true
         if (!isFoss) {
             manifestPlaceholders = [BugsnagAPIKey: BugsnagAPIKey as String]

app/containers/Button/index.tsx

@@ -64,7 +64,7 @@ const Button: React.FC<IButtonProps> = ({
 		style
 	];
 
-	const textStyle = [styles.text, { color: isDisabled ? colors.fontDisabled : resolvedTextColor, fontSize }, styleText];
+	const textStyle = [styles.text, { color: isDisabled ? colors.buttonPrimaryDisabled : resolvedTextColor, fontSize }, styleText];
 
 	return (
 		<Touchable

app/containers/MessageComposer/components/ComposerInput.tsx

@@ -172,9 +172,11 @@ export const ComposerInput = memo(
 		};
 
 		const focus = () => {
-			if (inputRef.current) {
-				inputRef.current.focus();
-			}
+			setTimeout(() => {
+				if (inputRef.current) {
+					inputRef.current.focus();
+				}
+			}, 300);
 		};
 
 		const onChangeText: TextInputProps['onChangeText'] = text => {

app/views/RoomView/Separator.tsx → app/containers/MessageSeparator.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import moment from 'moment';
 
-import I18n from '../../i18n';
-import sharedStyles from '../Styles';
-import { themes } from '../../lib/constants';
-import { useTheme } from '../../theme';
+import I18n from '../i18n';
+import sharedStyles from '../views/Styles';
+import { themes } from '../lib/constants';
+import { useTheme } from '../theme';
 
 const styles = StyleSheet.create({
 	container: {
@@ -31,8 +31,13 @@ const styles = StyleSheet.create({
 	}
 });
 
-const DateSeparator = ({ ts, unread }: { ts: Date | string | null; unread: boolean }): React.ReactElement => {
+const MessageSeparator = ({ ts, unread }: { ts?: Date | string | null; unread?: boolean }): React.ReactElement | null => {
 	const { theme } = useTheme();
+
+	if (!ts && !unread) {
+		return null;
+	}
+
 	const date = ts ? moment(ts).format('LL') : null;
 	const unreadLine = { backgroundColor: themes[theme].buttonBackgroundDangerDefault };
 	const unreadText = { color: themes[theme].fontDanger };
@@ -62,4 +67,4 @@ const DateSeparator = ({ ts, unread }: { ts: Date | string | null; unread: boole
 	);
 };
 
-export default DateSeparator;
+export default MessageSeparator;

app/containers/message/Message.stories.tsx

@@ -4,7 +4,7 @@ import { NavigationContainer } from '@react-navigation/native';
 
 import MessageComponent from './Message';
 import { E2E_MESSAGE_TYPE, messagesStatus, themes } from '../../lib/constants';
-import MessageSeparator from '../../views/RoomView/Separator';
+import MessageSeparator from '../MessageSeparator';
 import MessageContext from './Context';
 
 const _theme = 'light';
@@ -57,8 +57,7 @@ export default {
 							onDiscussionPress: () => {},
 							onReactionLongPress: () => {},
 							threadBadgeColor: themes.light.fontInfo
-						}}
-					>
+						}}>
 						<Story />
 					</MessageContext.Provider>
 				</ScrollView>

app/containers/message/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 import { Keyboard, ViewStyle } from 'react-native';
 
 import Message from './Message';
@@ -10,6 +10,7 @@ import openLink from '../../lib/methods/helpers/openLink';
 import { IAttachment, TAnyMessageModel, TGetCustomEmoji } from '../../definitions';
 import { IRoomInfoParam } from '../../views/SearchMessagesView';
 import { E2E_MESSAGE_TYPE, E2E_STATUS, messagesStatus } from '../../lib/constants';
+import MessageSeparator from '../MessageSeparator';
 
 interface IMessageContainerProps {
 	item: TAnyMessageModel;
@@ -60,7 +61,8 @@ interface IMessageContainerProps {
 	closeEmojiAndAction?: (action?: Function, params?: any) => void;
 	isBeingEdited?: boolean;
 	isPreview?: boolean;
-	separator?: ReactElement | null;
+	dateSeparator?: Date | string | null;
+	showUnreadSeparator?: boolean;
 }
 
 interface IMessageContainerState {
@@ -97,9 +99,24 @@ class MessageContainer extends React.Component<IMessageContainerProps, IMessageC
 
 	shouldComponentUpdate(nextProps: IMessageContainerProps, nextState: IMessageContainerState) {
 		const { isManualUnignored } = this.state;
-		const { threadBadgeColor, isIgnored, highlighted, previousItem, autoTranslateRoom, autoTranslateLanguage, isBeingEdited } =
-			this.props;
+		const {
+			threadBadgeColor,
+			isIgnored,
+			highlighted,
+			previousItem,
+			autoTranslateRoom,
+			autoTranslateLanguage,
+			isBeingEdited,
+			showUnreadSeparator,
+			dateSeparator
+		} = this.props;
 
+		if (nextProps.showUnreadSeparator !== showUnreadSeparator) {
+			return true;
+		}
+		if (nextProps.dateSeparator !== dateSeparator) {
+			return true;
+		}
 		if (nextProps.highlighted !== highlighted) {
 			return true;
 		}
@@ -362,7 +379,8 @@ class MessageContainer extends React.Component<IMessageContainerProps, IMessageC
 			highlighted,
 			isBeingEdited,
 			isPreview,
-			separator
+			showUnreadSeparator,
+			dateSeparator
 		} = this.props;
 		const {
 			id,
@@ -434,7 +452,7 @@ class MessageContainer extends React.Component<IMessageContainerProps, IMessageC
 					translateLanguage: canTranslateMessage ? autoTranslateLanguage : undefined,
 					isEncrypted: this.isEncrypted
 				}}>
-				{separator || null}
+				<MessageSeparator ts={dateSeparator} unread={showUnreadSeparator} />
 				{/* @ts-ignore*/}
 				<Message
 					id={id}

app/index.tsx

@@ -68,7 +68,7 @@ const parseDeepLinking = (url: string) => {
 				const parsedQuery = parseQuery(query);
 				return {
 					...parsedQuery,
-					type: matchedPattern
+					type: matchedPattern === 'shareextension' ? matchedPattern : parsedQuery?.type
 				};
 			}
 		}

app/lib/constants/colors.ts

@@ -23,7 +23,7 @@ const light = {
 	strokeError: '#EC0D2A',
 
 	fontWhite: '#FFFFFF',
-	fontDisabled: '#FFFFFF',
+	fontDisabled: '#CBCED1',
 	fontAnnotation: '#9EA2A8',
 	fontHint: '#6C727A',
 	fontSecondaryInfo: '#6C727A',

app/lib/methods/helpers/formatAttachmentUrl.ts

@@ -1,6 +1,5 @@
 import { URL } from 'react-native-url-polyfill';
 
-import { LOCAL_DOCUMENT_DIRECTORY } from '../handleMediaDownload';
 import { isImageBase64 } from '../isImageBase64';
 import { store } from '../../store/auxStore';
 
@@ -12,10 +11,7 @@ function setParamInUrl({ url, token, userId }: { url: string; token: string; use
 }
 
 export const formatAttachmentUrl = (attachmentUrl: string | undefined, userId: string, token: string, server: string): string => {
-	if (
-		(attachmentUrl && isImageBase64(attachmentUrl)) ||
-		(LOCAL_DOCUMENT_DIRECTORY && attachmentUrl?.startsWith(LOCAL_DOCUMENT_DIRECTORY))
-	) {
+	if ((attachmentUrl && isImageBase64(attachmentUrl)) || attachmentUrl?.startsWith('file://')) {
 		return attachmentUrl;
 	}
 	if (attachmentUrl && attachmentUrl.startsWith('http')) {

app/views/RoomView/List/index.tsx

@@ -72,6 +72,10 @@ const ListContainer = forwardRef<IListContainerRef, IListContainerProps>(
 						viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
 						jumpToBottom={jumpToBottom}
 						isThread={!!tmid}
+						maintainVisibleContentPosition={{
+							minIndexForVisible: 0,
+							autoscrollToTopThreshold: 0
+						}}
 					/>
 				</Container>
 			</>

app/views/RoomView/LoadMore/index.tsx

@@ -6,6 +6,7 @@ import { MessageTypeLoad } from '../../../lib/constants';
 import { MessageType, RoomType } from '../../../definitions';
 import { useTheme } from '../../../theme';
 import Touch from '../../../containers/Touch';
+import MessageSeparator from '../../../containers/MessageSeparator';
 import sharedStyles from '../../Styles';
 import I18n from '../../../i18n';
 import { roomHistoryRequest } from '../../../actions/room';
@@ -30,14 +31,17 @@ const LoadMore = React.memo(
 		loaderId,
 		type,
 		runOnRender,
-		separator
+		dateSeparator,
+		showUnreadSeparator
 	}: {
 		rid: string;
 		t: RoomType;
 		loaderId: string;
 		type: MessageType;
 		runOnRender: boolean;
 		separator?: ReactElement | null;
+		dateSeparator?: Date | string | null;
+		showUnreadSeparator?: boolean;
 	}): React.ReactElement => {
 		const { colors } = useTheme();
 		const dispatch = useDispatch();
@@ -61,7 +65,7 @@ const LoadMore = React.memo(
 
 		return (
 			<>
-				{separator || null}
+				<MessageSeparator ts={dateSeparator} unread={showUnreadSeparator} />
 				<Touch onPress={handleLoad} style={styles.button} enabled={!loading}>
 					{loading ? (
 						<ActivityIndicator color={colors.fontSecondaryInfo} />

app/views/RoomView/index.tsx

@@ -41,7 +41,6 @@ import { ContainerTypes } from '../../containers/UIKit/interfaces';
 import RoomServices from './services';
 import LoadMore from './LoadMore';
 import Banner from './Banner';
-import Separator from './Separator';
 import RightButtons from './RightButtons';
 import LeftButtons from './LeftButtons';
 import styles from './styles';
@@ -1298,8 +1297,6 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 			}
 		}
 
-		const separator = showUnreadSeparator || dateSeparator ? <Separator ts={dateSeparator} unread={showUnreadSeparator} /> : null;
-
 		let content = null;
 		if (item.t && MESSAGE_TYPE_ANY_LOAD.includes(item.t as MessageTypeLoad)) {
 			const runOnRender = () => {
@@ -1316,7 +1313,8 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 					loaderId={item.id}
 					type={item.t}
 					runOnRender={runOnRender()}
-					separator={separator}
+					dateSeparator={dateSeparator}
+					showUnreadSeparator={showUnreadSeparator}
 				/>
 			);
 		} else {
@@ -1365,7 +1363,8 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 					theme={theme}
 					closeEmojiAndAction={this.handleCloseEmoji}
 					isBeingEdited={isBeingEdited}
-					separator={separator}
+					dateSeparator={dateSeparator}
+					showUnreadSeparator={showUnreadSeparator}
 				/>
 			);
 		}

app/views/Styles.ts

@@ -80,7 +80,8 @@ export default StyleSheet.create({
 				fontWeight: '400'
 			},
 			android: {
-				fontFamily: 'Inter-Regular'
+				fontFamily: 'Inter-Regular',
+				letterSpacing: 0.01
 			}
 		})
 	},

ios/RocketChatRN.xcodeproj/project.pbxproj

@@ -2847,7 +2847,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 4.52.0;
+				MARKETING_VERSION = 4.53.0;
 				MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG";
@@ -2891,7 +2891,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 4.52.0;
+				MARKETING_VERSION = 4.53.0;
 				MTL_FAST_MATH = YES;
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = chat.rocket.reactnative.NotificationService;

ios/RocketChatRN/Info.plist

@@ -28,7 +28,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>4.52.0</string>
+	<string>4.53.0</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>

ios/ShareRocketChatRN/Info.plist

@@ -26,7 +26,7 @@
 	<key>CFBundlePackageType</key>
 	<string>XPC!</string>
 	<key>CFBundleShortVersionString</key>
-	<string>4.52.0</string>
+	<string>4.53.0</string>
 	<key>CFBundleVersion</key>
 	<string>1</string>
 	<key>KeychainGroup</key>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "rocket-chat-reactnative",
-	"version": "4.52.0",
+	"version": "4.53.0",
 	"private": true,
 	"scripts": {
 		"start": "react-native start",