chore: Enable New Architecture (#6478)

Author: diegolmello

android/gradle.properties

@@ -32,7 +32,7 @@ reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
 # your application. You should enable this flag either if you want
 # to write custom TurboModules/Fabric components OR use libraries that
 # are providing them.
-newArchEnabled=false
+newArchEnabled=true
 
 # Application ID
 APPLICATION_ID=chat.rocket.reactnative

app/containers/MessageComposer/MessageComposer.test.tsx

@@ -43,6 +43,18 @@ const initialStoreState = () => {
 };
 initialStoreState();
 
+jest.mock('./hooks/useSubscription', () => ({
+	useSubscription: jest.fn(() => ({
+		rid: 'rid',
+		t: 'd',
+		name: 'Room Name',
+		fname: 'Room Name',
+		usernames: ['user1', 'user2'],
+		prid: undefined,
+		federated: false
+	}))
+}));
+
 const initialContext = {
 	rid: 'rid',
 	tmid: undefined,

app/containers/MessageComposer/components/ComposerInput.tsx

@@ -43,7 +43,7 @@ export const ComposerInput = memo(
 		const { setFocused, setMicOrSend, setAutocompleteParams } = useMessageComposerApi();
 		const autocompleteType = useAutocompleteParams()?.type;
 		const textRef = React.useRef('');
-		const firstRender = React.useRef(false);
+		const firstRender = React.useRef(true);
 		const selectionRef = React.useRef<IInputSelection>(defaultSelection);
 		const dispatch = useDispatch();
 		const subscription = useSubscription(rid);
@@ -77,13 +77,13 @@ export const ComposerInput = memo(
 				}
 			};
 
-			if (sharing) return;
-			if (usedCannedResponse) setInput(usedCannedResponse);
-			if (action !== 'edit' && !firstRender.current) {
-				firstRender.current = true;
+			if (action !== 'edit' && firstRender.current) {
+				firstRender.current = false;
 				setDraftMessage();
 			}
-		}, [action, rid, tmid, usedCannedResponse, firstRender.current]);
+			if (sharing) return;
+			if (usedCannedResponse) setInput(usedCannedResponse);
+		}, [action, rid, tmid, usedCannedResponse]);
 
 		// Edit/quote
 		useEffect(() => {

app/containers/MessageComposer/context.tsx

@@ -2,7 +2,6 @@ import React, { createContext, ReactElement, useContext, useMemo, useReducer } f
 
 import { IEmoji } from '../../definitions';
 import { IAutocompleteBase, TMicOrSend } from './interfaces';
-import { animateNextTransition } from '../../lib/methods/helpers';
 
 type TMessageComposerContextApi = {
 	setFocused(focused: boolean): void;
@@ -66,17 +65,14 @@ type Actions =
 const reducer = (state: State, action: Actions): State => {
 	switch (action.type) {
 		case 'updateFocused':
-			animateNextTransition();
 			return { ...state, focused: action.focused };
 		case 'setMicOrSend':
 			return { ...state, micOrSend: action.micOrSend };
 		case 'setMarkdownToolbar':
-			animateNextTransition();
 			return { ...state, showMarkdownToolbar: action.showMarkdownToolbar };
 		case 'setAlsoSendThreadToChannel':
 			return { ...state, alsoSendThreadToChannel: action.alsoSendThreadToChannel };
 		case 'setRecordingAudio':
-			animateNextTransition();
 			return { ...state, recordingAudio: action.recordingAudio };
 		case 'setAutocompleteParams':
 			return { ...state, autocompleteParams: action.params };

app/containers/MessageComposer/hooks/useAutoSaveDraft.ts

@@ -30,14 +30,15 @@ export const useAutoSaveDraft = (text = '') => {
 				saveDraftMessage({ rid, tmid, draftMessage });
 			}
 		},
-		[action, rid, tmid, text, selectedMessages?.length, route.name]
+		[action, rid, tmid, text, selectedMessages, route.name]
 	);
 
 	// if focused on composer input, saves every N seconds
 	useEffect(() => {
 		if (focused) {
 			intervalRef.current = setInterval(saveMessageDraft, 3000) as any;
 		} else if (intervalRef.current) {
+			saveMessageDraft();
 			clearInterval(intervalRef.current);
 		}
 

app/containers/message/Components/Attachments/Image/Image.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { View, ViewStyle, Image } from 'react-native';
-import { Image as ExpoImage } from 'expo-image';
+import { View, ViewStyle } from 'react-native';
+import { Image } from 'expo-image';
 
 import { isValidUrl } from '../../../../../lib/methods/helpers/isValidUrl';
 import { useTheme } from '../../../../../theme';
@@ -11,6 +11,7 @@ import { WidthAwareContext } from '../../WidthAwareView';
 import { useUserPreferences } from '../../../../../lib/methods';
 import { AUTOPLAY_GIFS_PREFERENCES_KEY } from '../../../../../lib/constants';
 import ImageBadge from './ImageBadge';
+import log from '../../../../../lib/methods/helpers/log';
 
 export const MessageImage = React.memo(({ uri, status, encrypted = false, imagePreview, imageType }: IMessageImage) => {
 	const { colors } = useTheme();
@@ -22,8 +23,12 @@ export const MessageImage = React.memo(({ uri, status, encrypted = false, imageP
 
 	useEffect(() => {
 		if (status === 'downloaded') {
-			Image.getSize(uri, (width, height) => {
-				setImageDimensions({ width, height });
+			Image.loadAsync(uri, {
+				onError: e => {
+					log(e);
+				}
+			}).then(image => {
+				setImageDimensions({ width: image.width, height: image.height });
 			});
 		}
 	}, [uri, status]);
@@ -62,13 +67,13 @@ export const MessageImage = React.memo(({ uri, status, encrypted = false, imageP
 		<>
 			{showImage ? (
 				<View style={[containerStyle, borderStyle]}>
-					<ExpoImage autoplay={autoplayGifs} style={imageStyle} source={{ uri: encodeURI(uri) }} contentFit='cover' />
+					<Image autoplay={autoplayGifs} style={imageStyle} source={{ uri: encodeURI(uri) }} contentFit='cover' />
 				</View>
 			) : null}
 			{['loading', 'to-download'].includes(status) || (status === 'downloaded' && !showImage) ? (
 				<>
 					{imagePreview && imageType && !encrypted ? (
-						<ExpoImage
+						<Image
 							autoplay={autoplayGifs}
 							style={styles.image}
 							source={{ uri: `data:${imageType};base64,${imagePreview}` }}

app/containers/message/Urls.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement, useContext, useEffect, useState } from 'react';
-import { Image, StyleSheet, Text, View, ViewStyle } from 'react-native';
+import { StyleSheet, Text, View, ViewStyle } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
-import { Image as ExpoImage } from 'expo-image';
+import { Image } from 'expo-image';
 import { dequal } from 'dequal';
 import axios from 'axios';
 
@@ -72,15 +72,13 @@ const UrlImage = ({ image, hasContent }: { image: string; hasContent: boolean })
 
 	useEffect(() => {
 		if (image) {
-			Image.getSize(
-				image,
-				(width, height) => {
-					setImageDimensions({ width, height });
-				},
-				() => {
+			Image.loadAsync(image, {
+				onError: () => {
 					setImageLoadedState('error');
 				}
-			);
+			}).then(image => {
+				setImageDimensions({ width: image.width, height: image.height });
+			});
 		}
 	}, [image]);
 
@@ -113,7 +111,7 @@ const UrlImage = ({ image, hasContent }: { image: string; hasContent: boolean })
 
 	return (
 		<View style={containerStyle}>
-			<ExpoImage
+			<Image
 				source={{ uri: image }}
 				style={[imageStyle, imageLoadedState === 'loading' && styles.loading]}
 				contentFit='contain'

app/lib/methods/helpers/layoutAnimation.ts

@@ -1,26 +1,23 @@
 import { LayoutAnimation } from 'react-native';
 
 import { debounce } from './debounce';
-import { isIOS } from './deviceInfo';
 
 export const animateNextTransition = debounce(
 	() => {
-		if (isIOS) {
-			LayoutAnimation.configureNext({
-				duration: 200,
-				create: {
-					type: LayoutAnimation.Types.easeInEaseOut,
-					property: LayoutAnimation.Properties.opacity
-				},
-				update: {
-					type: LayoutAnimation.Types.easeInEaseOut
-				},
-				delete: {
-					type: LayoutAnimation.Types.easeInEaseOut,
-					property: LayoutAnimation.Properties.opacity
-				}
-			});
-		}
+		LayoutAnimation.configureNext({
+			duration: 200,
+			create: {
+				type: LayoutAnimation.Types.easeInEaseOut,
+				property: LayoutAnimation.Properties.opacity
+			},
+			update: {
+				type: LayoutAnimation.Types.easeInEaseOut
+			},
+			delete: {
+				type: LayoutAnimation.Types.easeInEaseOut,
+				property: LayoutAnimation.Properties.opacity
+			}
+		});
 	},
 	200,
 	true

app/views/DirectoryView/index.tsx

@@ -106,7 +106,12 @@ class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewS
 		this.setState({ loading: true });
 
 		try {
-			const { data, type, globalUsers } = this.state;
+			const { type, globalUsers } = this.state;
+			let { data } = this.state;
+			// TODO: workaround to fix Fabric batch behavior. It should be fixed when we migrate to function components
+			if (newSearch) {
+				data = [];
+			}
 			const directories = await Services.getDirectory({
 				text,
 				type,
@@ -116,11 +121,11 @@ class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewS
 				sort: type === 'users' ? { username: 1 } : { usersCount: -1 }
 			});
 			if (directories.success) {
-				this.setState({
-					data: [...data, ...(directories.result as IServerRoom[])],
+				this.setState(prev => ({
+					data: [...prev.data, ...(directories.result as IServerRoom[])],
 					loading: false,
 					total: directories.total
-				});
+				}));
 			} else {
 				this.setState({ loading: false });
 			}

app/views/RoomView/List/components/NavBottomFAB.tsx

@@ -34,12 +34,13 @@ const NavBottomFAB = memo(({ visible, onPress }: { visible: boolean; onPress: Fu
 	}
 
 	return (
-		<View style={styles.container} testID='nav-jump-to-bottom'>
+		<View style={styles.container}>
 			<Touch
 				accessible
 				accessibilityLabel={i18n.t('Jump_to_last_message')}
 				onPress={() => onPress()}
-				style={[styles.button, { backgroundColor: colors.surfaceRoom }]}>
+				style={[styles.button, { backgroundColor: colors.surfaceRoom }]}
+				testID='nav-jump-to-bottom'>
 				<View style={[styles.content, { borderColor: colors.strokeLight }]}>
 					<CustomIcon name='chevron-down' size={36} />
 				</View>