From 0a04be7448df1d8985d328ef2f520e34d102d079 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Espino=20Garc=C3=ADa?= Date: Wed, 10 May 2023 15:44:10 +0200 Subject: [PATCH] Use RN Image for local images instead of FastImage (#7329) --- .../slash_suggestion_item.tsx | 6 ++--- app/components/emoji/emoji.tsx | 5 ++-- .../markdown/markdown_image/index.tsx | 4 ++-- .../markdown/markdown_table_image/index.tsx | 2 +- app/components/profile_picture/image.tsx | 12 ++++++++++ app/components/progressive_image/index.tsx | 7 +++--- .../progressive_image/thumbnail.tsx | 11 ++++----- app/screens/in_app_notification/icon.tsx | 4 ++-- patches/react-native-fast-image+8.6.3.patch | 23 ++++++++++++++++--- types/components/emoji.ts | 3 +-- 10 files changed, 53 insertions(+), 24 deletions(-) diff --git a/app/components/autocomplete/slash_suggestion/slash_suggestion_item.tsx b/app/components/autocomplete/slash_suggestion/slash_suggestion_item.tsx index c1b01c136f..ca5f82b8c3 100644 --- a/app/components/autocomplete/slash_suggestion/slash_suggestion_item.tsx +++ b/app/components/autocomplete/slash_suggestion/slash_suggestion_item.tsx @@ -3,7 +3,7 @@ import base64 from 'base-64'; import React, {useCallback, useMemo} from 'react'; -import {Text, View} from 'react-native'; +import {Image, Text, View} from 'react-native'; import FastImage from 'react-native-fast-image'; import {useSafeAreaInsets} from 'react-native-safe-area-context'; import {SvgXml} from 'react-native-svg'; @@ -42,6 +42,7 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme: Theme) => { slashIcon: { height: 16, width: 10, + tintColor: theme.centerChannelColor, }, suggestionContainer: { flex: 1, @@ -105,8 +106,7 @@ const SlashSuggestionItem = ({ } let image = ( - diff --git a/app/components/emoji/emoji.tsx b/app/components/emoji/emoji.tsx index 65d48a5eac..35917e65dd 100644 --- a/app/components/emoji/emoji.tsx +++ b/app/components/emoji/emoji.tsx @@ -5,6 +5,7 @@ import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider'; import withObservables from '@nozbe/with-observables'; import React from 'react'; import { + Image, Platform, StyleSheet, Text, @@ -108,11 +109,11 @@ const Emoji = (props: EmojiProps) => { return null; } return ( - ); diff --git a/app/components/markdown/markdown_image/index.tsx b/app/components/markdown/markdown_image/index.tsx index e5003f91a2..5cc5a62efe 100644 --- a/app/components/markdown/markdown_image/index.tsx +++ b/app/components/markdown/markdown_image/index.tsx @@ -240,7 +240,7 @@ const MarkdownImage = ({ { return { @@ -77,6 +79,16 @@ const Image = ({author, forwardRef, iconSize, size, source, url}: Props) => { const pictureUrl = client.getProfilePictureUrl(author.id, lastPictureUpdate); const imgSource = source ?? {uri: `${serverUrl}${pictureUrl}`}; + if (imgSource.uri?.startsWith('file://')) { + return ( + + ); + } return ( - void; @@ -32,13 +32,12 @@ const Thumbnail = ({onError, opacity, style, source, tintColor}: ThumbnailProps) } return ( - ); }; diff --git a/app/screens/in_app_notification/icon.tsx b/app/screens/in_app_notification/icon.tsx index 7b58e3ef34..25b0c6ac3f 100644 --- a/app/screens/in_app_notification/icon.tsx +++ b/app/screens/in_app_notification/icon.tsx @@ -3,7 +3,7 @@ import withObservables from '@nozbe/with-observables'; import React from 'react'; -import {StyleSheet, View} from 'react-native'; +import {Image, StyleSheet, View} from 'react-native'; import FastImage, {type Source} from 'react-native-fast-image'; import CompassIcon from '@components/compass_icon'; @@ -72,7 +72,7 @@ const NotificationIcon = ({author, enablePostIconOverride, fromWebhook, override ); } else { icon = ( - diff --git a/patches/react-native-fast-image+8.6.3.patch b/patches/react-native-fast-image+8.6.3.patch index c2c001707f..7ceadb3d57 100644 --- a/patches/react-native-fast-image+8.6.3.patch +++ b/patches/react-native-fast-image+8.6.3.patch @@ -1,5 +1,5 @@ diff --git a/node_modules/react-native-fast-image/RNFastImage.podspec b/node_modules/react-native-fast-image/RNFastImage.podspec -index db0fada..47dbd5b 100644 +index db0fada..9a2457c 100644 --- a/node_modules/react-native-fast-image/RNFastImage.podspec +++ b/node_modules/react-native-fast-image/RNFastImage.podspec @@ -16,6 +16,6 @@ Pod::Spec.new do |s| @@ -62,7 +62,7 @@ index 0000000..a302394 + } +} diff --git a/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageOkHttpProgressGlideModule.java b/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageOkHttpProgressGlideModule.java -index e659a61..1bdf34e 100644 +index 811292a..79291fa 100644 --- a/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageOkHttpProgressGlideModule.java +++ b/node_modules/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageOkHttpProgressGlideModule.java @@ -43,6 +43,7 @@ public class FastImageOkHttpProgressGlideModule extends LibraryGlideModule { @@ -74,9 +74,26 @@ index e659a61..1bdf34e 100644 .build(); OkHttpUrlLoader.Factory factory = new OkHttpUrlLoader.Factory(client); diff --git a/node_modules/react-native-fast-image/dist/index.d.ts b/node_modules/react-native-fast-image/dist/index.d.ts -index 8a91257..599775d 100644 +index 5abb7c9..db5a1d3 100644 --- a/node_modules/react-native-fast-image/dist/index.d.ts +++ b/node_modules/react-native-fast-image/dist/index.d.ts +@@ -43,13 +43,13 @@ export interface ImageStyle extends FlexStyle, TransformsStyle, ShadowStyleIOS { + backfaceVisibility?: 'visible' | 'hidden'; + borderBottomLeftRadius?: number; + borderBottomRightRadius?: number; +- backgroundColor?: string; +- borderColor?: string; ++ backgroundColor?: ColorValue; ++ borderColor?: ColorValue; + borderWidth?: number; + borderRadius?: number; + borderTopLeftRadius?: number; + borderTopRightRadius?: number; +- overlayColor?: string; ++ overlayColor?: ColorValue; + opacity?: number; + } + export interface FastImageProps extends AccessibilityProps, ViewProps { @@ -89,6 +89,10 @@ export interface FastImageProps extends AccessibilityProps, ViewProps { * Render children within the image. */ diff --git a/types/components/emoji.ts b/types/components/emoji.ts index 77cc747495..a86bfd4b2a 100644 --- a/types/components/emoji.ts +++ b/types/components/emoji.ts @@ -2,8 +2,7 @@ // See LICENSE.txt for license information. import type CustomEmojiModel from '@typings/database/models/servers/custom_emoji'; -import type {StyleProp, TextStyle} from 'react-native'; -import type {ImageStyle} from 'react-native-fast-image'; +import type {StyleProp, TextStyle, ImageStyle} from 'react-native'; // The intersection of the image styles and text styles type ImageStyleUniques = Omit