feat: migrate to expo-image (RocketChat#5996)

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

Author: Rohit3523

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) => {