SW/mattermost-mobile
2
0
Fork 0
forked from Ivasoft/mattermost-mobile
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use RN Image for local images instead of FastImage (#7329)

Browse Source
This commit is contained in:
Daniel Espino García
2023-05-10 15:44:10 +02:00
committed by GitHub
parent 4aa4c0a7cb
commit 0a04be7448
10 changed files with 53 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/components/autocomplete/slash_suggestion/slash_suggestion_item.tsx
View File

@@ -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 = (
<FastImage
tintColor={theme.centerChannelColor}
<Image
style={style.slashIcon}
source={slashIcon}
/>

5
app/components/emoji/emoji.tsx
View File

@@ -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 (
<FastImage
<Image
key={key}
source={image}
style={[commonStyle, imageStyle, {width, height}]}
resizeMode={FastImage.resizeMode.contain}
resizeMode={'contain'}
testID={testID}
/>
);

4
app/components/markdown/markdown_image/index.tsx
View File

@@ -240,7 +240,7 @@ const MarkdownImage = ({
<ProgressiveImage
forwardRef={ref}
id={fileInfo.id!}
defaultSource={{uri: fileInfo.uri!}}
imageUri={fileInfo.uri}
onError={handleOnError}
resizeMode='contain'
style={{width, height}}
@@ -260,7 +260,7 @@ const MarkdownImage = ({
>
<ProgressiveImage
id={fileInfo.id!}
defaultSource={{uri: fileInfo.uri!}}
imageUri={fileInfo.uri}
onError={handleOnError}
resizeMode='contain'
style={{width, height}}

2
app/components/markdown/markdown_table_image/index.tsx
View File

@@ -119,7 +119,7 @@ const MarkTableImage = ({disabled, imagesMetadata, location, postId, serverURL,
<Animated.View style={[styles, {width, height}]}>
<ProgressiveImage
id={fileId}
defaultSource={{uri: source}}
imageUri={source}
forwardRef={ref}
onError={onLoadFailed}
resizeMode='contain'

12
app/components/profile_picture/image.tsx
View File

@@ -2,6 +2,7 @@
// See LICENSE.txt for license information.
import React, {useMemo} from 'react';
import {Image as RNImage} from 'react-native';
import FastImage, {type Source} from 'react-native-fast-image';
import Animated from 'react-native-reanimated';
@@ -26,6 +27,7 @@ type Props = {
// @ts-expect-error FastImage does work with Animated.createAnimatedComponent
const AnimatedFastImage = Animated.createAnimatedComponent(FastImage);
const AnimatedImage = Animated.createAnimatedComponent(RNImage);
const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
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 (
<AnimatedImage
key={pictureUrl}
ref={forwardRef}
style={fIStyle}
source={{uri: imgSource.uri}}
/>
);
}
return (
<AnimatedFastImage
key={pictureUrl}

7
app/components/progressive_image/index.tsx
View File

@@ -2,8 +2,8 @@
// See LICENSE.txt for license information.
import React, {type ReactNode, useEffect, useState} from 'react';
import {ImageBackground, type StyleProp, StyleSheet, View, type ViewStyle} from 'react-native';
import FastImage, {type ImageStyle, type ResizeMode} from 'react-native-fast-image';
import {ImageBackground, type ImageStyle, type StyleProp, StyleSheet, View, type ViewStyle, Image} from 'react-native';
import FastImage, {type ResizeMode} from 'react-native-fast-image';
import Animated, {interpolate, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming} from 'react-native-reanimated';
import {useTheme} from '@context/theme';
@@ -15,6 +15,7 @@ const AnimatedImageBackground = Animated.createAnimatedComponent(ImageBackground
// @ts-expect-error FastImage does work with Animated.createAnimatedComponent
const AnimatedFastImage = Animated.createAnimatedComponent(FastImage);
const AnimatedImage = Animated.createAnimatedComponent(Image);
type Props = ProgressiveImageProps & {
children?: ReactNode | ReactNode[];
@@ -95,7 +96,7 @@ const ProgressiveImage = ({
if (defaultSource) {
return (
<View style={[styles.defaultImageContainer, style]}>
<AnimatedFastImage
<AnimatedImage
ref={forwardRef}
source={defaultSource}
style={[

11
app/components/progressive_image/thumbnail.tsx
View File

@@ -2,13 +2,13 @@
// See LICENSE.txt for license information.
import React from 'react';
import FastImage, {type ImageStyle, type Source} from 'react-native-fast-image';
import {Image, type ColorValue, type StyleProp, type ImageStyle} from 'react-native';
import FastImage, {type Source} from 'react-native-fast-image';
import Animated, {type SharedValue} from 'react-native-reanimated';
import type {ColorValue, StyleProp} from 'react-native';
// @ts-expect-error FastImage does work with Animated.createAnimatedComponent
const AnimatedFastImage = Animated.createAnimatedComponent(FastImage);
const AnimatedImage = Animated.createAnimatedComponent(Image);
type ThumbnailProps = {
onError: () => void;
@@ -32,13 +32,12 @@ const Thumbnail = ({onError, opacity, style, source, tintColor}: ThumbnailProps)
}
return (
<AnimatedFastImage
<AnimatedImage
resizeMode='contain'
onError={onError}
source={require('@assets/images/thumb.png')}
style={[style, {opacity: opacity?.value}]}
style={[style, {opacity: opacity?.value, tintColor}]}
testID='progressive_image.thumbnail'
tintColor={tintColor}
/>
);
};

4
app/screens/in_app_notification/icon.tsx
View File

@@ -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 = (
<FastImage
<Image
source={logo}
style={styles.icon}
/>

23
patches/react-native-fast-image+8.6.3.patch
View File

@@ -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.
*/

3
types/components/emoji.ts
View File

@@ -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<ImageStyle, keyof(TextStyle)>