From 3b87f3c5f7c84c6cd0e2b515414c0b9be170e8d9 Mon Sep 17 00:00:00 2001
From: kacperkapusciak <kacper.kapusciak@swmansion.com>
Date: Mon, 12 Feb 2024 16:31:54 +0100
Subject: [PATCH 1/4] Pass flex:1 by default to GestureHandlerRootView

---
 src/components/GestureHandlerRootView.android.tsx | 15 +++++++++++++--
 src/components/GestureHandlerRootView.tsx         | 12 ++++++++++--
 src/components/GestureHandlerRootView.web.tsx     | 12 ++++++++++--
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/components/GestureHandlerRootView.android.tsx b/src/components/GestureHandlerRootView.android.tsx
index 58a13dda9e..01abdb04a9 100644
--- a/src/components/GestureHandlerRootView.android.tsx
+++ b/src/components/GestureHandlerRootView.android.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
-import { ViewProps } from 'react-native';
+import { ViewProps, StyleSheet } from 'react-native';
 import { maybeInitializeFabric } from '../init';
 import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
 import GestureHandlerRootViewNativeComponent from '../specs/RNGestureHandlerRootViewNativeComponent';
@@ -16,9 +16,20 @@ export default function GestureHandlerRootView(
   // to make sure it's called only once)
   maybeInitializeFabric();
 
+  const { style, ...rest } = props;
+
   return (
     <GestureHandlerRootViewContext.Provider value>
-      <GestureHandlerRootViewNativeComponent {...props} />
+      <GestureHandlerRootViewNativeComponent
+        {...rest}
+        style={style ?? styles.container}
+      />
     </GestureHandlerRootViewContext.Provider>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
diff --git a/src/components/GestureHandlerRootView.tsx b/src/components/GestureHandlerRootView.tsx
index 944fd31e2b..20d66e2d2f 100644
--- a/src/components/GestureHandlerRootView.tsx
+++ b/src/components/GestureHandlerRootView.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
-import { View, ViewProps } from 'react-native';
+import { View, ViewProps, StyleSheet } from 'react-native';
 import { maybeInitializeFabric } from '../init';
 import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
 
@@ -15,9 +15,17 @@ export default function GestureHandlerRootView(
   // to make sure it's called only once)
   maybeInitializeFabric();
 
+  const { style, ...rest } = props;
+
   return (
     <GestureHandlerRootViewContext.Provider value>
-      <View {...props} />
+      <View {...rest} style={style ?? styles.container} />
     </GestureHandlerRootViewContext.Provider>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
diff --git a/src/components/GestureHandlerRootView.web.tsx b/src/components/GestureHandlerRootView.web.tsx
index ddc7f0788d..797bd44224 100644
--- a/src/components/GestureHandlerRootView.web.tsx
+++ b/src/components/GestureHandlerRootView.web.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
-import { View, ViewProps } from 'react-native';
+import { View, ViewProps, StyleSheet } from 'react-native';
 import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
 
 export interface GestureHandlerRootViewProps
@@ -9,9 +9,17 @@ export interface GestureHandlerRootViewProps
 export default function GestureHandlerRootView(
   props: GestureHandlerRootViewProps
 ) {
+  const { style, ...rest } = props;
+
   return (
     <GestureHandlerRootViewContext.Provider value>
-      <View {...props} />
+      <View {...rest} style={style ?? styles.container} />
     </GestureHandlerRootViewContext.Provider>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

From 7c559d943e172c671b3b62db3c7cbfcd75cae690 Mon Sep 17 00:00:00 2001
From: kacperkapusciak <kacper.kapusciak@swmansion.com>
Date: Mon, 12 Feb 2024 16:32:12 +0100
Subject: [PATCH 2/4] Remove flex:1 in example app to prove my point

---
 example/src/App.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/example/src/App.tsx b/example/src/App.tsx
index 4dc7ea4fe9..16b3ab1b3f 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -161,7 +161,7 @@ const Stack = createStackNavigator<RootStackParamList>();
 
 export default function App() {
   return (
-    <GestureHandlerRootView style={styles.root}>
+    <GestureHandlerRootView>
       <NavigationContainer>
         <Stack.Navigator>
           <Stack.Screen
@@ -220,9 +220,6 @@ function MainScreenItem({ name, onPressItem }: MainScreenItemProps) {
 }
 
 const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-  },
   sectionTitle: {
     ...Platform.select({
       ios: {

From 7979924cc2cf1336ea2fd39eef3a8a9c53fe969d Mon Sep 17 00:00:00 2001
From: kacperkapusciak <kacper.kapusciak@swmansion.com>
Date: Mon, 12 Feb 2024 16:41:28 +0100
Subject: [PATCH 3/4] Put props in order and make the style take less space

---
 src/components/GestureHandlerRootView.android.tsx | 6 ++----
 src/components/GestureHandlerRootView.tsx         | 6 ++----
 src/components/GestureHandlerRootView.web.tsx     | 6 ++----
 3 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/components/GestureHandlerRootView.android.tsx b/src/components/GestureHandlerRootView.android.tsx
index 01abdb04a9..4de353710e 100644
--- a/src/components/GestureHandlerRootView.android.tsx
+++ b/src/components/GestureHandlerRootView.android.tsx
@@ -21,15 +21,13 @@ export default function GestureHandlerRootView(
   return (
     <GestureHandlerRootViewContext.Provider value>
       <GestureHandlerRootViewNativeComponent
-        {...rest}
         style={style ?? styles.container}
+        {...rest}
       />
     </GestureHandlerRootViewContext.Provider>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
+  container: { flex: 1 },
 });
diff --git a/src/components/GestureHandlerRootView.tsx b/src/components/GestureHandlerRootView.tsx
index 20d66e2d2f..5190dbece3 100644
--- a/src/components/GestureHandlerRootView.tsx
+++ b/src/components/GestureHandlerRootView.tsx
@@ -19,13 +19,11 @@ export default function GestureHandlerRootView(
 
   return (
     <GestureHandlerRootViewContext.Provider value>
-      <View {...rest} style={style ?? styles.container} />
+      <View style={style ?? styles.container} {...rest} />
     </GestureHandlerRootViewContext.Provider>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
+  container: { flex: 1 },
 });
diff --git a/src/components/GestureHandlerRootView.web.tsx b/src/components/GestureHandlerRootView.web.tsx
index 797bd44224..bd486396b5 100644
--- a/src/components/GestureHandlerRootView.web.tsx
+++ b/src/components/GestureHandlerRootView.web.tsx
@@ -13,13 +13,11 @@ export default function GestureHandlerRootView(
 
   return (
     <GestureHandlerRootViewContext.Provider value>
-      <View {...rest} style={style ?? styles.container} />
+      <View style={style ?? styles.container} {...rest} />
     </GestureHandlerRootViewContext.Provider>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
+  container: { flex: 1 },
 });

From 282ebdce2b81ccf14619c3a763bbaeab71c35a20 Mon Sep 17 00:00:00 2001
From: kacperkapusciak <kacper.kapusciak@swmansion.com>
Date: Mon, 12 Feb 2024 16:46:23 +0100
Subject: [PATCH 4/4] Destruct props in place

---
 src/components/GestureHandlerRootView.android.tsx | 9 ++++-----
 src/components/GestureHandlerRootView.tsx         | 9 ++++-----
 src/components/GestureHandlerRootView.web.tsx     | 9 ++++-----
 3 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/components/GestureHandlerRootView.android.tsx b/src/components/GestureHandlerRootView.android.tsx
index 4de353710e..3e3426260c 100644
--- a/src/components/GestureHandlerRootView.android.tsx
+++ b/src/components/GestureHandlerRootView.android.tsx
@@ -8,16 +8,15 @@ import GestureHandlerRootViewNativeComponent from '../specs/RNGestureHandlerRoot
 export interface GestureHandlerRootViewProps
   extends PropsWithChildren<ViewProps> {}
 
-export default function GestureHandlerRootView(
-  props: GestureHandlerRootViewProps
-) {
+export default function GestureHandlerRootView({
+  style,
+  ...rest
+}: GestureHandlerRootViewProps) {
   // try initialize fabric on the first render, at this point we can
   // reliably check if fabric is enabled (the function contains a flag
   // to make sure it's called only once)
   maybeInitializeFabric();
 
-  const { style, ...rest } = props;
-
   return (
     <GestureHandlerRootViewContext.Provider value>
       <GestureHandlerRootViewNativeComponent
diff --git a/src/components/GestureHandlerRootView.tsx b/src/components/GestureHandlerRootView.tsx
index 5190dbece3..d668562599 100644
--- a/src/components/GestureHandlerRootView.tsx
+++ b/src/components/GestureHandlerRootView.tsx
@@ -7,16 +7,15 @@ import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
 export interface GestureHandlerRootViewProps
   extends PropsWithChildren<ViewProps> {}
 
-export default function GestureHandlerRootView(
-  props: GestureHandlerRootViewProps
-) {
+export default function GestureHandlerRootView({
+  style,
+  ...rest
+}: GestureHandlerRootViewProps) {
   // try initialize fabric on the first render, at this point we can
   // reliably check if fabric is enabled (the function contains a flag
   // to make sure it's called only once)
   maybeInitializeFabric();
 
-  const { style, ...rest } = props;
-
   return (
     <GestureHandlerRootViewContext.Provider value>
       <View style={style ?? styles.container} {...rest} />
diff --git a/src/components/GestureHandlerRootView.web.tsx b/src/components/GestureHandlerRootView.web.tsx
index bd486396b5..965f29f4af 100644
--- a/src/components/GestureHandlerRootView.web.tsx
+++ b/src/components/GestureHandlerRootView.web.tsx
@@ -6,11 +6,10 @@ import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
 export interface GestureHandlerRootViewProps
   extends PropsWithChildren<ViewProps> {}
 
-export default function GestureHandlerRootView(
-  props: GestureHandlerRootViewProps
-) {
-  const { style, ...rest } = props;
-
+export default function GestureHandlerRootView({
+  style,
+  ...rest
+}: GestureHandlerRootViewProps) {
   return (
     <GestureHandlerRootViewContext.Provider value>
       <View style={style ?? styles.container} {...rest} />