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:
@@ -133,10 +130,9 @@ Nonetheless, it's recommended to adapt to the new implementation, as the legacy
 
 #### 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';
@@ -145,22 +141,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>