@fountain-ui/lab 2.0.0-beta.9 → 3.0.0-alpha.10

package/build/typescript/ViewPager/InternalContext.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { MonoStore } from '@fountain-ui/core';
+export interface InternalContextValue {
+    pageStore: MonoStore<number>;
+}
+declare const InternalContext: import("react").Context<InternalContextValue>;
+export default InternalContext;

package/build/typescript/ViewPager/PageStateContext.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface PageState {
+    isActive: boolean;
+}
+declare const PageStateContext: import("react").Context<PageState | null>;
+export default PageStateContext;

package/build/typescript/ViewPager/ViewPager.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type ViewPagerProps from './ViewPagerProps';
+import type { ViewPagerInstance } from './types';
+declare const ViewPager: React.ForwardRefExoticComponent<Pick<ViewPagerProps, "style" | "children" | "onChange" | "scrollEnabled" | "keyboardDismissMode" | "initialPage" | "loading" | "offscreenPageRerenderLimit" | "onPageScrollStateChanged" | "pageForceRerenderKey" | "UNSTABLE_sharedPage"> & React.RefAttributes<ViewPagerInstance>>;
+export default ViewPager;

package/build/typescript/ViewPager/ViewPager.native.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type ViewPagerProps from './ViewPagerProps';
+import type { ViewPagerInstance } from './types';
+declare const ViewPager: React.ForwardRefExoticComponent<Pick<ViewPagerProps, "style" | "children" | "onChange" | "scrollEnabled" | "keyboardDismissMode" | "initialPage" | "loading" | "offscreenPageRerenderLimit" | "onPageScrollStateChanged" | "pageForceRerenderKey" | "UNSTABLE_sharedPage"> & React.RefAttributes<ViewPagerInstance>>;
+export default ViewPager;

package/build/typescript/ViewPager/ViewPagerProps.d.ts

