Fix/tab page nested in scroll view (#3224)

* fix tab page nested in scroll view

* clean

* expand to style prop

* change prop name

src/components/tabController/TabPage.tsx

@@ -1,5 +1,5 @@
 import React, {PropsWithChildren, useCallback, useContext, useState, useMemo} from 'react';
-import {StyleSheet} from 'react-native';
+import {type StyleProp, StyleSheet, type ViewStyle} from 'react-native';
 import Reanimated, {useAnimatedStyle, useAnimatedReaction, runOnJS} from 'react-native-reanimated';
 // import {Freeze} from 'react-freeze';
 import TabBarContext from './TabBarContext';
@@ -25,6 +25,10 @@ export interface TabControllerPageProps {
    * Used as a testing identifier
    */
   testID?: string;
+  /**
+   * add style properties to tab page
+   */
+  style?: StyleProp<ViewStyle>;
 }
 
 /**
@@ -36,6 +40,7 @@ export default function TabPage({
   index,
   lazy,
   renderLoading,
+  style,
   lazyLoadTime = 100,
   ...props
 }: PropsWithChildren<TabControllerPageProps>) {
@@ -81,12 +86,17 @@ export default function TabPage({
     };
   });
 
-  const style = useMemo(() => {
-    return [!asCarousel && styles.page, animatedPageStyle, {width: asCarousel ? containerWidth : undefined}];
-  }, [asCarousel, animatedPageStyle, containerWidth]);
+  const _style = useMemo(() => {
+    return [
+      !asCarousel && styles.page,
+      animatedPageStyle,
+      {width: asCarousel ? containerWidth : undefined},
+      style
+    ];
+  }, [asCarousel, animatedPageStyle, containerWidth, style]);
 
   return (
-    <Reanimated.View style={style} testID={testID}>
+    <Reanimated.View style={_style} testID={testID}>
       {!shouldLoad && renderLoading?.()}
       {shouldLoad && props.children}
       {/* <Freeze freeze={!shouldLoad || !focused}>{props.children}</Freeze> */}