@wordpress/components 26.0.1-next.5a1d1283.0 → 26.0.1

package/build-module/mobile/image/index.native.js

@@ -1,8 +1,8 @@
-import { createElement } from "@wordpress/element";
+import { createElement, Fragment } from "react";
 /**
  * External dependencies
  */
-import { Image as RNImage, Text, View } from 'react-native';
+import { Animated, Image as RNImage, Text, View } from 'react-native';
 import FastImage from 'react-native-fast-image';
 
 /**
@@ -10,9 +10,9 @@ import FastImage from 'react-native-fast-image';
  */
 import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/components';
-import { image as icon } from '@wordpress/icons';
+import { image, offline } from '@wordpress/icons';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { useEffect, useState, Platform } from '@wordpress/element';
+import { useEffect, useState, useRef, Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -22,14 +22,11 @@ import styles from './style.scss';
 import SvgIconRetry from './icon-retry';
 import ImageEditingButton from './image-editing-button';
 const ICON_TYPE = {
+  OFFLINE: 'offline',
   PLACEHOLDER: 'placeholder',
   RETRY: 'retry',
   UPLOAD: 'upload'
 };
-export const IMAGE_DEFAULT_FOCAL_POINT = {
-  x: 0.5,
-  y: 0.5
-};
 const ImageComponent = ({
   align,
   alt,
@@ -40,6 +37,7 @@ const ImageComponent = ({
   isSelected,
   shouldUseFastImage,
   isUploadFailed,
+  isUploadPaused,
   isUploadInProgress,
   mediaPickerOptions,
   onImageDataLoad,
@@ -55,6 +53,9 @@ const ImageComponent = ({
 }) => {
   const [imageData, setImageData] = useState(null);
   const [containerSize, setContainerSize] = useState(null);
+  const [localURL, setLocalURL] = useState(null);
+  const [networkURL, setNetworkURL] = useState(null);
+  const [networkImageLoaded, setNetworkImageLoaded] = useState(false);
 
   // Disabled for Android due to https://github.com/WordPress/gutenberg/issues/43149
   const Image = !shouldUseFastImage || Platform.isAndroid ? RNImage : FastImage;
@@ -76,6 +77,29 @@ const ImageComponent = ({
           onImageDataLoad(metaData);
         }
       });
+      if (url.startsWith('file:///')) {
+        setLocalURL(url);
+        setNetworkURL(null);
+        setNetworkImageLoaded(false);
+      } else if (url.startsWith('https://')) {
+        if (Platform.isIOS) {
+          setNetworkURL(url);
+        } else if (Platform.isAndroid) {
+          RNImage.prefetch(url).then(() => {
+            if (!isCurrent) {
+              return;
+            }
+            setNetworkURL(url);
+            setNetworkImageLoaded(true);
+          }, () => {
+            // This callback is called when the image fails to load,
+            // but these events are handled by `isUploadFailed`
+            // and `isUploadPaused` events instead.
+            //
+            // Ignoring the error event will persist the local image URI.
+          });
+        }
+      }
     }
     return () => isCurrent = false;
     // Disable reason: deferring this refactor to the native team.
@@ -95,17 +119,23 @@ const ImageComponent = ({
     }
   };
   const getIcon = iconType => {
+    let icon;
     let iconStyle;
     switch (iconType) {
       case ICON_TYPE.RETRY:
-        return createElement(Icon, {
-          icon: retryIcon || SvgIconRetry,
-          ...styles.iconRetry
-        });
+        icon = retryIcon || SvgIconRetry;
+        iconStyle = iconRetryStyles;
+        break;
+      case ICON_TYPE.OFFLINE:
+        icon = offline;
+        iconStyle = iconOfflineStyles;
+        break;
       case ICON_TYPE.PLACEHOLDER:
+        icon = image;
         iconStyle = iconPlaceholderStyles;
         break;
       case ICON_TYPE.UPLOAD:
+        icon = image;
         iconStyle = iconUploadStyles;
         break;
     }
@@ -116,6 +146,11 @@ const ImageComponent = ({
   };
   const iconPlaceholderStyles = usePreferredColorSchemeStyle(styles.iconPlaceholder, styles.iconPlaceholderDark);
   const iconUploadStyles = usePreferredColorSchemeStyle(styles.iconUpload, styles.iconUploadDark);
+  const iconOfflineStyles = usePreferredColorSchemeStyle(styles.iconOffline, styles.iconOfflineDark);
+  const retryIconStyles = usePreferredColorSchemeStyle(styles.retryIcon, styles.retryIconDark);
+  const iconRetryStyles = usePreferredColorSchemeStyle(styles.iconRetry, styles.iconRetryDark);
+  const retryContainerStyles = usePreferredColorSchemeStyle(styles.retryContainer, styles.retryContainerDark);
+  const uploadFailedTextStyles = usePreferredColorSchemeStyle(styles.uploadFailedText, styles.uploadFailedTextDark);
   const placeholderStyles = [usePreferredColorSchemeStyle(styles.imageContainerUpload, styles.imageContainerUploadDark), focalPoint && styles.imageContainerUploadWithFocalpoint, imageHeight && {
     height: imageHeight
   }];
@@ -125,8 +160,16 @@ const ImageComponent = ({
   }, resizeMode && {
     width: styles.wide?.width
   }, focalPoint && styles.focalPointContainer];
+  const opacityValue = useRef(new Animated.Value(1)).current;
+  useEffect(() => {
+    Animated.timing(opacityValue, {
+      toValue: isUploadInProgress ? 0.3 : 1,
+      duration: 100,
+      useNativeDriver: true
+    }).start();
+  }, [isUploadInProgress, opacityValue]);
   const imageStyles = [{
-    opacity: isUploadInProgress ? 0.3 : 1,
+    opacity: opacityValue,
     height: containerSize?.height
   }, !resizeMode && {
     aspectRatio: imageData?.aspectRatio
@@ -135,8 +178,19 @@ const ImageComponent = ({
   }, imageHeight && {
     height: imageHeight
   }, shapeStyle];
+
+  // On iOS, add 1 to height to account for the 1px non-visible image
+  // that is used to determine when the network image has loaded
+  // We also must verify that it is not NaN, as it can be NaN when the image is loading.
+  // This is not necessary on Android as the non-visible image is not used.
+  let calculatedSelectedHeight;
+  if (Platform.isIOS) {
+    calculatedSelectedHeight = containerSize && !isNaN(containerSize.height) ? containerSize.height + 1 : 0;
+  } else {
+    calculatedSelectedHeight = containerSize?.height;
+  }
   const imageSelectedStyles = [usePreferredColorSchemeStyle(styles.imageBorder, styles.imageBorderDark), {
-    height: containerSize?.height
+    height: calculatedSelectedHeight
   }];
   return createElement(View, {
     style: [styles.container,
@@ -155,7 +209,7 @@ const ImageComponent = ({
     accessibilityRole: 'imagebutton',
     key: url,
     style: imageContainerStyles
-  }, isSelected && highlightSelected && !(isUploadInProgress || isUploadFailed) && createElement(View, {
+  }, isSelected && highlightSelected && !(isUploadInProgress || isUploadFailed || isUploadPaused) && createElement(View, {
     style: imageSelectedStyles
   }), !imageData ? createElement(View, {
     style: placeholderStyles
@@ -163,25 +217,55 @@ const ImageComponent = ({
     style: styles.imageUploadingIconContainer
   }, getIcon(ICON_TYPE.UPLOAD))) : createElement(View, {
     style: focalPoint && styles.focalPointContent
-  }, createElement(Image, {
+  }, Platform.isAndroid && createElement(Fragment, null, networkImageLoaded && networkURL && createElement(Animated.Image, {
+    style: imageStyles,
+    fadeDuration: 0,
+    source: {
+      uri: networkURL
+    },
+    ...(!focalPoint && {
+      resizeMethod: 'scale'
+    }),
+    resizeMode: imageResizeMode,
+    testID: `network-image-${url}`
+  }), !networkImageLoaded && !networkURL && createElement(Animated.Image, {
     style: imageStyles,
+    fadeDuration: 0,
     source: {
-      uri: url
+      uri: localURL
     },
     ...(!focalPoint && {
       resizeMethod: 'scale'
     }),
     resizeMode: imageResizeMode
-  })), isUploadFailed && retryMessage && createElement(View, {
-    style: [styles.imageContainer, styles.retryContainer]
+  })), Platform.isIOS && createElement(Fragment, null, createElement(Animated.Image, {
+    style: imageStyles,
+    source: {
+      uri: networkURL && networkImageLoaded ? networkURL : localURL || url
+    },
+    ...(!focalPoint && {
+      resizeMethod: 'scale'
+    }),
+    resizeMode: imageResizeMode,
+    testID: `network-image-${networkURL && networkImageLoaded ? networkURL : localURL || url}`
+  }), createElement(Image, {
+    source: {
+      uri: networkURL
+    },
+    style: styles.nonVisibleImage,
+    onLoad: () => {
+      setNetworkImageLoaded(true);
+    }
+  }))), (isUploadFailed || isUploadPaused) && retryMessage && createElement(View, {
+    style: [styles.imageContainer, retryContainerStyles]
   }, createElement(View, {
-    style: [styles.retryIcon, retryIcon && styles.customRetryIcon]
-  }, getIcon(ICON_TYPE.RETRY)), createElement(Text, {
-    style: styles.uploadFailedText
+    style: [retryIconStyles, retryIcon && styles.customRetryIcon]
+  }, isUploadPaused ? getIcon(ICON_TYPE.OFFLINE) : getIcon(ICON_TYPE.RETRY)), createElement(Text, {
+    style: uploadFailedTextStyles
   }, retryMessage))), editButton && isSelected && !isUploadInProgress && createElement(ImageEditingButton, {
     onSelectMediaUploadOption: onSelectMediaUploadOption,
     openMediaOptions: openMediaOptions,
-    url: !isUploadFailed && imageData && url,
+    url: !(isUploadFailed || isUploadPaused) && imageData && url,
     pickerOptions: mediaPickerOptions
   }));
 };

package/build-module/mobile/image/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["Image","RNImage","Text","View","FastImage","__","Icon","image","icon","usePreferredColorSchemeStyle","useEffect","useState","Platform","getImageWithFocalPointStyles","styles","SvgIconRetry","ImageEditingButton","ICON_TYPE","PLACEHOLDER","RETRY","UPLOAD","IMAGE_DEFAULT_FOCAL_POINT","x","y","ImageComponent","align","alt","editButton","focalPoint","height","imageHeight","highlightSelected","isSelected","shouldUseFastImage","isUploadFailed","isUploadInProgress","mediaPickerOptions","onImageDataLoad","onSelectMediaUploadOption","openMediaOptions","resizeMode","retryMessage","retryIcon","url","shapeStyle","style","width","imageWidth","imageData","setImageData","containerSize","setContainerSize","isAndroid","imageResizeMode","isCurrent","getSize","imgWidth","imgHeight","metaData","aspectRatio","onContainerLayout","event","nativeEvent","layout","getIcon","iconType","iconStyle","createElement","iconRetry","iconPlaceholderStyles","iconUploadStyles","iconPlaceholder","iconPlaceholderDark","iconUpload","iconUploadDark","placeholderStyles","imageContainerUpload","imageContainerUploadDark","imageContainerUploadWithFocalpoint","customWidth","wide","imageContainerStyles","imageContent","focalPointContainer","imageStyles","opacity","undefined","imageSelectedStyles","imageBorder","imageBorderDark","container","alignItems","onLayout","accessible","disabled","accessibilityLabel","accessibilityHint","accessibilityRole","key","imageUploadingIconContainer","focalPointContent","source","uri","resizeMethod","imageContainer","retryContainer","customRetryIcon","uploadFailedText","pickerOptions"],"sources":["@wordpress/components/src/mobile/image/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Image as RNImage, Text, View } from 'react-native';\nimport FastImage from 'react-native-fast-image';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Icon } from '@wordpress/components';\nimport { image as icon } from '@wordpress/icons';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { useEffect, useState, Platform } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getImageWithFocalPointStyles } from './utils';\nimport styles from './style.scss';\nimport SvgIconRetry from './icon-retry';\nimport ImageEditingButton from './image-editing-button';\n\nconst ICON_TYPE = {\n\tPLACEHOLDER: 'placeholder',\n\tRETRY: 'retry',\n\tUPLOAD: 'upload',\n};\n\nexport const IMAGE_DEFAULT_FOCAL_POINT = { x: 0.5, y: 0.5 };\n\nconst ImageComponent = ( {\n\talign,\n\talt,\n\teditButton = true,\n\tfocalPoint,\n\theight: imageHeight,\n\thighlightSelected = true,\n\tisSelected,\n\tshouldUseFastImage,\n\tisUploadFailed,\n\tisUploadInProgress,\n\tmediaPickerOptions,\n\tonImageDataLoad,\n\tonSelectMediaUploadOption,\n\topenMediaOptions,\n\tresizeMode,\n\tretryMessage,\n\tretryIcon,\n\turl,\n\tshapeStyle,\n\tstyle,\n\twidth: imageWidth,\n} ) => {\n\tconst [ imageData, setImageData ] = useState( null );\n\tconst [ containerSize, setContainerSize ] = useState( null );\n\n\t// Disabled for Android due to https://github.com/WordPress/gutenberg/issues/43149\n\tconst Image =\n\t\t! shouldUseFastImage || Platform.isAndroid ? RNImage : FastImage;\n\tconst imageResizeMode =\n\t\t! shouldUseFastImage || Platform.isAndroid\n\t\t\t? resizeMode\n\t\t\t: FastImage.resizeMode[ resizeMode ];\n\n\tuseEffect( () => {\n\t\tlet isCurrent = true;\n\t\tif ( url ) {\n\t\t\tRNImage.getSize( url, ( imgWidth, imgHeight ) => {\n\t\t\t\tif ( ! isCurrent ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst metaData = {\n\t\t\t\t\taspectRatio: imgWidth / imgHeight,\n\t\t\t\t\twidth: imgWidth,\n\t\t\t\t\theight: imgHeight,\n\t\t\t\t};\n\t\t\t\tsetImageData( metaData );\n\t\t\t\tif ( onImageDataLoad ) {\n\t\t\t\t\tonImageDataLoad( metaData );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t\treturn () => ( isCurrent = false );\n\t\t// Disable reason: deferring this refactor to the native team.\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ url ] );\n\n\tconst onContainerLayout = ( event ) => {\n\t\tconst { height, width } = event.nativeEvent.layout;\n\n\t\tif (\n\t\t\twidth !== 0 &&\n\t\t\theight !== 0 &&\n\t\t\t( containerSize?.width !== width ||\n\t\t\t\tcontainerSize?.height !== height )\n\t\t) {\n\t\t\tsetContainerSize( { width, height } );\n\t\t}\n\t};\n\n\tconst getIcon = ( iconType ) => {\n\t\tlet iconStyle;\n\t\tswitch ( iconType ) {\n\t\t\tcase ICON_TYPE.RETRY:\n\t\t\t\treturn (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ retryIcon || SvgIconRetry }\n\t\t\t\t\t\t{ ...styles.iconRetry }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase ICON_TYPE.PLACEHOLDER:\n\t\t\t\ticonStyle = iconPlaceholderStyles;\n\t\t\t\tbreak;\n\t\t\tcase ICON_TYPE.UPLOAD:\n\t\t\t\ticonStyle = iconUploadStyles;\n\t\t\t\tbreak;\n\t\t}\n\t\treturn <Icon icon={ icon } { ...iconStyle } />;\n\t};\n\n\tconst iconPlaceholderStyles = usePreferredColorSchemeStyle(\n\t\tstyles.iconPlaceholder,\n\t\tstyles.iconPlaceholderDark\n\t);\n\n\tconst iconUploadStyles = usePreferredColorSchemeStyle(\n\t\tstyles.iconUpload,\n\t\tstyles.iconUploadDark\n\t);\n\n\tconst placeholderStyles = [\n\t\tusePreferredColorSchemeStyle(\n\t\t\tstyles.imageContainerUpload,\n\t\t\tstyles.imageContainerUploadDark\n\t\t),\n\t\tfocalPoint && styles.imageContainerUploadWithFocalpoint,\n\t\timageHeight && { height: imageHeight },\n\t];\n\n\tconst customWidth =\n\t\timageData?.width < containerSize?.width\n\t\t\t? imageData?.width\n\t\t\t: styles.wide?.width;\n\n\tconst imageContainerStyles = [\n\t\tstyles.imageContent,\n\t\t{\n\t\t\twidth:\n\t\t\t\timageWidth === styles.wide?.width ||\n\t\t\t\t( imageData &&\n\t\t\t\t\timageWidth > 0 &&\n\t\t\t\t\timageWidth < containerSize?.width )\n\t\t\t\t\t? imageWidth\n\t\t\t\t\t: customWidth,\n\t\t},\n\t\tresizeMode && { width: styles.wide?.width },\n\t\tfocalPoint && styles.focalPointContainer,\n\t];\n\n\tconst imageStyles = [\n\t\t{\n\t\t\topacity: isUploadInProgress ? 0.3 : 1,\n\t\t\theight: containerSize?.height,\n\t\t},\n\t\t! resizeMode && {\n\t\t\taspectRatio: imageData?.aspectRatio,\n\t\t},\n\t\tfocalPoint && styles.focalPoint,\n\t\tfocalPoint &&\n\t\t\tgetImageWithFocalPointStyles(\n\t\t\t\tfocalPoint,\n\t\t\t\tcontainerSize,\n\t\t\t\timageData\n\t\t\t),\n\t\t! focalPoint &&\n\t\t\timageData &&\n\t\t\tcontainerSize && {\n\t\t\t\theight:\n\t\t\t\t\timageData?.width > containerSize?.width && ! imageWidth\n\t\t\t\t\t\t? containerSize?.width / imageData?.aspectRatio\n\t\t\t\t\t\t: undefined,\n\t\t\t},\n\t\timageHeight && { height: imageHeight },\n\t\tshapeStyle,\n\t];\n\tconst imageSelectedStyles = [\n\t\tusePreferredColorSchemeStyle(\n\t\t\tstyles.imageBorder,\n\t\t\tstyles.imageBorderDark\n\t\t),\n\t\t{ height: containerSize?.height },\n\t];\n\n\treturn (\n\t\t<View\n\t\t\tstyle={ [\n\t\t\t\tstyles.container,\n\t\t\t\t// Only set alignItems if an image exists because alignItems causes the placeholder\n\t\t\t\t// to disappear when an aligned image can't be downloaded\n\t\t\t\t// https://github.com/wordpress-mobile/gutenberg-mobile/issues/1592\n\t\t\t\timageData && align && { alignItems: align },\n\t\t\t\tstyle,\n\t\t\t] }\n\t\t\tonLayout={ onContainerLayout }\n\t\t>\n\t\t\t<View\n\t\t\t\taccessible\n\t\t\t\tdisabled={ ! isSelected }\n\t\t\t\taccessibilityLabel={ alt }\n\t\t\t\taccessibilityHint={ __( 'Double tap and hold to edit' ) }\n\t\t\t\taccessibilityRole={ 'imagebutton' }\n\t\t\t\tkey={ url }\n\t\t\t\tstyle={ imageContainerStyles }\n\t\t\t>\n\t\t\t\t{ isSelected &&\n\t\t\t\t\thighlightSelected &&\n\t\t\t\t\t! ( isUploadInProgress || isUploadFailed ) && (\n\t\t\t\t\t\t<View style={ imageSelectedStyles } />\n\t\t\t\t\t) }\n\n\t\t\t\t{ ! imageData ? (\n\t\t\t\t\t<View style={ placeholderStyles }>\n\t\t\t\t\t\t<View style={ styles.imageUploadingIconContainer }>\n\t\t\t\t\t\t\t{ getIcon( ICON_TYPE.UPLOAD ) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</View>\n\t\t\t\t) : (\n\t\t\t\t\t<View style={ focalPoint && styles.focalPointContent }>\n\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\tstyle={ imageStyles }\n\t\t\t\t\t\t\tsource={ { uri: url } }\n\t\t\t\t\t\t\t{ ...( ! focalPoint && {\n\t\t\t\t\t\t\t\tresizeMethod: 'scale',\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\tresizeMode={ imageResizeMode }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</View>\n\t\t\t\t) }\n\n\t\t\t\t{ isUploadFailed && retryMessage && (\n\t\t\t\t\t<View\n\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\tstyles.imageContainer,\n\t\t\t\t\t\t\tstyles.retryContainer,\n\t\t\t\t\t\t] }\n\t\t\t\t\t>\n\t\t\t\t\t\t<View\n\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\tstyles.retryIcon,\n\t\t\t\t\t\t\t\tretryIcon && styles.customRetryIcon,\n\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ getIcon( ICON_TYPE.RETRY ) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t\t<Text style={ styles.uploadFailedText }>\n\t\t\t\t\t\t\t{ retryMessage }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</View>\n\t\t\t\t) }\n\t\t\t</View>\n\n\t\t\t{ editButton && isSelected && ! isUploadInProgress && (\n\t\t\t\t<ImageEditingButton\n\t\t\t\t\tonSelectMediaUploadOption={ onSelectMediaUploadOption }\n\t\t\t\t\topenMediaOptions={ openMediaOptions }\n\t\t\t\t\turl={ ! isUploadFailed && imageData && url }\n\t\t\t\t\tpickerOptions={ mediaPickerOptions }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</View>\n\t);\n};\n\nexport default ImageComponent;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,KAAK,IAAIC,OAAO,EAAEC,IAAI,EAAEC,IAAI,QAAQ,cAAc;AAC3D,OAAOC,SAAS,MAAM,yBAAyB;;AAE/C;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,IAAI,QAAQ,uBAAuB;AAC5C,SAASC,KAAK,IAAIC,IAAI,QAAQ,kBAAkB;AAChD,SAASC,4BAA4B,QAAQ,oBAAoB;AACjE,SAASC,SAAS,EAAEC,QAAQ,EAAEC,QAAQ,QAAQ,oBAAoB;;AAElE;AACA;AACA;AACA,SAASC,4BAA4B,QAAQ,SAAS;AACtD,OAAOC,MAAM,MAAM,cAAc;AACjC,OAAOC,YAAY,MAAM,cAAc;AACvC,OAAOC,kBAAkB,MAAM,wBAAwB;AAEvD,MAAMC,SAAS,GAAG;EACjBC,WAAW,EAAE,aAAa;EAC1BC,KAAK,EAAE,OAAO;EACdC,MAAM,EAAE;AACT,CAAC;AAED,OAAO,MAAMC,yBAAyB,GAAG;EAAEC,CAAC,EAAE,GAAG;EAAEC,CAAC,EAAE;AAAI,CAAC;AAE3D,MAAMC,cAAc,GAAGA,CAAE;EACxBC,KAAK;EACLC,GAAG;EACHC,UAAU,GAAG,IAAI;EACjBC,UAAU;EACVC,MAAM,EAAEC,WAAW;EACnBC,iBAAiB,GAAG,IAAI;EACxBC,UAAU;EACVC,kBAAkB;EAClBC,cAAc;EACdC,kBAAkB;EAClBC,kBAAkB;EAClBC,eAAe;EACfC,yBAAyB;EACzBC,gBAAgB;EAChBC,UAAU;EACVC,YAAY;EACZC,SAAS;EACTC,GAAG;EACHC,UAAU;EACVC,KAAK;EACLC,KAAK,EAAEC;AACR,CAAC,KAAM;EACN,MAAM,CAAEC,SAAS,EAAEC,YAAY,CAAE,GAAGtC,QAAQ,CAAE,IAAK,CAAC;EACpD,MAAM,CAAEuC,aAAa,EAAEC,gBAAgB,CAAE,GAAGxC,QAAQ,CAAE,IAAK,CAAC;;EAE5D;EACA,MAAMX,KAAK,GACV,CAAEiC,kBAAkB,IAAIrB,QAAQ,CAACwC,SAAS,GAAGnD,OAAO,GAAGG,SAAS;EACjE,MAAMiD,eAAe,GACpB,CAAEpB,kBAAkB,IAAIrB,QAAQ,CAACwC,SAAS,GACvCZ,UAAU,GACVpC,SAAS,CAACoC,UAAU,CAAEA,UAAU,CAAE;EAEtC9B,SAAS,CAAE,MAAM;IAChB,IAAI4C,SAAS,GAAG,IAAI;IACpB,IAAKX,GAAG,EAAG;MACV1C,OAAO,CAACsD,OAAO,CAAEZ,GAAG,EAAE,CAAEa,QAAQ,EAAEC,SAAS,KAAM;QAChD,IAAK,CAAEH,SAAS,EAAG;UAClB;QACD;QACA,MAAMI,QAAQ,GAAG;UAChBC,WAAW,EAAEH,QAAQ,GAAGC,SAAS;UACjCX,KAAK,EAAEU,QAAQ;UACf3B,MAAM,EAAE4B;QACT,CAAC;QACDR,YAAY,CAAES,QAAS,CAAC;QACxB,IAAKrB,eAAe,EAAG;UACtBA,eAAe,CAAEqB,QAAS,CAAC;QAC5B;MACD,CAAE,CAAC;IACJ;IACA,OAAO,MAAQJ,SAAS,GAAG,KAAO;IAClC;IACA;IACA;EACD,CAAC,EAAE,CAAEX,GAAG,CAAG,CAAC;EAEZ,MAAMiB,iBAAiB,GAAKC,KAAK,IAAM;IACtC,MAAM;MAAEhC,MAAM;MAAEiB;IAAM,CAAC,GAAGe,KAAK,CAACC,WAAW,CAACC,MAAM;IAElD,IACCjB,KAAK,KAAK,CAAC,IACXjB,MAAM,KAAK,CAAC,KACVqB,aAAa,EAAEJ,KAAK,KAAKA,KAAK,IAC/BI,aAAa,EAAErB,MAAM,KAAKA,MAAM,CAAE,EAClC;MACDsB,gBAAgB,CAAE;QAAEL,KAAK;QAAEjB;MAAO,CAAE,CAAC;IACtC;EACD,CAAC;EAED,MAAMmC,OAAO,GAAKC,QAAQ,IAAM;IAC/B,IAAIC,SAAS;IACb,QAASD,QAAQ;MAChB,KAAKhD,SAAS,CAACE,KAAK;QACnB,OACCgD,aAAA,CAAC7D,IAAI;UACJE,IAAI,EAAGkC,SAAS,IAAI3B,YAAc;UAAA,GAC7BD,MAAM,CAACsD;QAAS,CACrB,CAAC;MAEJ,KAAKnD,SAAS,CAACC,WAAW;QACzBgD,SAAS,GAAGG,qBAAqB;QACjC;MACD,KAAKpD,SAAS,CAACG,MAAM;QACpB8C,SAAS,GAAGI,gBAAgB;QAC5B;IACF;IACA,OAAOH,aAAA,CAAC7D,IAAI;MAACE,IAAI,EAAGA,IAAM;MAAA,GAAM0D;IAAS,CAAI,CAAC;EAC/C,CAAC;EAED,MAAMG,qBAAqB,GAAG5D,4BAA4B,CACzDK,MAAM,CAACyD,eAAe,EACtBzD,MAAM,CAAC0D,mBACR,CAAC;EAED,MAAMF,gBAAgB,GAAG7D,4BAA4B,CACpDK,MAAM,CAAC2D,UAAU,EACjB3D,MAAM,CAAC4D,cACR,CAAC;EAED,MAAMC,iBAAiB,GAAG,CACzBlE,4BAA4B,CAC3BK,MAAM,CAAC8D,oBAAoB,EAC3B9D,MAAM,CAAC+D,wBACR,CAAC,EACDjD,UAAU,IAAId,MAAM,CAACgE,kCAAkC,EACvDhD,WAAW,IAAI;IAAED,MAAM,EAAEC;EAAY,CAAC,CACtC;EAED,MAAMiD,WAAW,GAChB/B,SAAS,EAAEF,KAAK,GAAGI,aAAa,EAAEJ,KAAK,GACpCE,SAAS,EAAEF,KAAK,GAChBhC,MAAM,CAACkE,IAAI,EAAElC,KAAK;EAEtB,MAAMmC,oBAAoB,GAAG,CAC5BnE,MAAM,CAACoE,YAAY,EACnB;IACCpC,KAAK,EACJC,UAAU,KAAKjC,MAAM,CAACkE,IAAI,EAAElC,KAAK,IAC/BE,SAAS,IACVD,UAAU,GAAG,CAAC,IACdA,UAAU,GAAGG,aAAa,EAAEJ,KAAO,GACjCC,UAAU,GACVgC;EACL,CAAC,EACDvC,UAAU,IAAI;IAAEM,KAAK,EAAEhC,MAAM,CAACkE,IAAI,EAAElC;EAAM,CAAC,EAC3ClB,UAAU,IAAId,MAAM,CAACqE,mBAAmB,CACxC;EAED,MAAMC,WAAW,GAAG,CACnB;IACCC,OAAO,EAAElD,kBAAkB,GAAG,GAAG,GAAG,CAAC;IACrCN,MAAM,EAAEqB,aAAa,EAAErB;EACxB,CAAC,EACD,CAAEW,UAAU,IAAI;IACfmB,WAAW,EAAEX,SAAS,EAAEW;EACzB,CAAC,EACD/B,UAAU,IAAId,MAAM,CAACc,UAAU,EAC/BA,UAAU,IACTf,4BAA4B,CAC3Be,UAAU,EACVsB,aAAa,EACbF,SACD,CAAC,EACF,CAAEpB,UAAU,IACXoB,SAAS,IACTE,aAAa,IAAI;IAChBrB,MAAM,EACLmB,SAAS,EAAEF,KAAK,GAAGI,aAAa,EAAEJ,KAAK,IAAI,CAAEC,UAAU,GACpDG,aAAa,EAAEJ,KAAK,GAAGE,SAAS,EAAEW,WAAW,GAC7C2B;EACL,CAAC,EACFxD,WAAW,IAAI;IAAED,MAAM,EAAEC;EAAY,CAAC,EACtCc,UAAU,CACV;EACD,MAAM2C,mBAAmB,GAAG,CAC3B9E,4BAA4B,CAC3BK,MAAM,CAAC0E,WAAW,EAClB1E,MAAM,CAAC2E,eACR,CAAC,EACD;IAAE5D,MAAM,EAAEqB,aAAa,EAAErB;EAAO,CAAC,CACjC;EAED,OACCsC,aAAA,CAAChE,IAAI;IACJ0C,KAAK,EAAG,CACP/B,MAAM,CAAC4E,SAAS;IAChB;IACA;IACA;IACA1C,SAAS,IAAIvB,KAAK,IAAI;MAAEkE,UAAU,EAAElE;IAAM,CAAC,EAC3CoB,KAAK,CACH;IACH+C,QAAQ,EAAGhC;EAAmB,GAE9BO,aAAA,CAAChE,IAAI;IACJ0F,UAAU;IACVC,QAAQ,EAAG,CAAE9D,UAAY;IACzB+D,kBAAkB,EAAGrE,GAAK;IAC1BsE,iBAAiB,EAAG3F,EAAE,CAAE,6BAA8B,CAAG;IACzD4F,iBAAiB,EAAG,aAAe;IACnCC,GAAG,EAAGvD,GAAK;IACXE,KAAK,EAAGoC;EAAsB,GAE5BjD,UAAU,IACXD,iBAAiB,IACjB,EAAII,kBAAkB,IAAID,cAAc,CAAE,IACzCiC,aAAA,CAAChE,IAAI;IAAC0C,KAAK,EAAG0C;EAAqB,CAAE,CACrC,EAEA,CAAEvC,SAAS,GACZmB,aAAA,CAAChE,IAAI;IAAC0C,KAAK,EAAG8B;EAAmB,GAChCR,aAAA,CAAChE,IAAI;IAAC0C,KAAK,EAAG/B,MAAM,CAACqF;EAA6B,GAC/CnC,OAAO,CAAE/C,SAAS,CAACG,MAAO,CACvB,CACD,CAAC,GAEP+C,aAAA,CAAChE,IAAI;IAAC0C,KAAK,EAAGjB,UAAU,IAAId,MAAM,CAACsF;EAAmB,GACrDjC,aAAA,CAACnE,KAAK;IACL6C,KAAK,EAAGuC,WAAa;IACrBiB,MAAM,EAAG;MAAEC,GAAG,EAAE3D;IAAI,CAAG;IAAA,IAChB,CAAEf,UAAU,IAAI;MACtB2E,YAAY,EAAE;IACf,CAAC;IACD/D,UAAU,EAAGa;EAAiB,CAC9B,CACI,CACN,EAECnB,cAAc,IAAIO,YAAY,IAC/B0B,aAAA,CAAChE,IAAI;IACJ0C,KAAK,EAAG,CACP/B,MAAM,CAAC0F,cAAc,EACrB1F,MAAM,CAAC2F,cAAc;EACnB,GAEHtC,aAAA,CAAChE,IAAI;IACJ0C,KAAK,EAAG,CACP/B,MAAM,CAAC4B,SAAS,EAChBA,SAAS,IAAI5B,MAAM,CAAC4F,eAAe;EACjC,GAED1C,OAAO,CAAE/C,SAAS,CAACE,KAAM,CACtB,CAAC,EACPgD,aAAA,CAACjE,IAAI;IAAC2C,KAAK,EAAG/B,MAAM,CAAC6F;EAAkB,GACpClE,YACG,CACD,CAEF,CAAC,EAELd,UAAU,IAAIK,UAAU,IAAI,CAAEG,kBAAkB,IACjDgC,aAAA,CAACnD,kBAAkB;IAClBsB,yBAAyB,EAAGA,yBAA2B;IACvDC,gBAAgB,EAAGA,gBAAkB;IACrCI,GAAG,EAAG,CAAET,cAAc,IAAIc,SAAS,IAAIL,GAAK;IAC5CiE,aAAa,EAAGxE;EAAoB,CACpC,CAEG,CAAC;AAET,CAAC;AAED,eAAeZ,cAAc"}
+{"version":3,"names":["Animated","Image","RNImage","Text","View","FastImage","__","Icon","image","offline","usePreferredColorSchemeStyle","useEffect","useState","useRef","Platform","getImageWithFocalPointStyles","styles","SvgIconRetry","ImageEditingButton","ICON_TYPE","OFFLINE","PLACEHOLDER","RETRY","UPLOAD","ImageComponent","align","alt","editButton","focalPoint","height","imageHeight","highlightSelected","isSelected","shouldUseFastImage","isUploadFailed","isUploadPaused","isUploadInProgress","mediaPickerOptions","onImageDataLoad","onSelectMediaUploadOption","openMediaOptions","resizeMode","retryMessage","retryIcon","url","shapeStyle","style","width","imageWidth","imageData","setImageData","containerSize","setContainerSize","localURL","setLocalURL","networkURL","setNetworkURL","networkImageLoaded","setNetworkImageLoaded","isAndroid","imageResizeMode","isCurrent","getSize","imgWidth","imgHeight","metaData","aspectRatio","startsWith","isIOS","prefetch","then","onContainerLayout","event","nativeEvent","layout","getIcon","iconType","icon","iconStyle","iconRetryStyles","iconOfflineStyles","iconPlaceholderStyles","iconUploadStyles","createElement","iconPlaceholder","iconPlaceholderDark","iconUpload","iconUploadDark","iconOffline","iconOfflineDark","retryIconStyles","retryIconDark","iconRetry","iconRetryDark","retryContainerStyles","retryContainer","retryContainerDark","uploadFailedTextStyles","uploadFailedText","uploadFailedTextDark","placeholderStyles","imageContainerUpload","imageContainerUploadDark","imageContainerUploadWithFocalpoint","customWidth","wide","imageContainerStyles","imageContent","focalPointContainer","opacityValue","Value","current","timing","toValue","duration","useNativeDriver","start","imageStyles","opacity","undefined","calculatedSelectedHeight","isNaN","imageSelectedStyles","imageBorder","imageBorderDark","container","alignItems","onLayout","accessible","disabled","accessibilityLabel","accessibilityHint","accessibilityRole","key","imageUploadingIconContainer","focalPointContent","Fragment","fadeDuration","source","uri","resizeMethod","testID","nonVisibleImage","onLoad","imageContainer","customRetryIcon","pickerOptions"],"sources":["@wordpress/components/src/mobile/image/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Animated, Image as RNImage, Text, View } from 'react-native';\nimport FastImage from 'react-native-fast-image';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Icon } from '@wordpress/components';\nimport { image, offline } from '@wordpress/icons';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { useEffect, useState, useRef, Platform } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getImageWithFocalPointStyles } from './utils';\nimport styles from './style.scss';\nimport SvgIconRetry from './icon-retry';\nimport ImageEditingButton from './image-editing-button';\n\nconst ICON_TYPE = {\n\tOFFLINE: 'offline',\n\tPLACEHOLDER: 'placeholder',\n\tRETRY: 'retry',\n\tUPLOAD: 'upload',\n};\n\nconst ImageComponent = ( {\n\talign,\n\talt,\n\teditButton = true,\n\tfocalPoint,\n\theight: imageHeight,\n\thighlightSelected = true,\n\tisSelected,\n\tshouldUseFastImage,\n\tisUploadFailed,\n\tisUploadPaused,\n\tisUploadInProgress,\n\tmediaPickerOptions,\n\tonImageDataLoad,\n\tonSelectMediaUploadOption,\n\topenMediaOptions,\n\tresizeMode,\n\tretryMessage,\n\tretryIcon,\n\turl,\n\tshapeStyle,\n\tstyle,\n\twidth: imageWidth,\n} ) => {\n\tconst [ imageData, setImageData ] = useState( null );\n\tconst [ containerSize, setContainerSize ] = useState( null );\n\tconst [ localURL, setLocalURL ] = useState( null );\n\tconst [ networkURL, setNetworkURL ] = useState( null );\n\tconst [ networkImageLoaded, setNetworkImageLoaded ] = useState( false );\n\n\t// Disabled for Android due to https://github.com/WordPress/gutenberg/issues/43149\n\tconst Image =\n\t\t! shouldUseFastImage || Platform.isAndroid ? RNImage : FastImage;\n\tconst imageResizeMode =\n\t\t! shouldUseFastImage || Platform.isAndroid\n\t\t\t? resizeMode\n\t\t\t: FastImage.resizeMode[ resizeMode ];\n\n\tuseEffect( () => {\n\t\tlet isCurrent = true;\n\t\tif ( url ) {\n\t\t\tRNImage.getSize( url, ( imgWidth, imgHeight ) => {\n\t\t\t\tif ( ! isCurrent ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst metaData = {\n\t\t\t\t\taspectRatio: imgWidth / imgHeight,\n\t\t\t\t\twidth: imgWidth,\n\t\t\t\t\theight: imgHeight,\n\t\t\t\t};\n\t\t\t\tsetImageData( metaData );\n\t\t\t\tif ( onImageDataLoad ) {\n\t\t\t\t\tonImageDataLoad( metaData );\n\t\t\t\t}\n\t\t\t} );\n\n\t\t\tif ( url.startsWith( 'file:///' ) ) {\n\t\t\t\tsetLocalURL( url );\n\t\t\t\tsetNetworkURL( null );\n\t\t\t\tsetNetworkImageLoaded( false );\n\t\t\t} else if ( url.startsWith( 'https://' ) ) {\n\t\t\t\tif ( Platform.isIOS ) {\n\t\t\t\t\tsetNetworkURL( url );\n\t\t\t\t} else if ( Platform.isAndroid ) {\n\t\t\t\t\tRNImage.prefetch( url ).then(\n\t\t\t\t\t\t() => {\n\t\t\t\t\t\t\tif ( ! isCurrent ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsetNetworkURL( url );\n\t\t\t\t\t\t\tsetNetworkImageLoaded( true );\n\t\t\t\t\t\t},\n\t\t\t\t\t\t() => {\n\t\t\t\t\t\t\t// This callback is called when the image fails to load,\n\t\t\t\t\t\t\t// but these events are handled by `isUploadFailed`\n\t\t\t\t\t\t\t// and `isUploadPaused` events instead.\n\t\t\t\t\t\t\t//\n\t\t\t\t\t\t\t// Ignoring the error event will persist the local image URI.\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn () => ( isCurrent = false );\n\t\t// Disable reason: deferring this refactor to the native team.\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ url ] );\n\n\tconst onContainerLayout = ( event ) => {\n\t\tconst { height, width } = event.nativeEvent.layout;\n\n\t\tif (\n\t\t\twidth !== 0 &&\n\t\t\theight !== 0 &&\n\t\t\t( containerSize?.width !== width ||\n\t\t\t\tcontainerSize?.height !== height )\n\t\t) {\n\t\t\tsetContainerSize( { width, height } );\n\t\t}\n\t};\n\n\tconst getIcon = ( iconType ) => {\n\t\tlet icon;\n\t\tlet iconStyle;\n\t\tswitch ( iconType ) {\n\t\t\tcase ICON_TYPE.RETRY:\n\t\t\t\ticon = retryIcon || SvgIconRetry;\n\t\t\t\ticonStyle = iconRetryStyles;\n\t\t\t\tbreak;\n\t\t\tcase ICON_TYPE.OFFLINE:\n\t\t\t\ticon = offline;\n\t\t\t\ticonStyle = iconOfflineStyles;\n\t\t\t\tbreak;\n\t\t\tcase ICON_TYPE.PLACEHOLDER:\n\t\t\t\ticon = image;\n\t\t\t\ticonStyle = iconPlaceholderStyles;\n\t\t\t\tbreak;\n\t\t\tcase ICON_TYPE.UPLOAD:\n\t\t\t\ticon = image;\n\t\t\t\ticonStyle = iconUploadStyles;\n\t\t\t\tbreak;\n\t\t}\n\t\treturn <Icon icon={ icon } { ...iconStyle } />;\n\t};\n\n\tconst iconPlaceholderStyles = usePreferredColorSchemeStyle(\n\t\tstyles.iconPlaceholder,\n\t\tstyles.iconPlaceholderDark\n\t);\n\n\tconst iconUploadStyles = usePreferredColorSchemeStyle(\n\t\tstyles.iconUpload,\n\t\tstyles.iconUploadDark\n\t);\n\n\tconst iconOfflineStyles = usePreferredColorSchemeStyle(\n\t\tstyles.iconOffline,\n\t\tstyles.iconOfflineDark\n\t);\n\n\tconst retryIconStyles = usePreferredColorSchemeStyle(\n\t\tstyles.retryIcon,\n\t\tstyles.retryIconDark\n\t);\n\n\tconst iconRetryStyles = usePreferredColorSchemeStyle(\n\t\tstyles.iconRetry,\n\t\tstyles.iconRetryDark\n\t);\n\n\tconst retryContainerStyles = usePreferredColorSchemeStyle(\n\t\tstyles.retryContainer,\n\t\tstyles.retryContainerDark\n\t);\n\n\tconst uploadFailedTextStyles = usePreferredColorSchemeStyle(\n\t\tstyles.uploadFailedText,\n\t\tstyles.uploadFailedTextDark\n\t);\n\n\tconst placeholderStyles = [\n\t\tusePreferredColorSchemeStyle(\n\t\t\tstyles.imageContainerUpload,\n\t\t\tstyles.imageContainerUploadDark\n\t\t),\n\t\tfocalPoint && styles.imageContainerUploadWithFocalpoint,\n\t\timageHeight && { height: imageHeight },\n\t];\n\n\tconst customWidth =\n\t\timageData?.width < containerSize?.width\n\t\t\t? imageData?.width\n\t\t\t: styles.wide?.width;\n\n\tconst imageContainerStyles = [\n\t\tstyles.imageContent,\n\t\t{\n\t\t\twidth:\n\t\t\t\timageWidth === styles.wide?.width ||\n\t\t\t\t( imageData &&\n\t\t\t\t\timageWidth > 0 &&\n\t\t\t\t\timageWidth < containerSize?.width )\n\t\t\t\t\t? imageWidth\n\t\t\t\t\t: customWidth,\n\t\t},\n\t\tresizeMode && { width: styles.wide?.width },\n\t\tfocalPoint && styles.focalPointContainer,\n\t];\n\n\tconst opacityValue = useRef( new Animated.Value( 1 ) ).current;\n\n\tuseEffect( () => {\n\t\tAnimated.timing( opacityValue, {\n\t\t\ttoValue: isUploadInProgress ? 0.3 : 1,\n\t\t\tduration: 100,\n\t\t\tuseNativeDriver: true,\n\t\t} ).start();\n\t}, [ isUploadInProgress, opacityValue ] );\n\n\tconst imageStyles = [\n\t\t{\n\t\t\topacity: opacityValue,\n\t\t\theight: containerSize?.height,\n\t\t},\n\t\t! resizeMode && {\n\t\t\taspectRatio: imageData?.aspectRatio,\n\t\t},\n\t\tfocalPoint && styles.focalPoint,\n\t\tfocalPoint &&\n\t\t\tgetImageWithFocalPointStyles(\n\t\t\t\tfocalPoint,\n\t\t\t\tcontainerSize,\n\t\t\t\timageData\n\t\t\t),\n\t\t! focalPoint &&\n\t\t\timageData &&\n\t\t\tcontainerSize && {\n\t\t\t\theight:\n\t\t\t\t\timageData?.width > containerSize?.width && ! imageWidth\n\t\t\t\t\t\t? containerSize?.width / imageData?.aspectRatio\n\t\t\t\t\t\t: undefined,\n\t\t\t},\n\t\timageHeight && { height: imageHeight },\n\t\tshapeStyle,\n\t];\n\n\t// On iOS, add 1 to height to account for the 1px non-visible image\n\t// that is used to determine when the network image has loaded\n\t// We also must verify that it is not NaN, as it can be NaN when the image is loading.\n\t// This is not necessary on Android as the non-visible image is not used.\n\tlet calculatedSelectedHeight;\n\tif ( Platform.isIOS ) {\n\t\tcalculatedSelectedHeight =\n\t\t\tcontainerSize && ! isNaN( containerSize.height )\n\t\t\t\t? containerSize.height + 1\n\t\t\t\t: 0;\n\t} else {\n\t\tcalculatedSelectedHeight = containerSize?.height;\n\t}\n\n\tconst imageSelectedStyles = [\n\t\tusePreferredColorSchemeStyle(\n\t\t\tstyles.imageBorder,\n\t\t\tstyles.imageBorderDark\n\t\t),\n\t\t{\n\t\t\theight: calculatedSelectedHeight,\n\t\t},\n\t];\n\n\treturn (\n\t\t<View\n\t\t\tstyle={ [\n\t\t\t\tstyles.container,\n\t\t\t\t// Only set alignItems if an image exists because alignItems causes the placeholder\n\t\t\t\t// to disappear when an aligned image can't be downloaded\n\t\t\t\t// https://github.com/wordpress-mobile/gutenberg-mobile/issues/1592\n\t\t\t\timageData && align && { alignItems: align },\n\t\t\t\tstyle,\n\t\t\t] }\n\t\t\tonLayout={ onContainerLayout }\n\t\t>\n\t\t\t<View\n\t\t\t\taccessible\n\t\t\t\tdisabled={ ! isSelected }\n\t\t\t\taccessibilityLabel={ alt }\n\t\t\t\taccessibilityHint={ __( 'Double tap and hold to edit' ) }\n\t\t\t\taccessibilityRole={ 'imagebutton' }\n\t\t\t\tkey={ url }\n\t\t\t\tstyle={ imageContainerStyles }\n\t\t\t>\n\t\t\t\t{ isSelected &&\n\t\t\t\t\thighlightSelected &&\n\t\t\t\t\t! (\n\t\t\t\t\t\tisUploadInProgress ||\n\t\t\t\t\t\tisUploadFailed ||\n\t\t\t\t\t\tisUploadPaused\n\t\t\t\t\t) && <View style={ imageSelectedStyles } /> }\n\n\t\t\t\t{ ! imageData ? (\n\t\t\t\t\t<View style={ placeholderStyles }>\n\t\t\t\t\t\t<View style={ styles.imageUploadingIconContainer }>\n\t\t\t\t\t\t\t{ getIcon( ICON_TYPE.UPLOAD ) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</View>\n\t\t\t\t) : (\n\t\t\t\t\t<View style={ focalPoint && styles.focalPointContent }>\n\t\t\t\t\t\t{ Platform.isAndroid && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{ networkImageLoaded && networkURL && (\n\t\t\t\t\t\t\t\t\t<Animated.Image\n\t\t\t\t\t\t\t\t\t\tstyle={ imageStyles }\n\t\t\t\t\t\t\t\t\t\tfadeDuration={ 0 }\n\t\t\t\t\t\t\t\t\t\tsource={ { uri: networkURL } }\n\t\t\t\t\t\t\t\t\t\t{ ...( ! focalPoint && {\n\t\t\t\t\t\t\t\t\t\t\tresizeMethod: 'scale',\n\t\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t\t\tresizeMode={ imageResizeMode }\n\t\t\t\t\t\t\t\t\t\ttestID={ `network-image-${ url }` }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t{ ! networkImageLoaded && ! networkURL && (\n\t\t\t\t\t\t\t\t\t<Animated.Image\n\t\t\t\t\t\t\t\t\t\tstyle={ imageStyles }\n\t\t\t\t\t\t\t\t\t\tfadeDuration={ 0 }\n\t\t\t\t\t\t\t\t\t\tsource={ { uri: localURL } }\n\t\t\t\t\t\t\t\t\t\t{ ...( ! focalPoint && {\n\t\t\t\t\t\t\t\t\t\t\tresizeMethod: 'scale',\n\t\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t\t\tresizeMode={ imageResizeMode }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ Platform.isIOS && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<Animated.Image\n\t\t\t\t\t\t\t\t\tstyle={ imageStyles }\n\t\t\t\t\t\t\t\t\tsource={ {\n\t\t\t\t\t\t\t\t\t\turi:\n\t\t\t\t\t\t\t\t\t\t\tnetworkURL && networkImageLoaded\n\t\t\t\t\t\t\t\t\t\t\t\t? networkURL\n\t\t\t\t\t\t\t\t\t\t\t\t: localURL || url,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t{ ...( ! focalPoint && {\n\t\t\t\t\t\t\t\t\t\tresizeMethod: 'scale',\n\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t\tresizeMode={ imageResizeMode }\n\t\t\t\t\t\t\t\t\ttestID={ `network-image-${\n\t\t\t\t\t\t\t\t\t\tnetworkURL && networkImageLoaded\n\t\t\t\t\t\t\t\t\t\t\t? networkURL\n\t\t\t\t\t\t\t\t\t\t\t: localURL || url\n\t\t\t\t\t\t\t\t\t}` }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\tsource={ { uri: networkURL } }\n\t\t\t\t\t\t\t\t\tstyle={ styles.nonVisibleImage }\n\t\t\t\t\t\t\t\t\tonLoad={ () => {\n\t\t\t\t\t\t\t\t\t\tsetNetworkImageLoaded( true );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t) }\n\n\t\t\t\t{ ( isUploadFailed || isUploadPaused ) && retryMessage && (\n\t\t\t\t\t<View\n\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\tstyles.imageContainer,\n\t\t\t\t\t\t\tretryContainerStyles,\n\t\t\t\t\t\t] }\n\t\t\t\t\t>\n\t\t\t\t\t\t<View\n\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\tretryIconStyles,\n\t\t\t\t\t\t\t\tretryIcon && styles.customRetryIcon,\n\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ isUploadPaused\n\t\t\t\t\t\t\t\t? getIcon( ICON_TYPE.OFFLINE )\n\t\t\t\t\t\t\t\t: getIcon( ICON_TYPE.RETRY ) }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t\t<Text style={ uploadFailedTextStyles }>\n\t\t\t\t\t\t\t{ retryMessage }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</View>\n\t\t\t\t) }\n\t\t\t</View>\n\n\t\t\t{ editButton && isSelected && ! isUploadInProgress && (\n\t\t\t\t<ImageEditingButton\n\t\t\t\t\tonSelectMediaUploadOption={ onSelectMediaUploadOption }\n\t\t\t\t\topenMediaOptions={ openMediaOptions }\n\t\t\t\t\turl={\n\t\t\t\t\t\t! ( isUploadFailed || isUploadPaused ) &&\n\t\t\t\t\t\timageData &&\n\t\t\t\t\t\turl\n\t\t\t\t\t}\n\t\t\t\t\tpickerOptions={ mediaPickerOptions }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</View>\n\t);\n};\n\nexport default ImageComponent;\n"],"mappings":"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"}

package/build-module/mobile/keyboard-avoiding-view/index.ios.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * External dependencies
  */

package/build-module/mobile/keyboard-aware-flat-list/index.android.js

@@ -1,32 +1,66 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * External dependencies
  */
 import { FlatList } from 'react-native';
-import Animated, { useAnimatedScrollHandler } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useCallback, useImperativeHandle } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
+import useScroll from './use-scroll';
 import KeyboardAvoidingView from '../keyboard-avoiding-view';
 const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
 export const KeyboardAwareFlatList = ({
-  innerRef,
   onScroll,
   ...props
-}) => {
-  const scrollHandler = useAnimatedScrollHandler({
+}, ref) => {
+  const {
+    extraScrollHeight,
+    scrollEnabled,
+    shouldPreventAutomaticScroll
+  } = props;
+  const {
+    scrollViewRef,
+    scrollHandler,
+    scrollToSection,
+    scrollToElement,
+    onContentSizeChange,
+    lastScrollTo
+  } = useScroll({
+    scrollEnabled,
+    shouldPreventAutomaticScroll,
+    extraScrollHeight,
     onScroll
   });
+  const getFlatListRef = useCallback(flatListRef => {
+    // On Android, we get the ref of the associated scroll
+    // view to the FlatList.
+    scrollViewRef.current = flatListRef?.getNativeScrollRef();
+  }, [scrollViewRef]);
+  useImperativeHandle(ref, () => {
+    return {
+      scrollViewRef: scrollViewRef.current,
+      scrollToSection,
+      scrollToElement,
+      lastScrollTo
+    };
+  });
   return createElement(KeyboardAvoidingView, {
     style: {
       flex: 1
     }
   }, createElement(AnimatedFlatList, {
-    ref: innerRef,
+    ref: getFlatListRef,
     onScroll: scrollHandler,
+    onContentSizeChange: onContentSizeChange,
     ...props
   }));
 };
-export default KeyboardAwareFlatList;
+export default forwardRef(KeyboardAwareFlatList);
 //# sourceMappingURL=index.android.js.map

package/build-module/mobile/keyboard-aware-flat-list/index.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["FlatList","Animated","useAnimatedScrollHandler","KeyboardAvoidingView","AnimatedFlatList","createAnimatedComponent","KeyboardAwareFlatList","innerRef","onScroll","props","scrollHandler","createElement","style","flex","ref"],"sources":["@wordpress/components/src/mobile/keyboard-aware-flat-list/index.android.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { FlatList } from 'react-native';\nimport Animated, { useAnimatedScrollHandler } from 'react-native-reanimated';\n\n/**\n * Internal dependencies\n */\nimport KeyboardAvoidingView from '../keyboard-avoiding-view';\n\nconst AnimatedFlatList = Animated.createAnimatedComponent( FlatList );\n\nexport const KeyboardAwareFlatList = ( { innerRef, onScroll, ...props } ) => {\n\tconst scrollHandler = useAnimatedScrollHandler( { onScroll } );\n\treturn (\n\t\t<KeyboardAvoidingView style={ { flex: 1 } }>\n\t\t\t<AnimatedFlatList\n\t\t\t\tref={ innerRef }\n\t\t\t\tonScroll={ scrollHandler }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t</KeyboardAvoidingView>\n\t);\n};\n\nexport default KeyboardAwareFlatList;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,QAAQ,QAAQ,cAAc;AACvC,OAAOC,QAAQ,IAAIC,wBAAwB,QAAQ,yBAAyB;;AAE5E;AACA;AACA;AACA,OAAOC,oBAAoB,MAAM,2BAA2B;AAE5D,MAAMC,gBAAgB,GAAGH,QAAQ,CAACI,uBAAuB,CAAEL,QAAS,CAAC;AAErE,OAAO,MAAMM,qBAAqB,GAAGA,CAAE;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,KAAM;EAC5E,MAAMC,aAAa,GAAGR,wBAAwB,CAAE;IAAEM;EAAS,CAAE,CAAC;EAC9D,OACCG,aAAA,CAACR,oBAAoB;IAACS,KAAK,EAAG;MAAEC,IAAI,EAAE;IAAE;EAAG,GAC1CF,aAAA,CAACP,gBAAgB;IAChBU,GAAG,EAAGP,QAAU;IAChBC,QAAQ,EAAGE,aAAe;IAAA,GACrBD;EAAK,CACV,CACoB,CAAC;AAEzB,CAAC;AAED,eAAeH,qBAAqB"}
+{"version":3,"names":["FlatList","Animated","forwardRef","useCallback","useImperativeHandle","useScroll","KeyboardAvoidingView","AnimatedFlatList","createAnimatedComponent","KeyboardAwareFlatList","onScroll","props","ref","extraScrollHeight","scrollEnabled","shouldPreventAutomaticScroll","scrollViewRef","scrollHandler","scrollToSection","scrollToElement","onContentSizeChange","lastScrollTo","getFlatListRef","flatListRef","current","getNativeScrollRef","createElement","style","flex"],"sources":["@wordpress/components/src/mobile/keyboard-aware-flat-list/index.android.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { FlatList } from 'react-native';\nimport Animated from 'react-native-reanimated';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tforwardRef,\n\tuseCallback,\n\tuseImperativeHandle,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useScroll from './use-scroll';\nimport KeyboardAvoidingView from '../keyboard-avoiding-view';\n\nconst AnimatedFlatList = Animated.createAnimatedComponent( FlatList );\n\nexport const KeyboardAwareFlatList = ( { onScroll, ...props }, ref ) => {\n\tconst { extraScrollHeight, scrollEnabled, shouldPreventAutomaticScroll } =\n\t\tprops;\n\n\tconst {\n\t\tscrollViewRef,\n\t\tscrollHandler,\n\t\tscrollToSection,\n\t\tscrollToElement,\n\t\tonContentSizeChange,\n\t\tlastScrollTo,\n\t} = useScroll( {\n\t\tscrollEnabled,\n\t\tshouldPreventAutomaticScroll,\n\t\textraScrollHeight,\n\t\tonScroll,\n\t} );\n\n\tconst getFlatListRef = useCallback(\n\t\t( flatListRef ) => {\n\t\t\t// On Android, we get the ref of the associated scroll\n\t\t\t// view to the FlatList.\n\t\t\tscrollViewRef.current = flatListRef?.getNativeScrollRef();\n\t\t},\n\t\t[ scrollViewRef ]\n\t);\n\n\tuseImperativeHandle( ref, () => {\n\t\treturn {\n\t\t\tscrollViewRef: scrollViewRef.current,\n\t\t\tscrollToSection,\n\t\t\tscrollToElement,\n\t\t\tlastScrollTo,\n\t\t};\n\t} );\n\n\treturn (\n\t\t<KeyboardAvoidingView style={ { flex: 1 } }>\n\t\t\t<AnimatedFlatList\n\t\t\t\tref={ getFlatListRef }\n\t\t\t\tonScroll={ scrollHandler }\n\t\t\t\tonContentSizeChange={ onContentSizeChange }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t</KeyboardAvoidingView>\n\t);\n};\n\nexport default forwardRef( KeyboardAwareFlatList );\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,QAAQ,QAAQ,cAAc;AACvC,OAAOC,QAAQ,MAAM,yBAAyB;;AAE9C;AACA;AACA;AACA,SACCC,UAAU,EACVC,WAAW,EACXC,mBAAmB,QACb,oBAAoB;;AAE3B;AACA;AACA;AACA,OAAOC,SAAS,MAAM,cAAc;AACpC,OAAOC,oBAAoB,MAAM,2BAA2B;AAE5D,MAAMC,gBAAgB,GAAGN,QAAQ,CAACO,uBAAuB,CAAER,QAAS,CAAC;AAErE,OAAO,MAAMS,qBAAqB,GAAGA,CAAE;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAM;EACvE,MAAM;IAAEC,iBAAiB;IAAEC,aAAa;IAAEC;EAA6B,CAAC,GACvEJ,KAAK;EAEN,MAAM;IACLK,aAAa;IACbC,aAAa;IACbC,eAAe;IACfC,eAAe;IACfC,mBAAmB;IACnBC;EACD,CAAC,GAAGhB,SAAS,CAAE;IACdS,aAAa;IACbC,4BAA4B;IAC5BF,iBAAiB;IACjBH;EACD,CAAE,CAAC;EAEH,MAAMY,cAAc,GAAGnB,WAAW,CAC/BoB,WAAW,IAAM;IAClB;IACA;IACAP,aAAa,CAACQ,OAAO,GAAGD,WAAW,EAAEE,kBAAkB,CAAC,CAAC;EAC1D,CAAC,EACD,CAAET,aAAa,CAChB,CAAC;EAEDZ,mBAAmB,CAAEQ,GAAG,EAAE,MAAM;IAC/B,OAAO;MACNI,aAAa,EAAEA,aAAa,CAACQ,OAAO;MACpCN,eAAe;MACfC,eAAe;MACfE;IACD,CAAC;EACF,CAAE,CAAC;EAEH,OACCK,aAAA,CAACpB,oBAAoB;IAACqB,KAAK,EAAG;MAAEC,IAAI,EAAE;IAAE;EAAG,GAC1CF,aAAA,CAACnB,gBAAgB;IAChBK,GAAG,EAAGU,cAAgB;IACtBZ,QAAQ,EAAGO,aAAe;IAC1BG,mBAAmB,EAAGA,mBAAqB;IAAA,GACtCT;EAAK,CACV,CACoB,CAAC;AAEzB,CAAC;AAED,eAAeT,UAAU,CAAEO,qBAAsB,CAAC"}

package/build-module/mobile/keyboard-aware-flat-list/index.ios.js

@@ -1,113 +1,83 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * External dependencies
  */
 
-import { ScrollView, FlatList, useWindowDimensions } from 'react-native';
-import Animated, { useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated';
+import { ScrollView, FlatList } from 'react-native';
+import Animated from 'react-native-reanimated';
 
 /**
  * WordPress dependencies
  */
-import { useCallback, useEffect, useRef } from '@wordpress/element';
+import { useCallback, useEffect, forwardRef, useImperativeHandle } from '@wordpress/element';
 import { useThrottle } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
+import useScroll from './use-scroll';
 import useTextInputOffset from './use-text-input-offset';
-import useKeyboardOffset from './use-keyboard-offset';
-import useScrollToTextInput from './use-scroll-to-text-input';
 import useTextInputCaretPosition from './use-text-input-caret-position';
+const DEFAULT_FONT_SIZE = 16;
 const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
 
+/** @typedef {import('@wordpress/element').RefObject} RefObject */
 /**
  * React component that provides a FlatList that is aware of the keyboard state and can scroll
  * to the currently focused TextInput.
  *
- * @param {Object}   props                              Component props.
- * @param {number}   props.extraScrollHeight            Extra scroll height for the content.
- * @param {Function} props.innerRef                     Function to pass the ScrollView ref to the parent component.
- * @param {Function} props.onScroll                     Function to be called when the list is scrolled.
- * @param {boolean}  props.scrollEnabled                Whether the list can be scrolled.
- * @param {Object}   props.scrollViewStyle              Additional style for the ScrollView component.
- * @param {boolean}  props.shouldPreventAutomaticScroll Whether to prevent scrolling when there's a Keyboard offset set.
- * @param {Object}   props...                           Other props to pass to the FlatList component.
- * @return {WPComponent} KeyboardAwareFlatList component.
+ * @param {Object}    props                              Component props.
+ * @param {number}    props.extraScrollHeight            Extra scroll height for the content.
+ * @param {Function}  props.onScroll                     Function to be called when the list is scrolled.
+ * @param {boolean}   props.scrollEnabled                Whether the list can be scrolled.
+ * @param {Object}    props.scrollViewStyle              Additional style for the ScrollView component.
+ * @param {boolean}   props.shouldPreventAutomaticScroll Whether to prevent scrolling when there's a Keyboard offset set.
+ * @param {Object}    props...                           Other props to pass to the FlatList component.
+ * @param {RefObject} ref
+ * @return {Component} KeyboardAwareFlatList component.
  */
 export const KeyboardAwareFlatList = ({
   extraScrollHeight,
-  innerRef,
   onScroll,
   scrollEnabled,
   scrollViewStyle,
   shouldPreventAutomaticScroll,
   ...props
-}) => {
-  const scrollViewRef = useRef();
-  const scrollViewMeasurements = useRef();
-  const scrollViewYOffset = useSharedValue(-1);
+}, ref) => {
   const {
-    height: windowHeight,
-    width: windowWidth
-  } = useWindowDimensions();
-  const isLandscape = windowWidth >= windowHeight;
-  const [keyboardOffset] = useKeyboardOffset(scrollEnabled, shouldPreventAutomaticScroll);
-  const [currentCaretData] = useTextInputCaretPosition(scrollEnabled);
+    scrollViewRef,
+    scrollHandler,
+    keyboardOffset,
+    scrollToSection,
+    scrollToElement,
+    onContentSizeChange,
+    lastScrollTo
+  } = useScroll({
+    scrollEnabled,
+    shouldPreventAutomaticScroll,
+    extraScrollHeight,
+    onScroll,
+    onSizeChange
+  });
   const [getTextInputOffset] = useTextInputOffset(scrollEnabled, scrollViewRef);
-  const [scrollToTextInputOffset] = useScrollToTextInput(extraScrollHeight, keyboardOffset, scrollEnabled, scrollViewMeasurements, scrollViewRef, scrollViewYOffset);
   const onScrollToTextInput = useThrottle(useCallback(async caret => {
+    const {
+      caretHeight = DEFAULT_FONT_SIZE
+    } = caret !== null && caret !== void 0 ? caret : {};
     const textInputOffset = await getTextInputOffset(caret);
     const hasTextInputOffset = textInputOffset !== null;
     if (hasTextInputOffset) {
-      scrollToTextInputOffset(caret, textInputOffset);
+      scrollToSection(textInputOffset, caretHeight);
     }
-  }, [getTextInputOffset, scrollToTextInputOffset]), 200, {
+  }, [getTextInputOffset, scrollToSection]), 200, {
     leading: false
   });
+  const [currentCaretData] = useTextInputCaretPosition(scrollEnabled);
+  const onSizeChange = useCallback(() => onScrollToTextInput(currentCaretData), [currentCaretData, onScrollToTextInput]);
   useEffect(() => {
     onScrollToTextInput(currentCaretData);
   }, [currentCaretData, onScrollToTextInput]);
 
-  // When the orientation changes, the ScrollView measurements
-  // need to be re-calculated.
-  useEffect(() => {
-    scrollViewMeasurements.current = null;
-  }, [isLandscape]);
-  const scrollHandler = useAnimatedScrollHandler({
-    onScroll: event => {
-      const {
-        contentOffset
-      } = event;
-      scrollViewYOffset.value = contentOffset.y;
-      onScroll(event);
-    }
-  });
-  const measureScrollView = useCallback(() => {
-    if (scrollViewRef.current) {
-      const scrollRef = scrollViewRef.current.getNativeScrollRef();
-      scrollRef.measureInWindow((_x, y, width, height) => {
-        scrollViewMeasurements.current = {
-          y,
-          width,
-          height
-        };
-      });
-    }
-  }, []);
-  const onContentSizeChange = useCallback(() => {
-    onScrollToTextInput(currentCaretData);
-
-    // Sets the first values when the content size changes.
-    if (!scrollViewMeasurements.current) {
-      measureScrollView();
-    }
-  }, [measureScrollView, onScrollToTextInput, currentCaretData]);
-  const getRef = useCallback(ref => {
-    scrollViewRef.current = ref;
-    innerRef(ref);
-  }, [innerRef]);
-
   // Adds content insets when the keyboard is opened to have
   // extra padding at the bottom.
   const contentInset = {
@@ -116,13 +86,21 @@ export const KeyboardAwareFlatList = ({
   const style = [{
     flex: 1
   }, scrollViewStyle];
+  useImperativeHandle(ref, () => {
+    return {
+      scrollViewRef: scrollViewRef.current,
+      scrollToSection,
+      scrollToElement,
+      lastScrollTo
+    };
+  });
   return createElement(AnimatedScrollView, {
     automaticallyAdjustContentInsets: false,
     contentInset: contentInset,
     keyboardShouldPersistTaps: "handled",
     onContentSizeChange: onContentSizeChange,
     onScroll: scrollHandler,
-    ref: getRef,
+    ref: scrollViewRef,
     scrollEnabled: scrollEnabled,
     scrollEventThrottle: 16,
     style: style
@@ -131,5 +109,5 @@ export const KeyboardAwareFlatList = ({
     scrollEnabled: false
   }));
 };
-export default KeyboardAwareFlatList;
+export default forwardRef(KeyboardAwareFlatList);
 //# sourceMappingURL=index.ios.js.map