feat: migrate to expo-image (#5996)

Co-authored-by: Diego Mello <diegolmello@gmail.com>

android/app/build.gradle

@@ -196,7 +196,6 @@ dependencies {
     }
 
     implementation project(':@react-native-community_viewpager')
-    // implementation "androidx.core:core-splashscreen:1.0.0"
     playImplementation project(':react-native-notifications')
     playImplementation "com.google.firebase:firebase-messaging:23.3.1"
     playImplementation project(':@react-native-firebase_app')
@@ -205,14 +204,10 @@ dependencies {
     implementation project(':watermelondb-jsi')
 
     implementation "com.google.code.gson:gson:2.8.9"
-    implementation "com.github.bumptech.glide:glide:4.9.0"
-    annotationProcessor "com.github.bumptech.glide:compiler:4.9.0"
     implementation "com.tencent:mmkv-static:1.2.10"
     androidTestImplementation('com.wix:detox:+')
     implementation 'androidx.appcompat:appcompat:1.1.0'
     implementation 'com.facebook.soloader:soloader:0.10.4'
-    implementation("com.facebook.fresco:animated-gif:2.5.0")
-    implementation "com.facebook.fresco:imagepipeline-okhttp3:3.1.3"
 }
 
 apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

android/app/src/main/java/chat/rocket/reactnative/networking/SSLPinningModule.java

@@ -36,10 +36,9 @@
 
 import com.reactnativecommunity.webview.RNCWebViewManager;
 
-import com.dylanvann.fastimage.FastImageOkHttpUrlLoader;
-
 import expo.modules.av.player.datasource.SharedCookiesDataSourceFactory;
 import expo.modules.filesystem.FileSystemModule;
+import expo.modules.image.okhttp.ExpoImageOkHttpClientGlideModule;
 
 public class SSLPinningModule extends ReactContextBaseJavaModule implements KeyChainAliasCallback {
 
@@ -98,24 +97,26 @@ public void alias(String alias) {
     @ReactMethod
     public void setCertificate(String data, Promise promise) {
         this.alias = data;
+        OkHttpClient client = getOkHttpClient();
 
         // HTTP Fetch react-native layer
         NetworkingModule.setCustomClientBuilder(new CustomClient());
         // Websocket react-native layer
         WebSocketModule.setCustomClientBuilder(new CustomClient());
         // Image networking react-native layer
         ImagePipelineConfig config = OkHttpImagePipelineConfigFactory
-            .newBuilder(this.reactContext, getOkHttpClient())
+            .newBuilder(this.reactContext, client)
             .build();
         Fresco.initialize(this.reactContext, config);
         // RNCWebView onReceivedClientCertRequest
         RNCWebViewManager.setCertificateAlias(data);
-        // FastImage Glide network layer
-        FastImageOkHttpUrlLoader.setOkHttpClient(getOkHttpClient());
+
         // Expo AV network layer
-        SharedCookiesDataSourceFactory.setOkHttpClient(getOkHttpClient());
+        SharedCookiesDataSourceFactory.setOkHttpClient(client);
         // Expo File System network layer
-        FileSystemModule.setOkHttpClient(getOkHttpClient());
+        FileSystemModule.setOkHttpClient(client);
+        // Expo Image network layer
+        ExpoImageOkHttpClientGlideModule.Companion.setOkHttpClient(client);
 
         promise.resolve(null);
     }

app/containers/Avatar/Avatar.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
-import FastImage from 'react-native-fast-image';
+import { Image } from 'expo-image';
 import Touchable from 'react-native-platform-touchable';
 import { settings as RocketChatSettings } from '@rocket.chat/sdk';
 
@@ -79,13 +79,13 @@ const Avatar = React.memo(
 			}
 
 			image = (
-				<FastImage
+				<Image
 					style={avatarStyle}
 					source={{
 						uri,
-						headers: RocketChatSettings.customHeaders,
-						priority: FastImage.priority.high
+						headers: RocketChatSettings.customHeaders
 					}}
+					priority='high'
 				/>
 			);
 		}

app/containers/EmojiPicker/CustomEmoji.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleProp } from 'react-native';
-import FastImage, { ImageStyle } from 'react-native-fast-image';
+import { Image, ImageStyle } from 'expo-image';
 
 import { useAppSelector } from '../../lib/hooks';
 import { ICustomEmoji } from '../../definitions';
@@ -14,13 +14,12 @@ const CustomEmoji = React.memo(
 	({ emoji, style }: ICustomEmojiProps) => {
 		const baseUrl = useAppSelector(state => state.server.server);
 		return (
-			<FastImage
+			<Image
 				style={style}
 				source={{
-					uri: `${baseUrl}/emoji-custom/${encodeURIComponent(emoji.name)}.${emoji.extension}`,
-					priority: FastImage.priority.high
+					uri: `${baseUrl}/emoji-custom/${encodeURIComponent(emoji.name)}.${emoji.extension}`
 				}}
-				resizeMode={FastImage.resizeMode.contain}
+				contentFit='contain'
 			/>
 		);
 	},

app/containers/ImageViewer/ImageViewer.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { LayoutChangeEvent, StyleSheet, StyleProp, ViewStyle, ImageStyle, View } from 'react-native';
+import { LayoutChangeEvent, StyleSheet, StyleProp, ViewStyle, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { withTiming, useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
-import FastImage from 'react-native-fast-image';
+import { Image, ImageStyle } from 'expo-image';
 
 import { useTheme } from '../../theme';
 
@@ -114,10 +114,10 @@ export const ImageViewer = ({ uri = '', width, height, ...props }: ImageViewerPr
 		<View style={[styles.flex, { width, height, backgroundColor: colors.surfaceNeutral }]}>
 			<GestureDetector gesture={gesture}>
 				<Animated.View onLayout={onLayout} style={[styles.flex, style]}>
-					<FastImage
+					<Image
 						// @ts-ignore
 						style={styles.image}
-						resizeMode='contain'
+						contentFit='contain'
 						source={{ uri }}
 						{...props}
 					/>

app/containers/Loading/index.tsx

@@ -10,6 +10,7 @@ import Animated, {
 	withSequence,
 	withTiming
 } from 'react-native-reanimated';
+import { Image } from 'expo-image';
 
 import { useTheme } from '../../theme';
 import EventEmitter from '../../lib/methods/helpers/events';
@@ -19,6 +20,8 @@ export const LOADING_TEST_ID = 'loading';
 export const LOADING_BUTTON_TEST_ID = 'loading-button';
 export const LOADING_IMAGE_TEST_ID = 'loading-image';
 
+const AnimatedImage = Animated.createAnimatedComponent(Image);
+
 const styles = StyleSheet.create({
 	container: {
 		flex: 1,
@@ -27,8 +30,7 @@ const styles = StyleSheet.create({
 	},
 	image: {
 		width: PixelRatio.get() * 40,
-		height: PixelRatio.get() * 40,
-		resizeMode: 'contain'
+		height: PixelRatio.get() * 40
 	}
 });
 
@@ -114,10 +116,11 @@ const Loading = (): React.ReactElement | null => {
 							animatedOpacity
 						]}
 					/>
-					<Animated.Image
+					<AnimatedImage
 						source={require('../../static/images/logo.png')}
 						style={[styles.image, animatedScale]}
 						testID={LOADING_IMAGE_TEST_ID}
+						contentFit='contain'
 					/>
 				</View>
 			</TouchableWithoutFeedback>

app/containers/MessageComposer/components/Autocomplete/AutocompletePreview.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { RectButton } from 'react-native-gesture-handler';
-import FastImage from 'react-native-fast-image';
+import { Image } from 'expo-image';
 
 import { IAutocompleteItemProps } from '../../interfaces';
 import { CustomIcon } from '../../../CustomIcon';
@@ -17,7 +17,7 @@ export const AutocompletePreview = ({ item, onPress }: IAutocompleteItemProps) =
 	if (item.type === '/preview') {
 		content =
 			item.preview.type === 'image' ? (
-				<FastImage style={styles.previewImage} source={{ uri: item.preview.value }} resizeMode={FastImage.resizeMode.cover} />
+				<Image style={styles.previewImage} source={{ uri: item.preview.value }} contentFit='cover' />
 			) : (
 				<CustomIcon name='attach' size={36} />
 			);

app/containers/ServerItem/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Pressable, Text, View } from 'react-native';
-import FastImage from 'react-native-fast-image';
+import { Image } from 'expo-image';
 
 import Check from '../Check';
 import styles, { ROW_HEIGHT } from './styles';
@@ -37,18 +37,17 @@ const ServerItem = React.memo(({ item, onPress, onLongPress, hasCheck }: IServer
 			})}>
 			<View style={styles.serverItemContainer}>
 				{item.iconURL ? (
-					<FastImage
+					<Image
 						source={{
-							uri: item.iconURL,
-							priority: FastImage.priority.high
+							uri: item.iconURL
 						}}
-						// @ts-ignore TODO: Remove when updating FastImage
-						defaultSource={defaultLogo}
+						placeholder={defaultLogo}
 						style={styles.serverIcon}
 						onError={() => console.log('err_loading_server_icon')}
+						contentFit='contain'
 					/>
 				) : (
-					<FastImage source={defaultLogo} style={styles.serverIcon} />
+					<Image source={defaultLogo} style={styles.serverIcon} contentFit='contain' />
 				)}
 				<View style={styles.serverTextContainer}>
 					<Text numberOfLines={1} style={[styles.serverName, { color: themes[theme].fontTitlesLabels }]}>

app/containers/ServerItem/styles.ts

@@ -13,8 +13,7 @@ export default StyleSheet.create({
 	serverIcon: {
 		width: 44,
 		height: 44,
-		borderRadius: 4,
-		resizeMode: 'contain'
+		borderRadius: 4
 	},
 	serverTextContainer: {
 		flex: 1,

app/containers/UIKit/Image.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import FastImage from 'react-native-fast-image';
+import { Image as ExpoImage } from 'expo-image';
 import { BlockContext } from '@rocket.chat/ui-kit';
 
 import ImageContainer from '../message/Components/Attachments/Image';
@@ -24,7 +24,7 @@ const ThumbContext = (args: IThumb) => (
 );
 
 export const Thumb = ({ element, size = 88 }: IThumb) => (
-	<FastImage style={[{ width: size, height: size }, styles.image]} source={{ uri: element?.imageUrl }} />
+	<ExpoImage style={[{ width: size, height: size }, styles.image]} source={{ uri: element?.imageUrl }} />
 );
 
 export const Media = ({ element }: IImage) => {

app/containers/UIKit/MultiSelect/Chips.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 import Touchable from 'react-native-platform-touchable';
-import FastImage from 'react-native-fast-image';
+import { Image } from 'expo-image';
 
 import { textParser } from '../utils';
 import { CustomIcon } from '../../CustomIcon';
@@ -34,7 +34,7 @@ const Chip = ({ item, onSelect, style }: IChip) => {
 			testID={`multi-select-chip-${item.value}`}
 		>
 			<>
-				{item.imageUrl ? <FastImage style={styles.chipImage} source={{ uri: item.imageUrl }} /> : null}
+				{item.imageUrl ? <Image style={styles.chipImage} source={{ uri: item.imageUrl }} /> : null}
 				<Text numberOfLines={1} style={[styles.chipText, { color: colors.fontTitlesLabels }]}>
 					{textParser([item.text])}
 				</Text>

app/containers/UIKit/MultiSelect/Items.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 import Touchable from 'react-native-platform-touchable';
-import FastImage from 'react-native-fast-image';
+import { Image } from 'expo-image';
 import { FlatList } from 'react-native-gesture-handler';
 
 import * as List from '../../List';
@@ -33,7 +33,7 @@ const Item = ({ item, selected, onSelect }: IItem) => {
 		<Touchable testID={`multi-select-item-${itemName}`} key={itemName} onPress={() => onSelect(item)}>
 			<View style={styles.item}>
 				<View style={styles.flexZ}>
-					{item.imageUrl ? <FastImage style={styles.itemImage} source={{ uri: item.imageUrl }} /> : null}
+					{item.imageUrl ? <Image style={styles.itemImage} source={{ uri: item.imageUrl }} /> : null}
 				</View>
 				<View style={styles.flex}>
 					<Text numberOfLines={1} style={{ color: colors.fontTitlesLabels }}>

app/containers/markdown/components/Image.tsx

@@ -2,40 +2,40 @@ import React from 'react';
 import { Image as ImageProps } from '@rocket.chat/message-parser';
 import { createImageProgress } from 'react-native-image-progress';
 import * as Progress from 'react-native-progress';
-import FastImage from 'react-native-fast-image';
+import { Image as ExpoImage } from 'expo-image';
 
 import { TSupportedThemes, useTheme } from '../../../theme';
 import { themes } from '../../../lib/constants';
-import styles from '../../message/styles';
+import styles from '../styles';
 
 interface IImageProps {
 	value: ImageProps['value'];
 }
 
-type TMessageImage = {
+type TMarkdownImage = {
 	img: string;
 	theme: TSupportedThemes;
 };
 
-const ImageProgress = createImageProgress(FastImage);
+const ImageProgress = createImageProgress(ExpoImage);
 
-const MessageImage = ({ img, theme }: TMessageImage) => (
+const MarkdownImage = ({ img, theme }: TMarkdownImage) => (
 	<ImageProgress
 		style={[styles.inlineImage, { borderColor: themes[theme].strokeLight }]}
 		source={{ uri: encodeURI(img) }}
-		resizeMode={FastImage.resizeMode.cover}
 		indicator={Progress.Pie}
 		indicatorProps={{
 			color: themes[theme].fontHint
 		}}
+		contentFit='contain'
 	/>
 );
 
 const Image = ({ value }: IImageProps) => {
 	const { theme } = useTheme();
 	const { src } = value;
 
-	return <MessageImage img={src.value} theme={theme} />;
+	return <MarkdownImage img={src.value} theme={theme} />;
 };
 
 export default Image;

app/containers/markdown/styles.ts

@@ -73,8 +73,7 @@ export default StyleSheet.create({
 	},
 	inlineImage: {
 		width: 300,
-		height: 300,
-		resizeMode: 'contain'
+		height: 300
 	},
 	codeInline: {
 		fontSize: 16,

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 FastImage from 'react-native-fast-image';
+import { Image as ExpoImage } from 'expo-image';
 
 import { isValidUrl } from '../../../../../lib/methods/helpers/isValidUrl';
 import { useTheme } from '../../../../../theme';
@@ -57,7 +57,7 @@ export const MessageImage = React.memo(({ uri, status, encrypted = false }: IMes
 		<>
 			{showImage ? (
 				<View style={[containerStyle, borderStyle]}>
-					<FastImage style={imageStyle} source={{ uri: encodeURI(uri) }} resizeMode={FastImage.resizeMode.cover} />
+					<ExpoImage style={imageStyle} source={{ uri: encodeURI(uri) }} contentFit='cover' />
 				</View>
 			) : (
 				<View style={[styles.image, borderStyle]} />

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

@@ -2,7 +2,7 @@ import { dequal } from 'dequal';
 import moment from 'moment';
 import React, { useContext, useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import FastImage from 'react-native-fast-image';
+import { Image } from 'expo-image';
 
 import { IAttachment, TGetCustomEmoji } from '../../../../definitions';
 import { themes } from '../../../../lib/constants';
@@ -167,7 +167,7 @@ const UrlImage = React.memo(
 		}
 
 		image = image.includes('http') ? image : `${baseUrl}/${image}?rc_uid=${user.id}&rc_token=${user.token}`;
-		return <FastImage source={{ uri: image }} style={styles.image} resizeMode={FastImage.resizeMode.cover} />;
+		return <Image source={{ uri: image }} style={styles.image} contentFit='cover' />;
 	},
 	(prevProps, nextProps) => prevProps.image === nextProps.image
 );