@applicaster/zapp-react-native-ui-components 12.0.0-rc.1 → 12.0.0-rc.100

package/Components/ModalComponent/utils.ts

@@ -0,0 +1,126 @@
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { PluginConfiguration } from "./index";
+
+export function defaultItemProps(
+  config: PluginConfiguration,
+  maxWidth: number
+) {
+  const {
+    modal_bottom_sheet_item_background_color,
+    modal_bottom_sheet_item_focus_background_color,
+    modal_bottom_sheet_item_selected_background_color,
+    modal_bottom_sheet_item_focusected_background_color,
+    modal_bottom_sheet_item_corner_radius,
+    modal_bottom_sheet_item_margin_bottom,
+    modal_bottom_sheet_item_margin_left,
+    modal_bottom_sheet_item_margin_right,
+    modal_bottom_sheet_item_margin_top,
+    modal_bottom_sheet_item_padding_bottom,
+    modal_bottom_sheet_item_padding_left,
+    modal_bottom_sheet_item_padding_right,
+    modal_bottom_sheet_item_padding_top,
+  } = config;
+
+  return {
+    backgroundColor: modal_bottom_sheet_item_background_color,
+    focusedBackgroundColor: modal_bottom_sheet_item_focus_background_color,
+    selectedBackgroundColor: modal_bottom_sheet_item_selected_background_color,
+    focusectedBackgroundColor:
+      modal_bottom_sheet_item_focusected_background_color,
+    borderRadius: modal_bottom_sheet_item_corner_radius,
+    marginBottom: modal_bottom_sheet_item_margin_bottom,
+    marginTop: modal_bottom_sheet_item_margin_top,
+    marginLeft: modal_bottom_sheet_item_margin_left,
+    marginRight: modal_bottom_sheet_item_margin_right,
+    paddingTop: modal_bottom_sheet_item_padding_top,
+    paddingBottom: modal_bottom_sheet_item_padding_bottom,
+    paddingRight: modal_bottom_sheet_item_padding_right,
+    paddingLeft: modal_bottom_sheet_item_padding_left,
+    maxWidth,
+  };
+}
+
+export function defaultItemLabelProps(
+  config: PluginConfiguration,
+  sheetWidth: number
+) {
+  const {
+    modal_bottom_sheet_item_label_android_letter_spacing,
+    modal_bottom_sheet_item_label_ios_letter_spacing,
+    modal_bottom_sheet_item_label_family_ios_font_selector,
+    modal_bottom_sheet_item_label_family_android_font_selector,
+    modal_bottom_sheet_item_label_focus_font_color,
+    modal_bottom_sheet_item_label_font_color,
+    modal_bottom_sheet_item_label_selected_font_color,
+    modal_bottom_sheet_item_label_hover_selected_font_color,
+    modal_bottom_sheet_item_label_font_size,
+    modal_bottom_sheet_item_label_line_height,
+    modal_bottom_sheet_item_label_margin_bottom,
+    modal_bottom_sheet_item_label_margin_top,
+    modal_bottom_sheet_item_label_margin_left,
+    modal_bottom_sheet_item_label_margin_right,
+    modal_bottom_sheet_item_label_transform,
+    modal_bottom_sheet_item_icon_width,
+    modal_bottom_sheet_item_icon_margin_left,
+    modal_bottom_sheet_item_icon_margin_right,
+    modal_bottom_sheet_item_margin_left,
+    modal_bottom_sheet_item_margin_right,
+    modal_bottom_sheet_item_padding_left,
+    modal_bottom_sheet_item_padding_right,
+  } = config;
+
+  const maxWidth =
+    sheetWidth -
+    (modal_bottom_sheet_item_icon_width +
+      modal_bottom_sheet_item_icon_margin_left +
+      modal_bottom_sheet_item_icon_margin_right +
+      modal_bottom_sheet_item_margin_left +
+      modal_bottom_sheet_item_margin_right +
+      modal_bottom_sheet_item_padding_left +
+      modal_bottom_sheet_item_padding_right);
+
+  return {
+    fontFamily: platformSelect({
+      ios: modal_bottom_sheet_item_label_family_ios_font_selector,
+      android: modal_bottom_sheet_item_label_family_android_font_selector,
+    }),
+    letterSpacing: platformSelect({
+      ios: modal_bottom_sheet_item_label_ios_letter_spacing,
+      android: modal_bottom_sheet_item_label_android_letter_spacing,
+    }),
+    fontSize: modal_bottom_sheet_item_label_font_size,
+    color: modal_bottom_sheet_item_label_font_color,
+    focusColor: modal_bottom_sheet_item_label_focus_font_color,
+    hoverSelectedColor: modal_bottom_sheet_item_label_hover_selected_font_color,
+    selectedColor: modal_bottom_sheet_item_label_selected_font_color,
+    lineHeight: modal_bottom_sheet_item_label_line_height,
+    marginBottom: modal_bottom_sheet_item_label_margin_bottom,
+    marginTop: modal_bottom_sheet_item_label_margin_top,
+    marginLeft: modal_bottom_sheet_item_label_margin_left,
+    marginRight: modal_bottom_sheet_item_label_margin_right,
+    transform: modal_bottom_sheet_item_label_transform,
+    maxWidth,
+  };
+}
+
+export function defaultItemIconProps(config: PluginConfiguration) {
+  const {
+    modal_bottom_sheet_item_icon_height,
+    modal_bottom_sheet_item_icon_width,
+    modal_bottom_sheet_item_icon_margin_bottom,
+    modal_bottom_sheet_item_icon_margin_left,
+    modal_bottom_sheet_item_icon_margin_right,
+    modal_bottom_sheet_item_icon_margin_top,
+    modal_bottom_sheet_item_icon_flavour,
+  } = config;
+
+  return {
+    width: modal_bottom_sheet_item_icon_width,
+    height: modal_bottom_sheet_item_icon_height,
+    flavour: modal_bottom_sheet_item_icon_flavour,
+    marginTop: modal_bottom_sheet_item_icon_margin_top,
+    marginBottom: modal_bottom_sheet_item_icon_margin_bottom,
+    marginLeft: modal_bottom_sheet_item_icon_margin_left,
+    marginRight: modal_bottom_sheet_item_icon_margin_right,
+  };
+}