@@ -1,47 +1,37 @@
-import React from 'react';
-import type { ViewProps } from 'react-native';
-import type { ComponentProps } from '@fountain-ui/core';
-export declare type KeyboardDismissMode = 'none' | 'on-drag';
-export declare type PageProps = React.PropsWithChildren<ViewProps> & {
-    isNeighbor: boolean;
-    isVisible: boolean;
-    rerenderKey?: any;
-};
-export declare type PageComponent = React.ComponentType<PageProps>;
-export declare type Loading = 'lazy' | 'eager';
+import type { ReactNode, Ref } from 'react';
+import type { PageScrollStateChangedNativeEvent } from 'react-native-pager-view';
+import type { ComponentProps, SyncAnimatedValue } from '@fountain-ui/core';
+import type { KeyboardDismissMode, Loading, ViewPagerInstance } from './types';
 export default interface ViewPagerProps extends ComponentProps<{
+    ref?: Ref<ViewPagerInstance>;
     /**
      * Collection of ViewPager components.
      */
-    children?: React.ReactNode;
+    children?: ReactNode;
     /**
-     * If `true`, enable page visible hint.
-     * @default false
+     * Index of initial page that should be selected.
+     * @default 0
      */
-    enableVisibleHint?: boolean;
-    /**
-     * If `true`, Based on the current index, the pages on the left and right are also rerender.
-     * @default false
-     */
-    enableNeighborPageRerender?: boolean;
-    /**
-     * A number representing the index of the active page.
-     */
-    index: number;
+    initialPage?: number;
     /**
      * Whether to load the page immediately (`eager`) or on an as-needed basis (`lazy`).
      * @default 'lazy'
      */
     loading?: Loading;
+    /**
+     * Mobile only. The number of pages that should be re-rendered to either side of the current page.
+     * Changing this value after the component mount has no effect.
+     * @default 0
+     */
+    offscreenPageRerenderLimit?: number;
     /**
      * Callback fired when an index is changed.
      */
     onChange?: (newIndex: number) => void;
     /**
-     * The component used to render the wrapper of the page.
-     * @default 'ChildrenMemoizedPage'
+     * Native only. This handler processes events that occur when the pager is scrolled horizontally.
      */
-    pageComponent?: PageComponent;
+    onPageScrollStateChanged?: (event: PageScrollStateChangedNativeEvent) => void;
     /**
      * When this value is changed, page will be rerender.
      */
@@ -56,5 +46,9 @@ export default interface ViewPagerProps extends ComponentProps<{
      * @default 'on-drag'
      */
     keyboardDismissMode?: KeyboardDismissMode;
+    /**
+     * Unstable API.
+     */
+    UNSTABLE_sharedPage?: SyncAnimatedValue;
 }> {
 }

package/build/typescript/ViewPager/components/ChildrenMemoizedPage.d.ts

@@ -0,0 +1,14 @@
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+import type { ViewProps } from 'react-native';
+import type { Loading } from '../types';
+export declare type PageProps = PropsWithChildren<ViewProps> & {
+    index: number;
+    initialPage: number;
+    loading: Loading;
+    offscreenPageRerenderLimit: number;
+    rerenderKey?: any;
+};
+declare function Page(props: PageProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Page>;
+export default _default;

package/build/typescript/ViewPager/components/FluxStoreProvider.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface FluxStoreProviderProps<State> {
+    children: React.ReactElement;
+    initialState: State;
+}
+export default function FluxStoreProvider<State>(props: FluxStoreProviderProps<State>): JSX.Element;

package/build/typescript/ViewPager/components/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ChildrenMemoizedPage } from './ChildrenMemoizedPage';
+export { default as FluxStoreProvider } from './FluxStoreProvider';

package/build/typescript/ViewPager/hooks/index.d.ts

@@ -0,0 +1,7 @@
+export { default as useDispatch } from './useDispatch';
+export { default as useEagerState } from './useEagerState';
+export { default as useForceRender } from './useForceRender';
+export { default as useLazyState } from './useLazyState';
+export { default as usePageStore } from './usePageStore';
+export { default as useStore } from './useStore';
+export { default as useViewPagerPageState } from './useViewPagerPageState';

package/build/typescript/ViewPager/hooks/useDispatch.d.ts

@@ -0,0 +1,2 @@
+import type { DispatchAction } from '@fountain-ui/core';
+export default function useDispatch<State>(): (action: DispatchAction<State>) => void;

package/build/typescript/ViewPager/hooks/useEagerState.d.ts

@@ -0,0 +1 @@
+export default function useEagerState<State>(): State;

package/build/typescript/ViewPager/hooks/useForceRender.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function useForceRender(): import("react").DispatchWithoutAction;

package/build/typescript/ViewPager/hooks/useLazyState.d.ts

@@ -0,0 +1,2 @@
+import type { EqualityFunction } from '../types';
+export default function useLazyState<State>(equalityFn?: EqualityFunction<State>): State;

package/build/typescript/ViewPager/hooks/usePageStore.d.ts

@@ -0,0 +1,2 @@
+import type { MonoStore, SyncAnimatedValue } from '@fountain-ui/core';
+export default function usePageStore(value: SyncAnimatedValue): MonoStore<number>;

package/build/typescript/ViewPager/hooks/useStore.d.ts

@@ -0,0 +1,2 @@
+import type { FluxStore } from '../FluxContext';
+export default function useStore<State>(): FluxStore<State>;

package/build/typescript/ViewPager/hooks/useViewPagerPageState.d.ts

@@ -0,0 +1 @@
+export default function useViewPagerPageState(): import("../PageStateContext").PageState | null;

package/build/typescript/ViewPager/index.d.ts

@@ -1,2 +1,5 @@
-export { default } from './ViewPagerWeb';
+export { default } from './ViewPager';
 export type { default as ViewPagerProps } from './ViewPagerProps';
+export type { ViewPagerInstance } from './types';
+export { useDispatch as useFluxDispatch, useEagerState, useStore as useFluxStore, useLazyState, useViewPagerPageState, } from './hooks';
+export { FluxStoreProvider } from './components';

package/build/typescript/ViewPager/types.d.ts

@@ -0,0 +1,12 @@
+export declare type KeyboardDismissMode = 'none' | 'on-drag';
+export declare type Loading = 'lazy' | 'eager';
+export interface EqualityFunction<State> {
+    (a: State, b: State): boolean;
+}
+export interface ViewPagerInstance {
+    /**
+     * Function to scroll to a specific page in the ViewPager. Invalid index is ignored.
+     * @param index
+     */
+    setPage: (index: number) => void;
+}

package/build/typescript/ViewPager/utils.d.ts

@@ -1,21 +1,6 @@
-import React from 'react';
-import ViewPagerProps, { Loading, PageComponent } from './ViewPagerProps';
-export interface PageState {
-    visited?: boolean;
-}
-export interface PageRenderOption {
-    enableVisibleHint: boolean;
-    enableNeighborPageRerender: boolean;
-    index: number;
-    loading: Loading;
-    pageComponent: PageComponent;
-    pageForceRerenderKey?: any;
-}
-export interface PageRenderer {
-    (children: ViewPagerProps['children']): React.ReactNode;
-}
-export declare const defaultEnableVisibleHint: boolean;
-export declare const defaultEnableNeighborPageRerender: boolean;
+import type { EqualityFunction, Loading } from './types';
+export declare const defaultInitialPage: number;
 export declare const defaultLoading: Loading;
-export declare const defaultPageComponent: PageComponent;
-export declare const usePageRenderer: ({ enableVisibleHint, index: currentIndex, loading, pageComponent: PageComponent, pageForceRerenderKey, enableNeighborPageRerender, }: PageRenderOption) => PageRenderer;
+export declare const defaultOffscreenPageRerenderLimit: number;
+export declare const refEqual: EqualityFunction<any>;
+export declare function isValidPage(maybePage: number, numberOfPages: number): boolean;

package/build/typescript/ViewabilityTrackerView/Viewability.d.ts

@@ -0,0 +1,3 @@
+export default interface Viewability {
+    visible: boolean;
+}

package/build/typescript/ViewabilityTrackerView/ViewabilityTrackerView.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type ViewabilityTrackerViewProps from './ViewabilityTrackerViewProps';
+export default function ViewabilityTrackerView(props: ViewabilityTrackerViewProps): JSX.Element;

package/build/typescript/ViewabilityTrackerView/ViewabilityTrackerViewProps.d.ts

@@ -0,0 +1,22 @@
+import type { ViewProps } from 'react-native';
+import type { OverridableComponentProps } from '@fountain-ui/core';
+import type Viewability from './Viewability';
+export default interface ViewabilityTrackerViewProps extends OverridableComponentProps<ViewProps, {
+    /**
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * @default 1000
+     */
+    measurementIntervalMillis?: number;
+    /**
+     *
+     */
+    onViewabilityChange?: (viewability: Viewability) => void;
+    /**
+     * @default 50
+     */
+    visiblePercentThreshold?: number;
+}> {
+}

package/build/typescript/ViewabilityTrackerView/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ViewabilityTrackerView';
+export type { default as ViewabilityTrackerViewProps } from './ViewabilityTrackerViewProps';

package/build/typescript/ViewabilityTrackerView/measureViewability.d.ts

@@ -0,0 +1,11 @@
+import type { View } from 'react-native';
+export interface ViewabilityDetail {
+    visiblePercent: number;
+}
+export interface MeasureViewabilityParameters {
+    view: View;
+    windowWidth: number;
+    windowHeight: number;
+    onViewabilityDetailMeasured: (detail: ViewabilityDetail) => void;
+}
+export default function measureViewability({ view, windowWidth, windowHeight, onViewabilityDetailMeasured, }: MeasureViewabilityParameters): void;

package/build/typescript/ViewabilityTrackerView/useViewabilityTracker.d.ts

@@ -0,0 +1,11 @@
+import type { RefObject } from 'react';
+import type { View } from 'react-native';
+import type Viewability from './Viewability';
+export interface ViewabilityTrackerConfig {
+    enabled: boolean;
+    measurementIntervalMillis: number;
+    onViewabilityChange?: (viewability: Viewability) => void;
+    viewRef: RefObject<View>;
+    visiblePercentThreshold: number;
+}
+export default function useViewabilityTracker(config: ViewabilityTrackerConfig): void;

package/build/typescript/hooks/index.d.ts

@@ -1,2 +1,4 @@
+export { default as useDeferredExecutor } from './useDeferredExecutor';
+export { default as useIsMounted } from './useIsMounted';
 export { default as useUnstableCollapsibleAppBar } from './useUnstableCollapsibleAppBar';
 export { default as useUnstableToggleDisplayStyle } from './useUnstableToggleDisplayStyle';

package/build/typescript/hooks/useDeferredExecutor.d.ts

@@ -0,0 +1,11 @@
+export interface Runnable {
+    (): void;
+}
+export interface DeferredExecute {
+    (runnable: Runnable, delay?: number): void;
+}
+export interface DeferredExecutor {
+    cancel: () => void;
+    execute: DeferredExecute;
+}
+export default function useDeferredExecutor(): DeferredExecutor;

package/build/typescript/hooks/useIsMounted.d.ts

@@ -0,0 +1,4 @@
+export interface UseIsMounted {
+    (): boolean;
+}
+export default function useIsMounted(): UseIsMounted;

package/build/typescript/index.d.ts

@@ -12,4 +12,6 @@ export { default as ComicViewer } from './ComicViewer';
 export * from './ComicViewer';
 export { default as StatusBarProvider, useStatusBarContext } from './StatusBarProvider';
 export * from './StatusBarProvider';
+export { default as ViewabilityTrackerView } from './ViewabilityTrackerView';
+export * from './ViewabilityTrackerView';
 export * from './hooks';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/lab",
-  "version": "2.0.0-beta.9",
+  "version": "3.0.0-alpha.10",
   "private": false,
   "author": "Fountain-UI Team",
   "description": "Incubator for Fountain-UI React components.",
@@ -17,21 +17,19 @@
   "dependencies": {
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
-    "@fountain-ui/icons": "^2.0.0-beta.6",
-    "@fountain-ui/utils": "^2.0.0-beta.3",
+    "@fountain-ui/icons": "3.0.0-alpha.6",
+    "@fountain-ui/utils": "^3.0.0-alpha.1",
     "react-native-calendars": "1.1267.0"
   },
   "peerDependencies": {
-    "@fountain-ui/core": "^2.0.0-beta.3",
-    "@gorhom/bottom-sheet": "^4.1.3",
+    "@fountain-ui/core": "^3.0.0-alpha.1",
+    "@gorhom/bottom-sheet": "^4.5.0",
     "date-fns": "^2.0.0",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react-native": "^0.63.0",
     "react-native-gesture-handler": "^2.0.0",
-    "react-native-pager-view": "^5.0.0",
-    "react-native-snap-carousel": "^3.9.0",
-    "react-slick": "^0.25.0"
+    "react-native-pager-view": "^4.0.0"
   },
   "peerDependenciesMeta": {
     "@gorhom/bottom-sheet": {
@@ -40,28 +38,15 @@
     "react-dom": {
       "optional": true
     },
-    "react-native": {
-      "optional": true
-    },
-    "react-slick": {
-      "optional": true
-    },
     "react-native-pager-view": {
       "optional": true
-    },
-    "react-native-snap-carousel": {
-      "optional": true
     }
   },
   "devDependencies": {
-    "@gorhom/bottom-sheet": "4.1.3",
-    "@types/react-native-snap-carousel": "^3.8.4",
-    "@types/react-slick": "^0.23.5",
+    "@gorhom/bottom-sheet": "^4.5.0",
     "date-fns": "^2.23.0",
-    "react-native-pager-view": "^5.4.25",
-    "react-native-safe-area-context": "^3.3.2",
-    "react-native-snap-carousel": "^3.9.1",
-    "react-slick": "^0.28.1"
+    "react-native-pager-view": "^4.2.4",
+    "react-native-safe-area-context": "^4.0.0"
   },
   "react-native-builder-bob": {
     "source": "./src",
@@ -85,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "319e9f913cea57c5570e8b09a9ce410b3914d4f7"
+  "gitHead": "a1cc03c803e63c95ee74237ffe7f809428ff0116"
 }

package/src/BottomSheet/BottomSheetNative.tsx

@@ -1,30 +1,49 @@
-import React from 'react';
-import { Platform } from 'react-native';
-import { useTheme } from '@fountain-ui/styles';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Animated, LayoutChangeEvent, useWindowDimensions, ViewStyle } from 'react-native';
 import {
     BottomSheetBackdrop,
     BottomSheetBackdropProps,
     BottomSheetModal,
     BottomSheetModalProvider,
+    BottomSheetView,
 } from '@gorhom/bottom-sheet';
+import { Column, css, ExtendedStyle, isNotAndroid12, useAnimatedValue } from '@fountain-ui/core';
+import { useTheme } from '@fountain-ui/styles';
 import type BottomSheetProps from './BottomSheetProps';
 import TransparentBackdrop from './TransparentBackdrop';
+import useDynamicSnapPoints from './useDynamicSnapPoints.native';
 
 const NoHandle = () => null;
 
 export default function BottomSheet(props: BottomSheetProps) {
     const {
         backdropOpacity = 0.5,
+        backgroundStyle: backgroundStyleProp,
+        borderRadius: borderRadiusProp,
         children,
+        enableDynamicSizing = true,
+        topElement,
         index,
+        maxHeightNormalizedRatio = 0.8,
         onChange,
-        snapPoints,
+        snapPoints = [],
+        style: styleProp,
     } = props;
 
-    const indexRef = React.useRef<number>(-1);
-    const bottomSheetRef = React.useRef<BottomSheetModal | null>(null);
+    const indexRef = useRef<number>(-1);
+    const bottomSheetRef = useRef<BottomSheetModal | null>(null);
+
+    const { height: windowHeight } = useWindowDimensions();
+    const [topElementHeight, setTopElementHeight] = useState(0);
 
-    const handleChange = React.useCallback((newIndex: number) => {
+    const maxDynamicContentSize = Math.round(windowHeight * maxHeightNormalizedRatio) - topElementHeight;
+
+    const handleTopElementLayout = (event: LayoutChangeEvent) => {
+        const { height } = event.nativeEvent.layout;
+        setTopElementHeight(height);
+    };
+
+    const handleChange = useCallback((newIndex: number) => {
         indexRef.current = newIndex;
 
         if (onChange) {
@@ -32,11 +51,11 @@ export default function BottomSheet(props: BottomSheetProps) {
         }
     }, [onChange]);
 
-    const handleDismiss = React.useCallback(() => {
+    const handleDismiss = useCallback(() => {
         handleChange(-1);
     }, [handleChange]);
 
-    React.useEffect(() => {
+    useEffect(() => {
         if (index === indexRef.current) {
             return;
         }
@@ -52,18 +71,31 @@ export default function BottomSheet(props: BottomSheetProps) {
     }, [index]);
 
     const theme = useTheme();
-    const shadow = theme.shadow[12];
-    const modalStyle = {
-        backgroundColor: '#ffffff00',
-        ...Platform.select<object>({
-            android: shadow?.elevation,
-            ios: shadow?.shadow,
-            web: shadow?.boxShadow,
-        }),
-    };
-    const backgroundStyle = {
-        backgroundColor: theme.palette.paper.default,
-    };
+
+    const borderRadius = borderRadiusProp ?? theme.shape.radius.xxl;
+    const backgroundStyle = css([
+        {
+            backgroundColor: theme.palette.surface.base,
+            borderTopLeftRadius: borderRadius,
+            borderTopRightRadius: borderRadius,
+        },
+        backgroundStyleProp,
+    ]);
+
+    const contentWrapperStyle: ViewStyle = css([
+        {
+            backgroundColor: theme.palette.surface.base,
+            borderTopLeftRadius: borderRadius,
+            borderTopRightRadius: borderRadius,
+            flexShrink: 1,
+            maxHeight: maxDynamicContentSize,
+            minHeight: 325,
+            overflow: 'hidden',
+            paddingBottom: theme.spacing(6),
+            paddingTop: theme.spacing(5.5),
+        },
+        styleProp,
+    ]);
 
     const isBackdropTransparent = backdropOpacity <= 0;
 
@@ -73,9 +105,34 @@ export default function BottomSheet(props: BottomSheetProps) {
             appearsOnIndex={0}
             disappearsOnIndex={-1}
             opacity={backdropOpacity}
+            pressBehavior={onChange ? 'close' : 'none'}
         />
     );
 
+    const topElementOpacity = useAnimatedValue(0);
+    const topElementAnimationStyle: Animated.WithAnimatedValue<ExtendedStyle> = { opacity: topElementOpacity };
+    const topElementLocationStyle: ExtendedStyle = {
+        position: 'absolute',
+        width: '100%',
+        bottom: 0,
+    };
+    const onAnimate = (fromIndex: number, toIndex: number) => {
+        const isVisible = toIndex > -1;
+
+        Animated.timing(topElementOpacity, {
+            toValue: isVisible ? 1 : 0,
+            duration: 0,
+            useNativeDriver: isNotAndroid12,
+        }).start();
+    };
+
+    const {
+        animatedHandleHeight,
+        animatedSnapPoints,
+        animatedContentHeight,
+        handleContentLayout,
+    } = useDynamicSnapPoints(snapPoints);
+
     return (
         <BottomSheetModalProvider>
             <BottomSheetModal
@@ -87,10 +144,32 @@ export default function BottomSheet(props: BottomSheetProps) {
                 onChange={handleChange}
                 onDismiss={handleDismiss}
                 ref={bottomSheetRef}
-                snapPoints={snapPoints}
-                style={modalStyle}
+                enablePanDownToClose={Boolean(onChange)}
+                enableDynamicSizing={enableDynamicSizing}
+                maxDynamicContentSize={maxDynamicContentSize}
+                detached={Boolean(topElement)}
+                onAnimate={topElement ? onAnimate : undefined}
+                snapPoints={animatedSnapPoints}
+                handleHeight={animatedHandleHeight}
+                contentHeight={animatedContentHeight}
             >
-                {children}
+                {topElement ? (
+                    <Animated.View style={topElementAnimationStyle}>
+                        <Column
+                            onLayout={handleTopElementLayout}
+                            style={topElementLocationStyle}
+                        >
+                            {topElement}
+                        </Column>
+                    </Animated.View>
+                ) : null}
+
+                <BottomSheetView
+                    onLayout={handleContentLayout}
+                    style={contentWrapperStyle}
+                >
+                    {children}
+                </BottomSheetView>
             </BottomSheetModal>
         </BottomSheetModalProvider>
     );

package/src/BottomSheet/BottomSheetProps.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ComponentProps } from '@fountain-ui/core';
+import type { ComponentProps, ExtendedStyle } from '@fountain-ui/core';
 
 export default interface BottomSheetProps extends ComponentProps<{
     /**
@@ -8,16 +8,44 @@ export default interface BottomSheetProps extends ComponentProps<{
      */
     backdropOpacity?: number;
 
+    /**
+     * View style to be applied to the background component. (only native)
+     */
+    backgroundStyle?: ExtendedStyle | ExtendedStyle[];
+
+    /**
+     * Border radius for bottom sheet
+     */
+    borderRadius?: number;
+
     /**
      * BottomSheet children, usually the included sub-components.
      */
     children?: React.ReactNode;
 
+    /**
+     * Enable dynamic sizing for content size.
+     * @default true
+     */
+    enableDynamicSizing?: boolean;
+
+    /**
+     * Top element for displaying additional information on the bottom sheet.
+     */
+    topElement?: React.ReactNode;
+
     /**
      * Snap index. You could also provide -1 to bottom sheet in closed state.
      */
     index: number;
 
+    /**
+     * Maximum height(normalized value) of dialog
+     * ex. 30% => 0.3 / 90% => 0.9
+     * @default 0.8
+     */
+    maxHeightNormalizedRatio?: number;
+
     /**
      * Callback fired when the index is changed.
      * Important! Use memoized value.
@@ -27,6 +55,13 @@ export default interface BottomSheetProps extends ComponentProps<{
     /**
      * Points for the bottom sheet to snap to, points should be sorted from bottom to top.
      * Important! Use memoized value.
+     * Only number type or string type(~% format) can be used.
+     * @default []
+     */
+    snapPoints?: Array<number | string>;
+
+    /**
+     * View style to be applied to the content area.
      */
-    snapPoints: Array<number>;
+    style?: ExtendedStyle | ExtendedStyle[];
 }> {}