react-native-navigation-bottom-sheet/lib/typescript/types.d.ts

A performant customizable bottom sheet component made on top of wix react-native-navigation library.

import Animated from 'react-native-reanimated';
import { ViewStyle } from 'react-native';

export interface AnimationConfig {
  damping?: number;
  mass?: number;
  stiffness?: number;
  restSpeedThreshold?: number;
  restDisplacementThreshold?: number;
  toss?: number;
  deceleration?: number;
  velocityFactor?: number;
}

export interface BottomSheetInterface {
  _dragY: Animated.Value<number>;
}

export interface RNNBottomSheetProps {
  /**
   * Points for snapping of bottom sheet component. They define distance from bottom of the screen.
   * Might be number or percent (as string e.g. '20%') for points or percents of screen height from bottom.
   */
  snapPoints: (number | string)[];

  /**
   * Initial snap index. Defaults to 0.
   */
  initialSnapIndex?: number;

  /**
   * Method for rendering scrollable content of bottom sheet.
   */
  renderContent?: () => React.ReactNode;

  /**
   * Method for rendering non-scrollable header of bottom sheet.
   */
  renderHeader?: () => React.ReactNode;

  /**
   * Whether the drawer be dismissed when a click is registered outside. Defaults to true.
   */
  dismissWhenTouchOutside?: boolean;

  /**
   * Defines if bottom sheet content could be scrollable by gesture. Defaults to true.
   */
  enabledContentGestureInteraction?: boolean;

  /**
   * Opacity of the screen outside the bottm sheet. Defaults to 0.7.
   */
  fadeOpacity?: number;

  style?: Animated.AnimateStyle<
    Omit<
      ViewStyle,
      | 'flexDirection'
      | 'position'
      | 'top'
      | 'left'
      | 'bottom'
      | 'right'
      | 'opacity'
      | 'transform'
    >
  >;

  /**
   * Background color of the bottom sheet. Defaults to '#fff'.
   */
  backgroundColor?: string;

  /**
   * Border radius of the bottom sheet.
   */
  borderRadius?: number;

  /** 
    * Object consisting of several options defining behavior of animation.
    */
  animationConfig?: AnimationConfig;

  /**
   * Callback when the sheet position changed.
   * @type (index: number) => void;
   */
  onChange?: (index: number) => void;

  scrollableObjects?: any[];
}

export interface State {
  heightOfHeader: number;
  contentHeight: Animated.Value<number>;
  screenHeight: number;
}