package/Components/Navigator/StackNavigator.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { isEmpty } from "ramda";
+
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { getPathAttributes } from "@applicaster/zapp-react-native-utils/navigationUtils";
+import { FocusableGroup } from "@applicaster/zapp-react-native-ui-components/Components/FocusableGroup";
+import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenDataContext";
+import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
+
+import { Screen } from "../Screen/TV/index.web";
+import { isLast } from "@applicaster/zapp-react-native-utils/arrayUtils";
+import { ScreenContextProvider } from "../../Contexts/ScreenContext";
+
+type Components = {
+  NavBar: React.ComponentType<any>;
+  Background: React.ComponentType<any>;
+};
+
+type Props = {
+  Components: Components;
+};
+
+export const StackNavigator = ({ Components }: Props) => {
+  const { mainStack } = useNavigation();
+
+  const renderScreen = ({ route, state }, index) => {
+    const pathAttributes = getPathAttributes({ pathname: route });
+
+    if (isEmpty(pathAttributes)) {
+      return null;
+    }
+
+    // HACK: Adding index to route to avoid conflicts in the navigator.
+    // Startup hooks are all using PUSH navigation action to navigate, but their routes are always like root routes.
+    // This means some hooks can have the same routes, e.g., ["hooks/context-setter", "/hooks/login-plug", "hooks/context-setter"].
+    const routeId = `${route}--${index}`;
+
+    return (
+      <FocusableGroup
+        id={route}
+        preferredFocus={isLast(index, mainStack.length)}
+        excludeFromFocusSearching
+        key={routeId}
+      >
+        <ScreenDataContext.Provider value={state}>
+          <PathnameContext.Provider value={route}>
+            <ScreenContextProvider pathname={route}>
+              <Screen route={route} Components={Components} />
+            </ScreenContextProvider>
+          </PathnameContext.Provider>
+        </ScreenDataContext.Provider>
+      </FocusableGroup>
+    );
+  };
+
+  return <>{mainStack.map(renderScreen)}</>;
+};

