[Image][Performance] Fast Image with Auth Token Header Caching

src/CONST.js

@@ -856,6 +856,8 @@ const CONST = {
     },
 
     TFA_CODE_LENGTH: 6,
+
+    CHAT_ATTACHMENT_TOKEN_KEY: 'X-Chat-Attachment-Token',
 };
 
 export default CONST;

src/components/AttachmentModal.js

@@ -115,7 +115,7 @@ class AttachmentModal extends PureComponent {
      * @param {String} sourceURL
      */
     downloadAttachment(sourceURL) {
-        fileDownload(sourceURL, this.props.originalFileName);
+        fileDownload(this.props.isAuthTokenRequired ? addEncryptedAuthTokenToURL(sourceURL) : sourceURL, this.props.originalFileName);
 
         // At ios, if the keyboard is open while opening the attachment, then after downloading
         // the attachment keyboard will show up. So, to fix it we need to dismiss the keyboard.
@@ -229,9 +229,7 @@ class AttachmentModal extends PureComponent {
     }
 
     render() {
-        const sourceURL = this.props.isAuthTokenRequired
-            ? addEncryptedAuthTokenToURL(this.state.sourceURL)
-            : this.state.sourceURL;
+        const sourceURL = this.state.sourceURL;
 
         const {fileName, fileExtension} = FileUtils.splitExtensionFromFileName(this.props.originalFileName || lodashGet(this.state, 'file.name', ''));
 
@@ -266,6 +264,7 @@ class AttachmentModal extends PureComponent {
                     <View style={styles.imageModalImageCenterContainer}>
                         {this.state.sourceURL && (
                             <AttachmentView
+                                isAuthTokenRequired={this.props.isAuthTokenRequired}
                                 sourceURL={sourceURL}
                                 file={this.state.file}
                                 onToggleKeyboard={this.updateConfirmButtonVisibility}

src/components/AttachmentView.js

@@ -12,8 +12,13 @@ import compose from '../libs/compose';
 import Text from './Text';
 import Tooltip from './Tooltip';
 import themeColors from '../styles/themes/default';
+import addEncryptedAuthTokenToURL from '../libs/addEncryptedAuthTokenToURL';
 
 const propTypes = {
+
+    /** Do the urls require an authToken? */
+    isAuthTokenRequired: PropTypes.bool,
+
     /** URL to full-sized attachment */
     sourceURL: PropTypes.string.isRequired,
 
@@ -35,6 +40,7 @@ const propTypes = {
 };
 
 const defaultProps = {
+    isAuthTokenRequired: false,
     file: {
         name: '',
     },
@@ -48,9 +54,12 @@ const AttachmentView = (props) => {
     // will appear with a sourceURL that is a blob
     if (Str.isPDF(props.sourceURL)
         || (props.file && Str.isPDF(props.file.name || props.translate('attachmentView.unknownFilename')))) {
+        const sourceURL = props.isAuthTokenRequired
+            ? addEncryptedAuthTokenToURL(props.sourceURL)
+            : props.sourceURL;
         return (
             <PDFView
-                sourceURL={props.sourceURL}
+                sourceURL={sourceURL}
                 style={styles.imageModalPDF}
                 onToggleKeyboard={props.onToggleKeyboard}
             />
@@ -61,7 +70,7 @@ const AttachmentView = (props) => {
     // both PDFs and images will appear as images when pasted into the the text field
     if (Str.isImage(props.sourceURL) || (props.file && Str.isImage(props.file.name))) {
         return (
-            <ImageView url={props.sourceURL} />
+            <ImageView url={props.sourceURL} isAuthTokenRequired={props.isAuthTokenRequired} />
         );
     }
 

src/components/Avatar.js

@@ -1,5 +1,5 @@
 import React, {PureComponent} from 'react';
-import {Image, View} from 'react-native';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import stylePropTypes from '../styles/stylePropTypes';
@@ -9,6 +9,7 @@ import CONST from '../CONST';
 import * as StyleUtils from '../styles/StyleUtils';
 import * as Expensicons from './Icon/Expensicons';
 import getAvatarDefaultSource from '../libs/getAvatarDefaultSource';
+import FastImage from './FastImage';
 
 const propTypes = {
     /** Source for the avatar. Can be a URL or an icon. */
@@ -72,7 +73,7 @@ class Avatar extends PureComponent {
                         />
                     )
                     : (
-                        <Image
+                        <FastImage
                             source={{uri: this.props.source}}
                             defaultSource={getAvatarDefaultSource(this.props.source)}
                             style={imageStyle}

src/components/FastImage/index.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import {Image} from 'react-native';
+import addEncryptedAuthTokenToURL from '../../libs/addEncryptedAuthTokenToURL';
+
+const RESIZE_MODES = {
+    contain: 'contain',
+    cover: 'cover',
+    stretch: 'stretch',
+    center: 'center',
+};
+
+class FastImage extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            imageSource: undefined,
+        };
+    }
+
+    componentDidMount() {
+        this.configureImageSource();
+    }
+
+    componentDidUpdate(prevProps) {
+        if (prevProps.source === this.props.source) {
+            return;
+        }
+        this.configureImageSource();
+    }
+
+    configureImageSource() {
+        const source = this.props.source;
+        let imageSource = source;
+        if (typeof source !== 'number' && source.headers != null) {
+            imageSource = {uri: addEncryptedAuthTokenToURL(source.uri)};
+        }
+        this.setState({imageSource});
+        if (this.props.onLoad == null) {
+            return;
+        }
+        const uri = typeof imageSource === 'number'
+            ? Image.resolveAssetSource(imageSource).uri
+            : imageSource.uri;
+        Image.getSize(uri, (width, height) => {
+            this.props.onLoad({nativeEvent: {width, height}});
+        });
+    }
+
+    render() {
+        // eslint-disable-next-line
+        const { source, onLoad, ...rest } = this.props;
+
+        // eslint-disable-next-line
+        return <Image {...rest} source={this.state.imageSource} />;
+    }
+}
+
+FastImage.propTypes = Image.propTypes;
+FastImage.resizeMode = RESIZE_MODES;
+export default FastImage;

src/components/FastImage/index.native.js

@@ -0,0 +1,9 @@
+import RNFastImage from '@pieter-pot/react-native-fast-image';
+
+// eslint-disable-next-line
+const FastImage = (props) => <RNFastImage {...props} />;
+
+FastImage.displayName = 'FastImage';
+FastImage.propTypes = RNFastImage.propTypes;
+FastImage.resizeMode = RNFastImage.resizeMode;
+export default FastImage;

src/components/ImageView/index.js

@@ -1,20 +1,33 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {
-    View, Image, Pressable,
+    View, Pressable,
 } from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import FastImage from '../FastImage';
 import styles from '../../styles/styles';
 import * as StyleUtils from '../../styles/StyleUtils';
 import canUseTouchScreen from '../../libs/canUseTouchscreen';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
 import FullscreenLoadingIndicator from '../FullscreenLoadingIndicator';
+import compose from '../../libs/compose';
+import ONYXKEYS from '../../ONYXKEYS';
+import chatAttachmentTokenHeaders from '../../libs/chatAttachmentTokenHeaders';
 
 const propTypes = {
+
+    /** Do the urls require an authToken? */
+    isAuthTokenRequired: PropTypes.bool,
+
     /** URL to full-sized image */
     url: PropTypes.string.isRequired,
     ...windowDimensionsPropTypes,
 };
 
+const defaultProps = {
+    isAuthTokenRequired: false,
+};
+
 class ImageView extends PureComponent {
     constructor(props) {
         super(props);
@@ -23,6 +36,7 @@ class ImageView extends PureComponent {
         this.onContainerLayoutChanged = this.onContainerLayoutChanged.bind(this);
         this.onContainerPressIn = this.onContainerPressIn.bind(this);
         this.onContainerPress = this.onContainerPress.bind(this);
+        this.imageLoad = this.imageLoad.bind(this);
         this.imageLoadingStart = this.imageLoadingStart.bind(this);
         this.imageLoadingEnd = this.imageLoadingEnd.bind(this);
         this.trackMovement = this.trackMovement.bind(this);
@@ -46,9 +60,6 @@ class ImageView extends PureComponent {
     }
 
     componentDidMount() {
-        Image.getSize(this.props.url, (width, height) => {
-            this.setImageRegion(width, height);
-        });
         if (this.canUseTouchScreen) {
             return;
         }
@@ -207,6 +218,10 @@ class ImageView extends PureComponent {
         this.setState(prevState => ({isDragging: prevState.isMouseDown}));
     }
 
+    imageLoad({nativeEvent}) {
+        this.setImageRegion(nativeEvent.width, nativeEvent.height);
+    }
+
     imageLoadingStart() {
         this.setState({isLoading: true});
     }
@@ -216,24 +231,29 @@ class ImageView extends PureComponent {
     }
 
     render() {
+        const headers = this.props.isAuthTokenRequired ? chatAttachmentTokenHeaders() : undefined;
         if (this.canUseTouchScreen) {
             return (
                 <View
                     style={[styles.imageViewContainer, styles.overflowHidden]}
                     onLayout={this.onContainerLayoutChanged}
                 >
-                    <Image
-                        source={{uri: this.props.url}}
+                    <FastImage
+                        source={{
+                            uri: this.props.url,
+                            headers,
+                        }}
                         style={this.state.zoomScale === 0 ? undefined : [
                             styles.w100,
                             styles.h100,
                         ]} // Hide image until zoomScale calculated to prevent showing preview with wrong dimensions.
 
                         // When Image dimensions are lower than the container boundary(zoomscale <= 1), use `contain` to render the image with natural dimensions.
                         // Both `center` and `contain` keeps the image centered on both x and y axis.
-                        resizeMode={this.state.zoomScale > 1 ? 'center' : 'contain'}
+                        resizeMode={this.state.zoomScale > 1 ? FastImage.resizeMode.center : FastImage.resizeMode.contain}
                         onLoadStart={this.imageLoadingStart}
                         onLoadEnd={this.imageLoadingEnd}
+                        onLoad={this.imageLoad}
                     />
                     {this.state.isLoading && (
                         <FullscreenLoadingIndicator
@@ -265,15 +285,19 @@ class ImageView extends PureComponent {
                     onPressIn={this.onContainerPressIn}
                     onPress={this.onContainerPress}
                 >
-                    <Image
-                        source={{uri: this.props.url}}
+                    <FastImage
+                        source={{
+                            uri: this.props.url,
+                            headers,
+                        }}
                         style={this.state.zoomScale === 0 ? undefined : [
                             styles.h100,
                             styles.w100,
                         ]} // Hide image until zoomScale calculated to prevent showing preview with wrong dimensions.
-                        resizeMode="contain"
+                        resizeMode={FastImage.resizeMode.contain}
                         onLoadStart={this.imageLoadingStart}
                         onLoadEnd={this.imageLoadingEnd}
+                        onLoad={this.imageLoad}
                     />
                 </Pressable>
 
@@ -288,4 +312,7 @@ class ImageView extends PureComponent {
 }
 
 ImageView.propTypes = propTypes;
-export default withWindowDimensions(ImageView);
+ImageView.defaultProps = defaultProps;
+export default compose(withWindowDimensions, withOnyx({
+    session: {key: ONYXKEYS.SESSION},
+}))(ImageView);