chore: Merge 4.54.0 into master (#5946)

android/app/build.gradle

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

app/AppContainer.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, memo, useEffect } from 'react';
 import { NavigationContainer } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { connect } from 'react-redux';
 
 import { SetUsernameStackParamList, StackParamList } from './definitions/navigationTypes';
@@ -18,6 +18,8 @@ import ShareExtensionStack from './stacks/ShareExtensionStack';
 import { ThemeContext } from './theme';
 import { setCurrentScreen } from './lib/methods/helpers/log';
 
+const createStackNavigator = createNativeStackNavigator;
+
 // SetUsernameStack
 const SetUsername = createStackNavigator<SetUsernameStackParamList>();
 const SetUsernameStack = () => (
@@ -57,7 +59,7 @@ const App = memo(({ root, isMasterDetail }: { root: string; isMasterDetail: bool
 				}
 				Navigation.routeNameRef.current = currentRouteName;
 			}}>
-			<Stack.Navigator screenOptions={{ headerShown: false, animationEnabled: false }}>
+			<Stack.Navigator screenOptions={{ headerShown: false, animation: 'none' }}>
 				{root === RootEnum.ROOT_LOADING || root === RootEnum.ROOT_LOADING_SHARE_EXTENSION ? (
 					<Stack.Screen name='AuthLoading' component={AuthLoadingView} />
 				) : null}

app/containers/Button/Button.stories.tsx

@@ -23,6 +23,8 @@ export const DisabledButton = () => <Button disabled {...buttonProps} />;
 
 export const DisabledLoadingButton = () => <Button disabled loading {...buttonProps} />;
 
+export const SmallButton = () => <Button small {...buttonProps} />;
+
 export const CustomButton = () => (
 	<Button
 		{...buttonProps}

app/containers/Button/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleProp, StyleSheet, Text, TextStyle } from 'react-native';
+import { StyleProp, StyleSheet, Text, TextStyle, ViewStyle } from 'react-native';
 import Touchable, { PlatformTouchableProps } from 'react-native-platform-touchable';
 
 import { useTheme } from '../../theme';
@@ -14,16 +14,25 @@ interface IButtonProps extends PlatformTouchableProps {
 	loading?: boolean;
 	color?: string;
 	fontSize?: number;
+	style?: StyleProp<ViewStyle> | StyleProp<ViewStyle>[];
 	styleText?: StyleProp<TextStyle> | StyleProp<TextStyle>[];
+	small?: boolean;
 }
 
 const styles = StyleSheet.create({
 	container: {
+		marginBottom: 12,
+		borderRadius: 4
+	},
+	normalButton: {
 		paddingHorizontal: 14,
 		justifyContent: 'center',
-		height: 48,
-		borderRadius: 4,
-		marginBottom: 12
+		height: 48
+	},
+	smallButton: {
+		paddingHorizontal: 12,
+		paddingVertical: 8,
+		alignSelf: 'center'
 	},
 	text: {
 		...sharedStyles.textMedium,
@@ -45,6 +54,7 @@ const Button: React.FC<IButtonProps> = ({
 	color,
 	style,
 	styleText,
+	small,
 	...otherProps
 }) => {
 	const { colors } = useTheme();
@@ -58,6 +68,7 @@ const Button: React.FC<IButtonProps> = ({
 	const resolvedTextColor = color || (isPrimary ? colors.fontWhite : colors.fontDefault);
 
 	const containerStyle = [
+		small ? styles.smallButton : styles.normalButton,
 		styles.container,
 		{ backgroundColor: isDisabled ? disabledBackgroundColor : resolvedBackgroundColor },
 		isDisabled && backgroundColor ? styles.disabled : {},

app/containers/HeaderButton/HeaderButtonContainer.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewProps } from 'react-native';
+
+import { isAndroid, isTablet } from '../../lib/methods/helpers';
 
 interface IHeaderButtonContainer {
 	children?: React.ReactElement | (React.ReactElement | null)[] | null;
 	left?: boolean;
+	onLayout?: ViewProps['onLayout'];
 }
 
 const styles = StyleSheet.create({
@@ -13,15 +16,18 @@ const styles = StyleSheet.create({
 		justifyContent: 'center'
 	},
 	left: {
-		marginLeft: 5
+		marginLeft: isTablet ? 5 : -5,
+		marginRight: isAndroid ? 25 : 0
 	},
 	right: {
-		marginRight: 5
+		marginRight: isTablet ? 5 : -5
 	}
 });
 
-const Container = ({ children, left = false }: IHeaderButtonContainer): React.ReactElement => (
-	<View style={[styles.container, left ? styles.left : styles.right]}>{children}</View>
+const Container = ({ children, left = false, onLayout }: IHeaderButtonContainer): React.ReactElement => (
+	<View style={[styles.container, left ? styles.left : styles.right]} onLayout={onLayout || undefined}>
+		{children}
+	</View>
 );
 
 Container.displayName = 'HeaderButton.Container';

app/containers/MessageActions/index.tsx

@@ -378,6 +378,17 @@ const MessageActions = React.memo(
 				const options: TActionSheetOptionsItem[] = [];
 				const videoConfBlock = message.t === 'videoconf';
 
+				// Edit
+				const isEditAllowed = allowEdit(message);
+				if (!videoConfBlock && (isOwn(message) || isEditAllowed)) {
+					options.push({
+						title: I18n.t('Edit'),
+						icon: 'edit',
+						onPress: () => handleEdit(message.id),
+						enabled: isEditAllowed
+					});
+				}
+
 				// Jump to message
 				const quoteMessageLink = getQuoteMessageLink(message.attachments);
 				if (quoteMessageLink && jumpToMessage) {
@@ -455,17 +466,6 @@ const MessageActions = React.memo(
 					onPress: () => handleShare(message)
 				});
 
-				// Edit
-				const isEditAllowed = allowEdit(message);
-				if (!videoConfBlock && (isOwn(message) || isEditAllowed)) {
-					options.push({
-						title: I18n.t('Edit'),
-						icon: 'edit',
-						onPress: () => handleEdit(message.id),
-						enabled: isEditAllowed
-					});
-				}
-
 				// Pin
 				if (Message_AllowPinning && !videoConfBlock) {
 					options.push({

app/containers/MessageComposer/components/ComposerInput.tsx

@@ -6,7 +6,7 @@ import { RouteProp, useFocusEffect, useRoute } from '@react-navigation/native';
 
 import I18n from '../../../i18n';
 import { IAutocompleteItemProps, IComposerInput, IComposerInputProps, IInputSelection, TSetInput } from '../interfaces';
-import { useAutocompleteParams, useFocused, useMessageComposerApi } from '../context';
+import { useAutocompleteParams, useFocused, useMessageComposerApi, useMicOrSend } from '../context';
 import { fetchIsAllOrHere, getMentionRegexp } from '../helpers';
 import { useSubscription, useAutoSaveDraft } from '../hooks';
 import sharedStyles from '../../../views/Styles';
@@ -58,6 +58,8 @@ export const ComposerInput = memo(
 		const usedCannedResponse = route.params?.usedCannedResponse;
 		const prevAction = usePrevious(action);
 
+		// subscribe to changes on mic state to update draft after a message is sent
+		useMicOrSend();
 		const { saveMessageDraft } = useAutoSaveDraft(textRef.current);
 
 		// Draft/Canned Responses

app/containers/RoomHeader/RoomHeader.tsx

@@ -8,6 +8,7 @@ import RoomTypeIcon from '../RoomTypeIcon';
 import { TUserStatus, IOmnichannelSource } from '../../definitions';
 import { useTheme } from '../../theme';
 import { useAppSelector } from '../../lib/hooks';
+import { isIOS } from '../../lib/methods/helpers';
 
 const HIT_SLOP = {
 	top: 5,
@@ -22,7 +23,6 @@ const getSubTitleSize = (scale: number) => SUBTITLE_SIZE * scale;
 
 const styles = StyleSheet.create({
 	container: {
-		flex: 1,
 		justifyContent: 'center'
 	},
 	titleContainer: {
@@ -75,6 +75,7 @@ interface IRoomHeader {
 	testID?: string;
 	sourceType?: IOmnichannelSource;
 	disabled?: boolean;
+	rightButtonsWidth?: number;
 }
 
 const SubTitle = React.memo(({ usersTyping, subtitle, renderFunc, scale }: TRoomHeaderSubTitle) => {
@@ -141,7 +142,8 @@ const Header = React.memo(
 		testID,
 		usersTyping = [],
 		sourceType,
-		disabled
+		disabled,
+		rightButtonsWidth = 0
 	}: IRoomHeader) => {
 		const { colors } = useTheme();
 		const portrait = height > width;
@@ -189,7 +191,8 @@ const Header = React.memo(
 				style={[
 					styles.container,
 					{
-						opacity: disabled ? 0.5 : 1
+						opacity: disabled ? 0.5 : 1,
+						width: width - rightButtonsWidth - (isIOS ? 60 : 80) - (isMasterDetail ? 350 : 0)
 					}
 				]}
 				disabled={disabled}

app/containers/RoomHeader/index.tsx

@@ -21,6 +21,7 @@ interface IRoomHeaderContainerProps {
 	sourceType?: IOmnichannelSource;
 	visitor?: IVisitor;
 	disabled?: boolean;
+	rightButtonsWidth?: number;
 }
 
 const RoomHeaderContainer = React.memo(
@@ -38,7 +39,8 @@ const RoomHeaderContainer = React.memo(
 		type,
 		sourceType,
 		visitor,
-		disabled
+		disabled,
+		rightButtonsWidth
 	}: IRoomHeaderContainerProps) => {
 		let subtitle: string | undefined;
 		let statusVisitor: TUserStatus | undefined;
@@ -89,6 +91,7 @@ const RoomHeaderContainer = React.memo(
 				onPress={onPress}
 				sourceType={sourceType}
 				disabled={disabled}
+				rightButtonsWidth={rightButtonsWidth}
 			/>
 		);
 	}

app/containers/TextInput/FormTextInput.tsx

@@ -15,12 +15,13 @@ const styles = StyleSheet.create({
 		paddingTop: 5
 	},
 	inputContainer: {
-		marginBottom: 10
+		marginBottom: 10,
+		gap: 4
 	},
 	label: {
-		marginBottom: 10,
-		fontSize: 14,
-		...sharedStyles.textSemibold
+		fontSize: 16,
+		lineHeight: 22,
+		...sharedStyles.textMedium
 	},
 	input: {
 		...sharedStyles.textRegular,

app/containers/UserGeneratedContentRules.tsx

@@ -15,14 +15,13 @@ const styles = StyleSheet.create({
 		marginHorizontal: 30
 	},
 	bottomContainerText: {
-		...sharedStyles.textRegular,
-		fontSize: 13,
+		...sharedStyles.textMedium,
+		fontSize: 14,
+		lineHeight: 22,
 		textAlign: 'center'
 	},
-	bottomContainerTextBold: {
-		...sharedStyles.textSemibold,
-		fontSize: 13,
-		textAlign: 'center'
+	bottomContainerTextUnderline: {
+		textDecorationLine: 'underline'
 	}
 });
 
@@ -40,22 +39,16 @@ const UGCRules = ({ styleContainer }: { styleContainer?: ViewStyle }) => {
 	};
 	return (
 		<View style={[styles.bottomContainer, styleContainer]}>
-			<Text style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo }]}>
-				{`${I18n.t('Onboarding_agree_terms')}\n`}
-				<Text
-					style={[styles.bottomContainerTextBold, { color: colors.strokeHighlight }]}
-					onPress={() => openContract('terms-of-service')}
-				>
-					{I18n.t('Terms_of_Service')}
-				</Text>{' '}
-				{I18n.t('and')}
-				<Text
-					style={[styles.bottomContainerTextBold, { color: colors.strokeHighlight }]}
-					onPress={() => openContract('privacy-policy')}
-				>
-					{' '}
-					{I18n.t('Privacy_Policy')}
-				</Text>
+			<Text style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo }]}>{I18n.t('Onboarding_agree_terms')}</Text>
+			<Text
+				style={[styles.bottomContainerTextUnderline, styles.bottomContainerText, { color: colors.fontInfo }]}
+				onPress={() => openContract('terms-of-service')}>
+				{I18n.t('Terms_of_Service')}
+			</Text>
+			<Text
+				style={[styles.bottomContainerTextUnderline, styles.bottomContainerText, { color: colors.fontInfo }]}
+				onPress={() => openContract('privacy-policy')}>
+				{I18n.t('Privacy_Policy')}
 			</Text>
 		</View>
 	);

app/containers/markdown/index.tsx

@@ -191,10 +191,13 @@ class Markdown extends PureComponent<IMarkdownProps, any> {
 	};
 
 	renderParagraph = ({ children }: any) => {
-		const { numberOfLines, style = [], theme } = this.props;
+		const { numberOfLines, style = [], theme, msg } = this.props;
 		if (!children || children.length === 0) {
 			return null;
 		}
+		if (msg && this.isMessageContainsOnlyEmoji) {
+			return <Text>{children}</Text>;
+		}
 		return (
 			<Text style={[styles.text, { color: themes[theme!].fontDefault }, ...style]} numberOfLines={numberOfLines}>
 				{children}

app/containers/markdown/styles.ts

@@ -46,12 +46,13 @@ export default StyleSheet.create({
 		...sharedStyles.textRegular
 	},
 	textBig: {
+		lineHeight: 43,
 		fontSize: 30,
 		...sharedStyles.textRegular
 	},
 	customEmoji: {
-		width: 20,
-		height: 20
+		width: 15,
+		height: 15
 	},
 	customEmojiBig: {
 		width: 30,