@snooper/rn-scroll-bottom-sheet/lib/typescript/index.d.ts

Cross platform scrollable bottom sheet with virtualization support, running at 60 FPS and fully implemented in JS land

import React, { Component, RefObject } from 'react';
import { FlatList, FlatListProps, ScrollView, ScrollViewProps, SectionList, SectionListProps, ViewStyle } from 'react-native';
import Animated from 'react-native-reanimated';
import { Assign } from 'utility-types';
declare const FlatListComponentType: "FlatList";
declare const ScrollViewComponentType: "ScrollView";
declare const SectionListComponentType: "SectionList";
declare type AnimatedScrollableComponent = FlatList | ScrollView | SectionList;
declare type FlatListOption<T> = Assign<{
    componentType: typeof FlatListComponentType;
}, FlatListProps<T>>;
declare type ScrollViewOption = Assign<{
    componentType: typeof ScrollViewComponentType;
}, ScrollViewProps>;
declare type SectionListOption<T> = Assign<{
    componentType: typeof SectionListComponentType;
}, SectionListProps<T>>;
declare type CommonProps = {
    /**
     * Array of numbers that indicate the different resting positions of the bottom sheet (in dp or %), starting from the top.
     * If a percentage is used, that would translate to the relative amount of the total window height.
     * For instance, if 50% is used, that'd be windowHeight * 0.5. If you wanna take into account safe areas during
     * the calculation, such as status bars and notches, please use 'topInset' prop
     */
    snapPoints: Array<string | number>;
    /**
     * Index that references the initial resting position of the drawer, starting from the top
     */
    initialSnapIndex: number;
    /**
     * Render prop for the handle
     */
    renderHandle: () => React.ReactNode;
    /**
     * Callback that is executed right after the drawer settles on one of the snapping points.
     * The new index is provided on the callback
     * @param index
     */
    onSettle?: (index: number) => void;
    /**
     * Animated value that tracks the position of the drawer, being:
     * 0 => closed
     * 1 => fully opened
     */
    animatedPosition?: Animated.Value<number>;
    /**
     * Configuration for the timing reanimated function
     */
    animationConfig?: {
        duration?: number;
        easing?: Animated.EasingFunction;
    };
    /**
     * This value is useful if you want to take into consideration safe area insets
     * when applying percentages for snapping points. We recommend using react-native-safe-area-context
     * library for that.
     * @see https://github.com/th3rdwave/react-native-safe-area-context#usage, insets.top
     */
    topInset: number;
    /**
     * Reference to FlatList, ScrollView or SectionList in order to execute its imperative methods.
     */
    innerRef: RefObject<FlatList | ScrollView | SectionList>;
    /**
     * Style to be applied to the container.
     */
    containerStyle?: Animated.AnimateStyle<ViewStyle>;
    /**
     * Render prop for additional overlapping component
     */
    renderOverlappingComponent: () => React.ReactNode;
};
declare type Props<T> = CommonProps & (FlatListOption<T> | ScrollViewOption | SectionListOption<T>);
export declare class ScrollBottomSheet<T extends any> extends Component<Props<T>> {
    static defaultProps: {
        topInset: number;
        innerRef: React.RefObject<AnimatedScrollableComponent>;
    };
    /**
     * Gesture Handler references
     */
    private masterDrawer;
    private drawerHandleRef;
    private overlayComponentRef;
    private drawerContentRef;
    private scrollComponentRef;
    /**
     * ScrollView prop
     */
    private onScrollBeginDrag;
    /**
     * Pan gesture handler events for drawer handle and content
     */
    private onHandleGestureEvent;
    private onDrawerGestureEvent;
    /**
     * Main Animated Value that drives the top position of the UI drawer at any point in time
     */
    private translateY;
    /**
     * Animated value that keeps track of the position: 0 => closed, 1 => opened
     */
    private position;
    /**
     * Flag to indicate imperative snapping
     */
    private isManuallySetValue;
    /**
     * Manual snapping amount
     */
    private manualYOffset;
    /**
     * Keeps track of the current index
     */
    private nextSnapIndex;
    /**
     * Deceleration rate of the scroll component. This is used only on Android to
     * compensate the unexpected glide it gets sometimes.
     */
    private decelerationRate;
    private prevSnapIndex;
    private dragY;
    private prevDragY;
    private tempDestSnapPoint;
    private isAndroid;
    private animationClock;
    private animationPosition;
    private animationFinished;
    private animationFrameTime;
    private velocityY;
    private lastStartScrollY;
    private prevTranslateYOffset;
    private translationY;
    private destSnapPoint;
    private lastSnap;
    private dragWithHandle;
    private scrollUpAndPullDown;
    private didGestureFinish;
    private didScrollUpAndPullDown;
    private setTranslationY;
    private extraOffset;
    private calculateNextSnapPoint;
    private scrollComponent;
    convertPercentageToDp: (str: string) => number;
    constructor(props: Props<T>);
    private getNormalisedSnapPoints;
    private getScrollComponent;
    snapTo: (index: number) => void;
    render(): JSX.Element;
}
export default ScrollBottomSheet;