Deprecate gestureHandlerRootHOC (#3632)

## Description

This PR deprecates usage of `gestureHandlerRootHOC` function. It also removes it from docs.

## Test plan

Run docs.

Author: m-bert

packages/docs-gesture-handler/docs/fundamentals/installation.md

@@ -90,15 +90,12 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
 export function CustomModal({ children, ...rest }) {
   return (
     <Modal {...rest}>
-      <GestureHandlerRootView>
-        {children}
-      </GestureHandlerRootView>
+      <GestureHandlerRootView>{children}</GestureHandlerRootView>
     </Modal>
   );
 }
 ```
 
-
 ##### Kotlin
 
 Gesture Handler on Android is implemented in Kotlin. If you need to set a specific Kotlin version to be used by the library, set the `kotlinVersion` ext property in `android/build.gradle` file and RNGH will use that version:
@@ -125,10 +122,9 @@ There is no additional configuration required for the web.
 
 #### With [wix/react-native-navigation](https://github.com/wix/react-native-navigation)
 
-If you are using a native navigation library like [wix/react-native-navigation](https://github.com/wix/react-native-navigation) you need to make sure that every screen is wrapped with `GestureHandlerRootView` (you can do this using `gestureHandlerRootHOC` function). This can be done for example at the stage when you register your screens. Here's an example:
+If you are using a native navigation library like [wix/react-native-navigation](https://github.com/wix/react-native-navigation) you need to make sure that every screen is wrapped with `GestureHandlerRootView`. This can be done for example at the stage when you register your screens. Here's an example:
 
 ```js
-import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 import { Navigation } from 'react-native-navigation';
 import FirstTabScreen from './FirstTabScreen';
 import SecondTabScreen from './SecondTabScreen';
@@ -137,22 +133,40 @@ import PushedScreen from './PushedScreen';
 export function registerScreens() {
   Navigation.registerComponent(
     'example.FirstTabScreen',
-    () => gestureHandlerRootHOC(FirstTabScreen),
+    () => {
+      return (
+        <GestureHandlerRootView>
+          <FirstTabScreen />
+        </GestureHandlerRootView>
+      );
+    },
     () => FirstTabScreen
   );
   Navigation.registerComponent(
     'example.SecondTabScreen',
-    () => gestureHandlerRootHOC(SecondTabScreen),
+    () => {
+      return (
+        <GestureHandlerRootView>
+          <SecondTabScreen />
+        </GestureHandlerRootView>
+      );
+    },
     () => SecondTabScreen
   );
   Navigation.registerComponent(
     'example.PushedScreen',
-    () => gestureHandlerRootHOC(PushedScreen),
+    () => {
+      return (
+        <GestureHandlerRootView>
+          <PushedScreen />
+        </GestureHandlerRootView>
+      );
+    },
     () => PushedScreen
   );
 }
 ```
 
 You can check out [this example project](https://github.com/henrikra/nativeNavigationGestureHandler) to see this kind of set up in action.
 
-Remember that you need to wrap each screen that you use in your app with `GestureHandlerRootView` (you can do this using `gestureHandlerRootHOC` function) as with native navigation libraries each screen maps to a separate root view. It will not be enough to wrap the main screen only.
+Remember that you need to wrap each screen that you use in your app with `GestureHandlerRootView` as with native navigation libraries each screen maps to a separate root view. It will not be enough to wrap the main screen only.

packages/docs-gesture-handler/docs/guides/migrating-off-rnghenabledroot.md

@@ -32,14 +32,18 @@ Some libraries (for example React Navigation) already use `GestureHandlerRootVie
 
 ## Update your JS code
 
-Instead of using `RNGestureHandlerEnabledRootView` wrap your entry point with `<GestureHandlerRootView>` or `gestureHandlerRootHOC`, for example:
+Instead of using `RNGestureHandlerEnabledRootView` wrap your entry point with `<GestureHandlerRootView>`, for example:
 
 ```jsx
 export default function App() {
-  return <GestureHandlerRootView style={{ flex: 1 }}>{/* content */}</GestureHandlerRootView>;
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      {/* content */}
+    </GestureHandlerRootView>
+  );
 }
 ```
 
 :::info
 Note that `GestureHandlerRootView` acts like a normal `View`. So if you want it to fill the screen, you will need to pass `{ flex: 1 }` like you'll need to do with a normal View. By default, it'll take the size of the content nested inside.
-:::
+:::

packages/docs-gesture-handler/versioned_docs/version-1.x/getting-started.md

@@ -58,8 +58,7 @@ or with `npm` if you prefer:
 npm install --save react-native-gesture-handler
 ```
 
-After installation, wrap your entry point with `<GestureHandlerRootView>` or
-`gestureHandlerRootHOC`.
+After installation, wrap your entry point with `<GestureHandlerRootView>`.
 
 For example:
 
@@ -131,22 +130,17 @@ public class MainActivity extends ReactActivity {
 #### Usage with modals on Android
 
 On Android RNGH does not work by default because modals are not located under React Native Root view in native hierarchy.
-To fix that, components need to be wrapped with `gestureHandlerRootHOC` (it's no-op on iOS and web).
+To fix that, components need to be wrapped with `GestureHandlerRootView`.
 
 For example:
 
 ```js
-const ExampleWithHoc = gestureHandlerRootHOC(() => (
-    <View>
-      <DraggableBox />
-    </View>
-  );
-);
-
 export default function Example() {
   return (
     <Modal>
-      <ExampleWithHoc />
+      <GestureHandlerRootView>
+        <DraggableBox />
+      </GestureHandlerRootView>
     </Modal>
   );
 }
@@ -173,10 +167,9 @@ import 'react-native-gesture-handler';
 
 If you are using a native navigation library like [wix/react-native-navigation](https://github.com/wix/react-native-navigation) you need to follow a different setup for your Android app to work properly. The reason is that both native navigation libraries and Gesture Handler library need to use their own special subclasses of `ReactRootView`.
 
-Instead of changing Java code you will need to wrap every screen component using `gestureHandlerRootHOC` on the JS side. This can be done for example at the stage when you register your screens. Here's an example:
+Instead of changing Java code you will need to wrap every screen component using `GestureHandlerRootView` on the JS side. This can be done for example at the stage when you register your screens. Here's an example:
 
 ```js
-import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 import { Navigation } from 'react-native-navigation';
 
 import FirstTabScreen from './FirstTabScreen';
@@ -187,25 +180,43 @@ import PushedScreen from './PushedScreen';
 export function registerScreens() {
   Navigation.registerComponent(
     'example.FirstTabScreen',
-    () => gestureHandlerRootHOC(FirstTabScreen),
+    () => {
+      return (
+        <GestureHandlerRootView>
+          <FirstTabScreen />
+        </GestureHandlerRootView>
+      );
+    },
     () => FirstTabScreen
   );
   Navigation.registerComponent(
     'example.SecondTabScreen',
-    () => gestureHandlerRootHOC(SecondTabScreen),
+    () => {
+      return (
+        <GestureHandlerRootView>
+          <SecondTabScreen />
+        </GestureHandlerRootView>
+      );
+    },
     () => SecondTabScreen
   );
   Navigation.registerComponent(
     'example.PushedScreen',
-    () => gestureHandlerRootHOC(PushedScreen),
+    () => {
+      return (
+        <GestureHandlerRootView>
+          <PushedScreen />
+        </GestureHandlerRootView>
+      );
+    },
     () => PushedScreen
   );
 }
 ```
 
 You can check out [this example project](https://github.com/henrikra/nativeNavigationGestureHandler) to see this kind of set up in action.
 
-Remember that you need to wrap each screen that you use in your app with `gestureHandlerRootHOC` as with native navigation libraries each screen maps to a separate root view. It will not be enough to wrap the main screen only.
+Remember that you need to wrap each screen that you use in your app with `GestureHandlerRootView` as with native navigation libraries each screen maps to a separate root view. It will not be enough to wrap the main screen only.
 
 ### Testing
 

packages/react-native-gesture-handler/src/components/gestureHandlerRootHOC.tsx

@@ -3,6 +3,10 @@ import { StyleSheet, StyleProp, ViewStyle } from 'react-native';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import GestureHandlerRootView from './GestureHandlerRootView';
 
+/**
+ * @deprecated `gestureHandlerRootHOC` is deprecated and will be removed in the future version of Gesture Handler.
+ * Use `GestureHandlerRootView` directly instead.
+ */
 export default function gestureHandlerRootHOC<P extends object>(
   Component: React.ComponentType<P>,
   containerStyles?: StyleProp<ViewStyle>