package/Components/Navigator/index.ts

@@ -0,0 +1 @@
+export { StackNavigator } from "./StackNavigator";

package/Components/PlayerContainer/ErrorDisplay/ErrorDisplay.tsx

@@ -4,7 +4,6 @@ import { Text, TextStyle, View, ViewStyle } from "react-native";
 
 import { getLocalizations } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import { getAppStylesColor } from "@applicaster/zapp-react-native-utils/stylesUtils";
-import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { styleKeys } from "@applicaster/zapp-react-native-utils/styleKeysUtils";
 
@@ -26,10 +25,10 @@ const textStyles = (appStyles = defaultAppStyles): TextStyle => ({
   textAlign: "center",
 });
 
-const errorStyles = ({ width, height, backgroundColor }): ViewStyle => ({
+const errorStyles = ({ backgroundColor }): ViewStyle => ({
   flex: 1,
-  width,
-  height,
+  width: "100%",
+  height: "100%",
   justifyContent: "center",
   alignItems: "center",
   position: "absolute",
@@ -41,8 +40,6 @@ export function ErrorDisplayComponent({
   styles,
   remoteConfigurations: { localizations },
 }: Props) {
-  const { width, height } = useDimensions("window");
-
   const theme = useTheme();
   const backgroundColor = theme?.app_background_color;
 
@@ -53,7 +50,7 @@ export function ErrorDisplayComponent({
   const appStyles = R.prop(styleKeys.style_namespace, styles);
 
   return (
-    <View style={errorStyles({ width, height, backgroundColor })}>
+    <View style={errorStyles({ backgroundColor })}>
       <Text style={textStyles(appStyles)}>{stream_error_message}</Text>
     </View>
   );

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -54,6 +54,11 @@ import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { usePlayNextOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayNextOverlay";
 import { PlayNextState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/OverlayObserver/OverlaysObserver";
 
+import {
+  useModalAnimationContext,
+  PlayerAnimationStateEnum,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+
 type Props = {
   Player: React.ComponentType<any>;
   PlayerLoadingView?: React.ComponentType<any>; // 👀 we are not receiving this prop
@@ -63,6 +68,7 @@ type Props = {
   mode?: VideoModalMode;
   loadPipesData: (url: string, options: {}) => void;
   disableCastAction?: boolean;
+  groupId?: string;
 };
 
 type ScreenStyles = ZappRiver["styles"] & {
@@ -118,6 +124,7 @@ const nativeStyles = {
   playerScreen: {
     flex: 1,
     backgroundColor: "black",
+    overflow: "hidden",
   },
   playerWrapper: {
     flex: 1,
@@ -145,34 +152,30 @@ const renderApplePlayer = ({
 }) => {
   const { title, summary } = item || {};
 
-  if (!isApplePlatform()) {
+  if (!isAppleTV() || !player) {
+    return null;
+  }
+
+  if (isAudioContent) {
+    return (
+      <AudioPlayer
+        audio_item={item}
+        plugin_configuration={pluginConfiguration}
+      />
+    );
+  }
+
+  if (!playNextData && player.isPaused() && player.isAd() === false) {
     return null;
   }
 
   return (
-    <>
-      {!playNextData && (
-        <>
-          {!isAudioContent &&
-            !!player?.isPaused() &&
-            !!player?.isAd() === false && (
-              <ProgramInfo
-                title={title}
-                subtitle={summary}
-                plugin_configuration={pluginConfiguration}
-                videoStyle={videoStyle}
-              />
-            )}
-        </>
-      )}
-
-      {isAudioContent && (
-        <AudioPlayer
-          audio_item={item}
-          plugin_configuration={pluginConfiguration}
-        />
-      )}
-    </>
+    <ProgramInfo
+      title={title}
+      subtitle={summary}
+      plugin_configuration={pluginConfiguration}
+      videoStyle={videoStyle}
+    />
   );
 };
 
@@ -199,6 +202,7 @@ const PlayerContainerComponent = (props: Props) => {
     style: videoStyle,
     mode = VideoModalMode.MAXIMIZED,
     disableCastAction = false,
+    groupId,
   } = props;
 
   // Hooks
@@ -233,6 +237,9 @@ const PlayerContainerComponent = (props: Props) => {
   const screenData = useTargetScreenData(item);
   const { setVisible: showNavBar } = useSetNavbarState();
 
+  const { isActiveGesture, startComponentsAnimation, setPlayerAnimationState } =
+    useModalAnimationContext();
+
   const playerEvent = (event, ...args) => {
     playerManager.invokeHandler(event, ...args);
   };
@@ -245,8 +252,8 @@ const PlayerContainerComponent = (props: Props) => {
       return;
     }
 
-    navigator.goBack();
     showNavBar(true);
+    navigator.goBack();
   }, [isModal, navigator.goBack, showNavBar]);
 
   const playEntry = (entry) => navigator.replaceTop(entry, { mode });
@@ -339,6 +346,18 @@ const PlayerContainerComponent = (props: Props) => {
     }
   }, [item?.id, item?.extensions?.resumeTime, player]);
 
+  const onVideoFullscreenPlayerWillPresent = React.useCallback(() => {
+    playerManager.invokeHandler("toggleFullscreen", {
+      fullscreen: true,
+    });
+  }, []);
+
+  const onVideoFullscreenPlayerWillDismiss = React.useCallback(() => {
+    playerManager.invokeHandler("toggleFullscreen", {
+      fullscreen: false,
+    });
+  }, []);
+
   // Util methods
   const toggleFullscreen = (event) => {
     const { fullscreen = false } = event || {};
@@ -381,17 +400,27 @@ const PlayerContainerComponent = (props: Props) => {
       id: playerContainerId,
       listener: {
         onVideoEnd,
-        onError: onError,
-        onLoad: onLoad,
+        onError,
+        onLoad,
         onPlayerClose: close,
         onPlayerDetached: close,
+        onVideoFullscreenPlayerWillDismiss,
+        onVideoFullscreenPlayerWillPresent,
       },
     });
 
     return () => {
       player.removeListener(playerContainerId);
     };
-  }, [player, onVideoEnd]);
+  }, [
+    player,
+    onVideoEnd,
+    onError,
+    onLoad,
+    close,
+    onVideoFullscreenPlayerWillDismiss,
+    onVideoFullscreenPlayerWillPresent,
+  ]);
 
   useEffect(() => {
     // TODO: We should not use playerManager here to connect buttons to player container
@@ -428,7 +457,7 @@ const PlayerContainerComponent = (props: Props) => {
       if (disableMiniPlayer) {
         navigator.closeVideoModal();
       } else {
-        navigator.minimiseVideoModal();
+        setPlayerAnimationState(PlayerAnimationStateEnum.minimize);
       }
     }
 
@@ -603,6 +632,7 @@ const PlayerContainerComponent = (props: Props) => {
                 style={styles.focusableGroup}
                 preferredFocus
                 shouldUsePreferredFocus
+                groupId={groupId}
               >
                 {/* Video player and components */}
                 <View
@@ -621,9 +651,13 @@ const PlayerContainerComponent = (props: Props) => {
                         }}
                         focused={isInlineTV ? true : undefined}
                         autoplay={true}
-                        controls={isAppleTV() && !isInlineTV}
+                        controls={false}
                         disableCastAction={disableCastAction}
-                        docked={navigator.isVideoModalDocked()}
+                        docked={
+                          navigator.isVideoModalDocked() &&
+                          !startComponentsAnimation &&
+                          !isActiveGesture
+                        }
                         entry={item}
                         fullscreen={mode === VideoModalMode.FULLSCREEN}
                         inline={inline}
@@ -641,6 +675,7 @@ const PlayerContainerComponent = (props: Props) => {
                         setNextVideoPreloadThresholdPercentage={
                           setNextVideoPreloadThresholdPercentage
                         }
+                        startComponentsAnimation={startComponentsAnimation}
                       >
                         {renderApplePlayer(applePlayerProps)}
                       </Player>

package/Components/PlayerContainer/ProgramInfo/index.tsx

@@ -4,7 +4,9 @@ import { styleKeys } from "@applicaster/zapp-react-native-utils/styleKeysUtils";
 import { transformColorCode as fixColorHexCode } from "@applicaster/zapp-react-native-utils/transform";
 import * as R from "ramda";
 import * as React from "react";
-import { Image, Text, TextStyle, View, ViewStyle } from "react-native";
+import { Text, TextStyle, View, ViewStyle } from "react-native";
+import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
+
 import * as programStyles from "./styles";
 
 type Props = {

package/Components/PlayerImageBackground/index.tsx

@@ -1,38 +1,64 @@
 import React, { PropsWithChildren } from "react";
-import { ImageBackground } from "react-native";
+import { ImageBackground, View } from "react-native";
 
 import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
+import {
+  AnimationComponent,
+  ComponentAnimationType,
+  useModalAnimationContext,
+  PlayerAnimationStateEnum,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 type Props = PropsWithChildren<{
   entry: ZappEntry;
   style?: { [K: string]: any };
   imageStyle?: { [K: string]: any };
   imageKey?: string;
+  defaultImageDimensions?: { [K: string]: any };
 }>;
 
+const imageSize = { width: "100%", height: "100%" };
+
 const PlayerImageBackgroundComponent = ({
   entry,
   children,
   style,
   imageStyle,
   imageKey,
+  defaultImageDimensions,
 }: Props) => {
   const source = React.useMemo(
     () => ({ uri: imageSrcFromMediaItem(entry, imageKey) }),
     [imageKey, entry]
   );
 
+  const { playerAnimationState } = useModalAnimationContext();
+
   if (!source) return <>{children}</>;
 
   return (
-    <ImageBackground
-      resizeMode="cover"
-      style={style}
-      imageStyle={imageStyle}
-      source={source}
+    <View
+      style={
+        playerAnimationState === PlayerAnimationStateEnum.maximaze
+          ? defaultImageDimensions
+          : style
+      }
     >
-      {children}
-    </ImageBackground>
+      <AnimationComponent
+        style={style}
+        animationType={ComponentAnimationType.player}
+        additionalData={defaultImageDimensions}
+      >
+        <ImageBackground
+          resizeMode="cover"
+          style={imageSize}
+          imageStyle={imageStyle}
+          source={source}
+        >
+          {children}
+        </ImageBackground>
+      </AnimationComponent>
+    </View>
   );
 };
 

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as R from "ramda";
-import { View, FlatList, StyleSheet, Platform } from "react-native";
+import { View, StyleSheet, Platform, FlatList } from "react-native";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { RiverItem } from "../RiverItem";
 import { RiverFooter } from "../RiverFooter";
@@ -21,6 +21,8 @@ import {
 import { useScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenData";
 import { isLast } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { withComponentsMapProvider } from "@applicaster/zapp-react-native-ui-components/Decorators/ComponentsMapWrapper";
+import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { useShallow } from "zustand/react/shallow";
 
 type Props = {
   feed: ZappFeed;
@@ -40,8 +42,10 @@ const styles = StyleSheet.create({
   },
 });
 
-const scrollIndicatorInsets = { right: 1 };
+const getNearestValue = (value, optionA, optionB) =>
+  Math.abs(value - optionA) < Math.abs(value - optionB) ? optionA : optionB;
 
+const scrollIndicatorInsets = { right: 1 };
 const keyExtractor = R.compose(String, R.prop("id"));
 
 function ComponentsMapComponent(props: Props) {
@@ -59,6 +63,7 @@ function ComponentsMapComponent(props: Props) {
     refreshingPipesV1,
   } = props;
 
+  const flatListRef = React.useRef<FlatList | null>(null);
   const screenConfig = useScreenConfiguration(riverId);
   const screenData = useScreenData(riverId);
   const pullToRefreshEnabled = screenData?.rules?.pull_to_refresh_enabled;
@@ -193,6 +198,88 @@ function ComponentsMapComponent(props: Props) {
     []
   );
 
+  const navBarStore = useScreenContextV2()._navBarStore;
+
+  const scrollY = navBarStore(
+    useShallow(({ scrollYAnimated }) => scrollYAnimated)
+  );
+
+  const canMomentum = React.useRef(false);
+
+  const onScrollBeginDrag = React.useCallback(() => {
+    canMomentum.current = true;
+  }, []);
+
+  /* onMomentumScrollEnd: Handling snap to expanded/collapsed state ( for navbar ) */
+  const _onMomentumScrollEnd = React.useCallback(({ nativeEvent }) => {
+    if (!canMomentum.current) return;
+    canMomentum.current = false;
+
+    const { height: headerHeight, scrollState } = navBarStore.getState();
+
+    const offsetY = Math.max(0, nativeEvent.contentOffset.y);
+
+    if (
+      !(scrollState === 0 || scrollState === -headerHeight) &&
+      flatListRef.current
+    ) {
+      const offset =
+        getNearestValue(Math.round(scrollState), -headerHeight, 0) ===
+        -headerHeight
+          ? Math.round(offsetY + scrollState + headerHeight)
+          : Math.round(offsetY + scrollState);
+
+      flatListRef.current.scrollToOffset({
+        animated: true,
+        offset,
+      });
+    }
+  }, []);
+
+  /* onScrollEnd: Handling snap to expanded/collapsed state ( for navbar ) */
+  const _onScrollEndDrag = React.useCallback(({ nativeEvent }) => {
+    const { height: headerHeight, scrollState } = navBarStore.getState();
+
+    const offsetY = Math.max(0, nativeEvent.contentOffset.y);
+
+    if (
+      !(scrollState === 0 || scrollState === -headerHeight) &&
+      flatListRef.current &&
+      nativeEvent.velocity.y === 0
+    ) {
+      const offset =
+        getNearestValue(Math.round(scrollState), -headerHeight, 0) ===
+        -headerHeight
+          ? Math.round(offsetY + scrollState + headerHeight)
+          : Math.round(offsetY + scrollState);
+
+      flatListRef.current.scrollToOffset({
+        animated: true,
+        offset,
+      });
+    }
+  }, []);
+
+  const onScroll = React.useCallback((event) => {
+    const {
+      nativeEvent: {
+        contentOffset: { y },
+        layoutMeasurement: { height },
+        contentSize: { height: contentHeight },
+      },
+    } = event;
+
+    if (y >= 0 && y + height <= contentHeight) {
+      scrollY.setValue(y);
+    } else {
+      if (y <= 0) {
+        scrollY.setValue(0);
+      } else if (y + height > contentHeight) {
+        scrollY.setValue(contentHeight - height);
+      }
+    }
+  }, []);
+
   if (shouldShowLoadingError) {
     return <RiverError />;
   }
@@ -208,6 +295,9 @@ function ComponentsMapComponent(props: Props) {
       >
         <ViewportTracker>
           <FlatList
+            ref={(ref) => {
+              flatListRef.current = ref;
+            }}
             // Fix for WebView rerender crashes on Android API 28+
             // https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-964035468
             overScrollMode={Platform.OS === "android" ? "never" : "auto"}
@@ -227,6 +317,11 @@ function ComponentsMapComponent(props: Props) {
             }
             ListFooterComponent={renderFooter}
             refreshControl={refreshControl}
+            onScrollBeginDrag={onScrollBeginDrag}
+            onScroll={onScroll}
+            onMomentumScrollEnd={_onMomentumScrollEnd}
+            onScrollEndDrag={_onScrollEndDrag}
+            scrollEventThrottle={16}
             {...scrollViewExtraProps}
           />
         </ViewportTracker>