From 1b88f233ddb7decfd01d2c547bd0d0d13e52b168 Mon Sep 17 00:00:00 2001
From: Siobhan Bamber <SiobhyB@users.noreply.github.com>
Date: Tue, 3 Aug 2021 19:28:59 +0100
Subject: [PATCH] [RNMobile] Fix BottomSheet.SubSheet/TextInput Conflict
 (#33845)

* Remove 'BottomSheetScreen' component

The 'BottomSheetScreen' component was introduced in the following commit in order to correct a render error related to the 'setIsFullScreen' method: https://github.com/WordPress/gutenberg/pull/33240/commits/d650b4f1df6e1699c7c45819a8afd4a2ec39a08e#diff-d16d37d09ff59dce57c087e978ac5536503cb1642ec2b0ecdba9536f5c695b95R20

The way the component's currently rendering is causing a conflict with the TextInput component, however.

With this commit, the component's removed, along with the 'setIsFullScreen' method (the method will be re-introduced in the following commits).

* Refactor 'setIsFullScreen' method

With this commit, the 'setIsFullScreen' method is added back to the component. This time, it's added to its own separate 'useEffect' function.

* Remove 'BottomSheetConsumer'

'BottomSheetConsumer' is no longer necessary as we're now using 'useContext' to pull in 'setIsFullScreen'.

Further discussion here: https://github.com/WordPress/gutenberg/pull/33845#discussion_r681939450

* Refactor reference to 'children'

As 'BottomSheetConsumer' was removed in https://github.com/WordPress/gutenberg/pull/33845/commits/523239866d5b502672695af6daa30453b57d26ac, 'children' no longer needs to be returned as part of a function. In fact, this results in an error.

With this commit, the function surrounding the reference to 'children' is removed.
---
 .../bottom-sheet/sub-sheet/index.native.js    | 27 +++++++------------
 1 file changed, 10 insertions(+), 17 deletions(-)

diff --git a/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js
index 8654dc918e2e3d..f51b07cffd9c14 100644
--- a/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js
+++ b/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js
@@ -6,8 +6,8 @@ import { SafeAreaView } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Children, useEffect } from '@wordpress/element';
-import { createSlotFill, BottomSheetConsumer } from '@wordpress/components';
+import { Children, useEffect, useContext } from '@wordpress/element';
+import { createSlotFill, BottomSheetContext } from '@wordpress/components';
 
 const { Fill, Slot } = createSlotFill( 'BottomSheetSubSheet' );
 
@@ -17,26 +17,19 @@ const BottomSheetSubSheet = ( {
 	showSheet,
 	isFullScreen,
 } ) => {
-	const BottomSheetScreen = ( { onMount } ) => {
-		useEffect( onMount, [] );
-		return children ?? null;
-	};
+	const { setIsFullScreen } = useContext( BottomSheetContext );
+
+	useEffect( () => {
+		if ( showSheet ) {
+			setIsFullScreen( isFullScreen );
+		}
+	}, [ showSheet, isFullScreen ] );
 
 	return (
 		<>
 			{ showSheet && (
 				<Fill>
-					<SafeAreaView>
-						<BottomSheetConsumer>
-							{ ( { setIsFullScreen } ) => (
-								<BottomSheetScreen
-									onMount={ () =>
-										setIsFullScreen( isFullScreen )
-									}
-								/>
-							) }
-						</BottomSheetConsumer>
-					</SafeAreaView>
+					<SafeAreaView>{ children }</SafeAreaView>
 				</Fill>
 			) }
 			{ Children.count( children ) > 0 && navigationButton }