From e71ee485de0b4b67bbe5fb5f5d8c02f98ad9df7b Mon Sep 17 00:00:00 2001
From: Gerardo Pacheco <gerardo.pacheco@automattic.com>
Date: Mon, 3 Feb 2020 17:41:03 +0100
Subject: [PATCH] RNMobile - ImageWithFocalPoint - Move container logic to
 component and prettier formatting

---
 .../block-library/src/cover/edit.native.js    | 19 +-----
 .../image-with-focalpoint/index.native.js     | 68 ++++++++++++++-----
 .../image-with-focalpoint/style.native.scss   |  6 ++
 3 files changed, 60 insertions(+), 33 deletions(-)

diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
index 2d5fb48197ea12..aa415c95f20aa4 100644
--- a/packages/block-library/src/cover/edit.native.js
+++ b/packages/block-library/src/cover/edit.native.js
@@ -22,7 +22,7 @@ import {
 } from '@wordpress/block-editor';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
-import { useState, useEffect } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 import { cover as icon } from '@wordpress/icons';
 
 /**
@@ -69,7 +69,6 @@ const Cover = ( {
 		minHeight,
 		url,
 	} = attributes;
-	const [ containerSize, setContainerSize ] = useState( null );
 	const CONTAINER_HEIGHT = minHeight || COVER_DEFAULT_HEIGHT;
 
 	// Used to set a default color for its InnerBlocks
@@ -96,11 +95,6 @@ const Cover = ( {
 		setAttributes( { dimRatio: value } );
 	};
 
-	const onContainerLayout = ( event ) => {
-		const { height, width } = event.nativeEvent.layout;
-		setContainerSize( { width, height } );
-	};
-
 	const getOpacity = () => {
 		// Set opacity to 1 while video support is not available
 		if ( VIDEO_BACKGROUND_TYPE === backgroundType ) {
@@ -181,10 +175,7 @@ const Cover = ( {
 	return (
 		<View style={ containerStyles }>
 			{ controls }
-			<View
-				onLayout={ onContainerLayout }
-				style={ [ styles.backgroundContainer ] }
-			>
+			<View style={ [ styles.backgroundContainer ] }>
 				<View
 					style={ [
 						styles.content,
@@ -198,12 +189,6 @@ const Cover = ( {
 
 				{ IMAGE_BACKGROUND_TYPE === backgroundType && (
 					<ImageWithFocalPoint
-						containerSize={ containerSize }
-						contentHeight={
-							containerSize
-								? containerSize.height
-								: CONTAINER_HEIGHT
-						}
 						focalPoint={ focalPoint }
 						url={ url }
 					/>
diff --git a/packages/components/src/mobile/image-with-focalpoint/index.native.js b/packages/components/src/mobile/image-with-focalpoint/index.native.js
index bf329faf3779e8..0e542eaad82770 100644
--- a/packages/components/src/mobile/image-with-focalpoint/index.native.js
+++ b/packages/components/src/mobile/image-with-focalpoint/index.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Image } from 'react-native';
+import { Image, View } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -13,23 +13,33 @@ import { useState, useEffect, memo } from '@wordpress/element';
  */
 import styles from './style.scss';
 
-const ImageWithFocalPoint = ( {
-	containerSize,
-	contentHeight,
-	focalPoint,
-	url,
-} ) => {
+const ImageWithFocalPoint = ( { focalPoint, url } ) => {
 	const [ originalImageData, setOriginalImageData ] = useState( null );
+	const [ containerSize, setContainerSize ] = useState( null );
 
 	useEffect( () => {
 		if ( url ) {
 			Image.getSize( url, ( width, height ) => {
-				setOriginalImageData( { width, height, aspectRatio: width / height } );
+				setOriginalImageData( {
+					width,
+					height,
+					aspectRatio: width / height,
+				} );
 			} );
 		}
 	}, [] );
 
-	const getFocalPointOffset = ( imageRatio, container, imageSize, focusPoint ) => {
+	const onContainerLayout = ( event ) => {
+		const { height, width } = event.nativeEvent.layout;
+		setContainerSize( { width, height } );
+	};
+
+	const getFocalPointOffset = (
+		imageRatio,
+		container,
+		imageSize,
+		focusPoint
+	) => {
 		const containerCenter = Math.floor( container / 2 );
 		const scaledImage = Math.floor( imageSize / imageRatio );
 		const focus = Math.floor( focusPoint * scaledImage );
@@ -59,11 +69,21 @@ const ImageWithFocalPoint = ( {
 			imageStyle.resizeMode = 'stretch';
 
 			if ( widthRatio > heightRatio ) {
-				horizontalOffset = getFocalPointOffset( heightRatio, containerSize.width, originalImageData.width, focalPoint.x );
+				horizontalOffset = getFocalPointOffset(
+					heightRatio,
+					containerSize.width,
+					originalImageData.width,
+					focalPoint.x
+				);
 				imageStyle.width = undefined;
 				imageStyle.left = horizontalOffset;
 			} else if ( widthRatio < heightRatio ) {
-				verticalOffset = getFocalPointOffset( widthRatio, containerSize.height, originalImageData.height, focalPoint.y );
+				verticalOffset = getFocalPointOffset(
+					widthRatio,
+					containerSize.height,
+					originalImageData.height,
+					focalPoint.y
+				);
 				imageStyle.height = undefined;
 				imageStyle.top = verticalOffset;
 			}
@@ -74,11 +94,27 @@ const ImageWithFocalPoint = ( {
 		return imageStyle;
 	};
 
-	return <Image
-		aspectRatio={ originalImageData ? originalImageData.aspectRatio : undefined }
-		style={ [ styles.image, { height: contentHeight }, getImageStyles() ] }
-		source={ { uri: url } }
-	/>;
+	return (
+		<View style={ styles.container } onLayout={ onContainerLayout }>
+			<Image
+				aspectRatio={
+					originalImageData
+						? originalImageData.aspectRatio
+						: undefined
+				}
+				style={ [
+					styles.image,
+					{
+						height: containerSize
+							? containerSize.height
+							: undefined,
+					},
+					getImageStyles(),
+				] }
+				source={ { uri: url } }
+			/>
+		</View>
+	);
 };
 
 export default memo( ImageWithFocalPoint );
diff --git a/packages/components/src/mobile/image-with-focalpoint/style.native.scss b/packages/components/src/mobile/image-with-focalpoint/style.native.scss
index b53226c063e88b..140d8f514569bd 100644
--- a/packages/components/src/mobile/image-with-focalpoint/style.native.scss
+++ b/packages/components/src/mobile/image-with-focalpoint/style.native.scss
@@ -1,3 +1,9 @@
+.container {
+	height: 100%;
+	position: absolute;
+	width: 100%;
+}
+
 .image {
 	position: absolute;
 	width: 100%;