Infra/use orientation hook in components (#1627)

* Create useOrientation hook

* Update generated types

* Use useOrientation hook in TabController

* Fix lint errors

Author: ethanshar

src/components/tabController/index.tsx

@@ -1,9 +1,9 @@
 // TODO: support commented props
-import React, {PropsWithChildren, useMemo, useEffect, useRef, useState, useCallback} from 'react';
+import React, {PropsWithChildren, useMemo, useEffect, useState, useCallback} from 'react';
 import _ from 'lodash';
 import {useAnimatedReaction, useSharedValue, withTiming, runOnJS} from 'react-native-reanimated';
 import {Constants} from '../../helpers';
-import {orientations} from '../../helpers/Constants';
+import {useOrientation} from '../../hooks';
 import {asBaseComponent} from '../../commons/new';
 import {LogService} from '../../services';
 import TabBarContext from './TabBarContext';
@@ -58,25 +58,16 @@ function TabController({
   children
 }: PropsWithChildren<TabControllerProps>) {
   const [screenWidth, setScreenWidth] = useState<number>(Constants.windowWidth);
-  const orientation = useRef<orientations>(Constants.orientation);
-  const dimensionsChangeListener = useRef<any>();
 
   if (items?.length < 2) {
     console.error('TabController component expect a minimum of 2 items');
   }
 
-  useEffect(() => {
-    const onOrientationChange = () => {
-      if (orientation.current !== Constants.orientation) {
-        orientation.current = Constants.orientation;
-        setScreenWidth(Constants.windowWidth);
-      }
-    };
-    dimensionsChangeListener.current = Constants.addDimensionsEventListener(onOrientationChange);
-    return () => {
-      Constants.removeDimensionsEventListener(dimensionsChangeListener.current || onOrientationChange);
-    };
-  }, []);
+  useOrientation({
+    onOrientationChange: () => {
+      setScreenWidth(Constants.windowWidth);
+    }
+  });
 
   const pageWidth = useMemo(() => {
     return carouselPageWidth || screenWidth;