@lodev09/react-native-true-sheet 0.9.7 → 0.9.9

package/lib/module/TrueSheetFooter.js

@@ -0,0 +1,12 @@
+import React from 'react';
+export const TrueSheetFooter = props => {
+  const {
+    Component
+  } = props;
+  if (!Component) return null;
+  if (typeof Component !== 'function') {
+    return Component;
+  }
+  return /*#__PURE__*/React.createElement(Component, null);
+};
+//# sourceMappingURL=TrueSheetFooter.js.map

package/lib/module/TrueSheetFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","TrueSheetFooter","props","Component","createElement"],"sourceRoot":"../../src","sources":["TrueSheetFooter.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAOzB,OAAO,MAAMC,eAAe,GAAIC,KAA2B,IAAK;EAC9D,MAAM;IAAEC;EAAU,CAAC,GAAGD,KAAK;EAE3B,IAAI,CAACC,SAAS,EAAE,OAAO,IAAI;EAE3B,IAAI,OAAOA,SAAS,KAAK,UAAU,EAAE;IACnC,OAAOA,SAAS;EAClB;EAEA,oBAAOH,KAAA,CAAAI,aAAA,CAACD,SAAS,MAAE,CAAC;AACtB,CAAC","ignoreList":[]}

package/lib/module/__mocks__/index.js

@@ -2,6 +2,9 @@ import React from 'react';
 import { View } from 'react-native';
 export * from '../TrueSheetGrabber';
 export class TrueSheet extends React.Component {
+  static dismiss = jest.fn();
+  static present = jest.fn();
+  static resize = jest.fn();
   dismiss = jest.fn();
   present = jest.fn();
   resize = jest.fn();

package/lib/module/__mocks__/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","TrueSheet","Component","dismiss","jest","fn","present","resize","render","createElement","props"],"sourceRoot":"../../../src","sources":["__mocks__/index.js"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAEnC,cAAc,qBAAqB;AAEnC,OAAO,MAAMC,SAAS,SAASF,KAAK,CAACG,SAAS,CAAC;EAC7CC,OAAO,GAAGC,IAAI,CAACC,EAAE,CAAC,CAAC;EACnBC,OAAO,GAAGF,IAAI,CAACC,EAAE,CAAC,CAAC;EACnBE,MAAM,GAAGH,IAAI,CAACC,EAAE,CAAC,CAAC;EAElBG,MAAMA,CAAA,EAAG;IACP,oBAAOT,KAAA,CAAAU,aAAA,CAACT,IAAI,EAAK,IAAI,CAACU,KAAQ,CAAC;EACjC;AACF","ignoreList":[]}
+{"version":3,"names":["React","View","TrueSheet","Component","dismiss","jest","fn","present","resize","render","createElement","props"],"sourceRoot":"../../../src","sources":["__mocks__/index.js"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAEnC,cAAc,qBAAqB;AAEnC,OAAO,MAAMC,SAAS,SAASF,KAAK,CAACG,SAAS,CAAC;EAC7C,OAAOC,OAAO,GAAGC,IAAI,CAACC,EAAE,CAAC,CAAC;EAC1B,OAAOC,OAAO,GAAGF,IAAI,CAACC,EAAE,CAAC,CAAC;EAC1B,OAAOE,MAAM,GAAGH,IAAI,CAACC,EAAE,CAAC,CAAC;EAEzBF,OAAO,GAAGC,IAAI,CAACC,EAAE,CAAC,CAAC;EACnBC,OAAO,GAAGF,IAAI,CAACC,EAAE,CAAC,CAAC;EACnBE,MAAM,GAAGH,IAAI,CAACC,EAAE,CAAC,CAAC;EAElBG,MAAMA,CAAA,EAAG;IACP,oBAAOT,KAAA,CAAAU,aAAA,CAACT,IAAI,EAAK,IAAI,CAACU,KAAQ,CAAC;EACjC;AACF","ignoreList":[]}

package/lib/typescript/src/TrueSheet.d.ts

@@ -6,16 +6,34 @@ interface TrueSheetState {
 export declare class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
     displayName: string;
     private readonly ref;
+    /**
+     * Map of sheet names against their handle.
+     */
+    private static readonly handles;
     constructor(props: TrueSheetProps);
+    private static getHandle;
+    /**
+     * Present the sheet by given `name`.
+     * See `name` prop.
+     */
+    static present(name: string, index?: number): Promise<void>;
+    /**
+     * Dismiss the sheet by given `name`.
+     * See `name` prop.
+     */
+    static dismiss(name: string): Promise<void>;
+    /**
+     * Resize the sheet by given `name`.
+     * See `name` prop.
+     */
+    static resize(name: string, index: number): Promise<void>;
     private get handle();
     private updateState;
     private onSizeChange;
     private onPresent;
     private onDismiss;
-    componentDidMount(): void;
-    componentDidUpdate(): void;
     /**
-     * Present the modal sheet. Optionally accepts a size `index`.
+     * Present the sheet. Optionally accepts a size `index`.
      * See `sizes` prop
      */
     present(index?: number): Promise<void>;
@@ -28,6 +46,8 @@ export declare class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetSt
      * Dismisses the Sheet
      */
     dismiss(): Promise<void>;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
     render(): ReactNode;
 }
 export {};

package/lib/typescript/src/TrueSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TrueSheet.d.ts","sourceRoot":"","sources":["../../../src/TrueSheet.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAwC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAWlG,OAAO,KAAK,EAAE,cAAc,EAAY,MAAM,SAAS,CAAA;AA0BvD,UAAU,cAAc;IACtB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAA;CAChC;AAED,qBAAa,SAAU,SAAQ,aAAa,CAAC,cAAc,EAAE,cAAc,CAAC;IAC1E,WAAW,SAAc;IAEzB,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAsB;gBAE9B,KAAK,EAAE,cAAc;IAcjC,OAAO,KAAK,MAAM,GAOjB;IAED,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,SAAS;IAIjB,iBAAiB,IAAI,IAAI;IAUzB,kBAAkB,IAAI,IAAI;IAI1B;;;OAGG;IACU,OAAO,CAAC,KAAK,GAAE,MAAU,GAAG,OAAO,CAAC,IAAI,CAAC;IAItD;;;OAGG;IACU,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAIjD;;OAEG;IACU,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IAIrC,MAAM,IAAI,SAAS;CA6DpB"}
+{"version":3,"file":"TrueSheet.d.ts","sourceRoot":"","sources":["../../../src/TrueSheet.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAwC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAWlG,OAAO,KAAK,EAAE,cAAc,EAAY,MAAM,SAAS,CAAA;AAoBvD,UAAU,cAAc;IACtB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAA;CAChC;AAQD,qBAAa,SAAU,SAAQ,aAAa,CAAC,cAAc,EAAE,cAAc,CAAC;IAC1E,WAAW,SAAc;IAEzB,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAsB;IAE1C;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAiC;gBAEpD,KAAK,EAAE,cAAc;IAcjC,OAAO,CAAC,MAAM,CAAC,SAAS;IAUxB;;;OAGG;WACiB,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,GAAE,MAAU;IAO3D;;;OAGG;WACiB,OAAO,CAAC,IAAI,EAAE,MAAM;IAOxC;;;OAGG;WACiB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAItD,OAAO,KAAK,MAAM,GAOjB;IAED,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,SAAS;IAIjB;;;OAGG;IACU,OAAO,CAAC,KAAK,GAAE,MAAU,GAAG,OAAO,CAAC,IAAI,CAAC;IAItD;;;OAGG;IACU,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAIjD;;OAEG;IACU,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IAIrC,iBAAiB,IAAI,IAAI;IAUzB,kBAAkB,IAAI,IAAI;IAI1B,MAAM,IAAI,SAAS;CA6DpB"}

package/lib/typescript/src/TrueSheetFooter.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { TrueSheetProps } from './types';
+interface TrueSheetFooterProps {
+    Component?: TrueSheetProps['FooterComponent'];
+}
+export declare const TrueSheetFooter: (props: TrueSheetFooterProps) => React.JSX.Element | null;
+export {};
+//# sourceMappingURL=TrueSheetFooter.d.ts.map

package/lib/typescript/src/TrueSheetFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrueSheetFooter.d.ts","sourceRoot":"","sources":["../../../src/TrueSheetFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C,UAAU,oBAAoB;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAA;CAC9C;AAED,eAAO,MAAM,eAAe,UAAW,oBAAoB,6BAU1D,CAAA"}

package/lib/typescript/src/types.d.ts

@@ -61,6 +61,21 @@ export type SheetSize =
  */
  | 'large';
 export interface TrueSheetProps extends ViewProps {
+    /**
+     * The name to reference this sheet. It has to be unique.
+     * You can then present this sheet globally using its `name`.
+     *
+     * Example:
+     * ```ts
+     * <TrueSheet name="my-awesome-sheet">
+     *   <MyComponent />
+     * </TrueSheet>
+     * ```
+     * ```ts
+     * TrueSheet.present('my-awesome-sheet')
+     * ```
+     */
+    name?: string;
     /**
      * The sizes you want the Sheet to support.
      * Maximum of 3 sizes only; collapsed, half-expanded, expanded.

package/lib/typescript/src/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC9E,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE/E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAE/D,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED;;;;GAIG;AACH,MAAM,MAAM,QAAQ,GAChB,OAAO,GACP,MAAM,GACN,SAAS,GACT,YAAY,GACZ,SAAS,GACT,WAAW,GACX,yBAAyB,GACzB,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,sBAAsB,GACtB,8BAA8B,GAC9B,yBAAyB,GACzB,qBAAqB,GACrB,0BAA0B,GAC1B,2BAA2B,GAC3B,6BAA6B,GAC7B,wBAAwB,GACxB,oBAAoB,GACpB,yBAAyB,GACzB,0BAA0B,CAAA;AAE9B;;;;;GAKG;AACH,MAAM,MAAM,SAAS;AACnB;;;;;GAKG;AACD,MAAM;AAER;;;;;GAKG;GACD,MAAM;AAER;;;;;GAKG;GACD,GAAG,MAAM,GAAG;AAEd;;;;;GAKG;GACD,OAAO;AAET;;;;;GAKG;GACD,QAAQ;AAEV;;;;;GAKG;GACD,OAAO,CAAA;AAEX,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,SAAS,EAAE,CAAA;IAEnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,UAAU,CAAA;IAE5B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAA;IAEpC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAA;IAEnB;;OAEG;IACH,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAE5C;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IAEzC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG,YAAY,CAAA;IAEvD;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;IAEpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IAEtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;CACxC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC9E,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE/E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAE/D,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED;;;;GAIG;AACH,MAAM,MAAM,QAAQ,GAChB,OAAO,GACP,MAAM,GACN,SAAS,GACT,YAAY,GACZ,SAAS,GACT,WAAW,GACX,yBAAyB,GACzB,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,sBAAsB,GACtB,8BAA8B,GAC9B,yBAAyB,GACzB,qBAAqB,GACrB,0BAA0B,GAC1B,2BAA2B,GAC3B,6BAA6B,GAC7B,wBAAwB,GACxB,oBAAoB,GACpB,yBAAyB,GACzB,0BAA0B,CAAA;AAE9B;;;;;GAKG;AACH,MAAM,MAAM,SAAS;AACnB;;;;;GAKG;AACD,MAAM;AAER;;;;;GAKG;GACD,MAAM;AAER;;;;;GAKG;GACD,GAAG,MAAM,GAAG;AAEd;;;;;GAKG;GACD,OAAO;AAET;;;;;GAKG;GACD,QAAQ;AAEV;;;;;GAKG;GACD,OAAO,CAAA;AAEX,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C;;;;;;;;;;;;;OAaG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,SAAS,EAAE,CAAA;IAEnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,UAAU,CAAA;IAE5B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAA;IAEpC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAA;IAEnB;;OAEG;IACH,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAE5C;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IAEzC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG,YAAY,CAAA;IAEvD;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;IAEpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IAEtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;CACxC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lodev09/react-native-true-sheet",
-  "version": "0.9.7",
+  "version": "0.9.9",
   "description": "The true native bottom sheet. 💩",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/TrueSheet.tsx

@@ -12,38 +12,43 @@ import {
 import type { TrueSheetProps, SizeInfo } from './types'
 import { TrueSheetModule } from './TrueSheetModule'
 import { TrueSheetGrabber } from './TrueSheetGrabber'
+import { TrueSheetFooter } from './TrueSheetFooter'
 
+const NATIVE_COMPONENT_NAME = 'TrueSheetView'
 const LINKING_ERROR =
   `The package '@lodev09/react-native-true-sheet' doesn't seem to be linked. Make sure: \n\n` +
   Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
   '- You rebuilt the app after installing the package\n' +
   '- You are not using Expo Go\n'
 
-const ComponentName = 'TrueSheetView'
-
 interface TrueSheetNativeViewProps extends Omit<TrueSheetProps, 'onPresent' | 'onSizeChange'> {
   scrollableHandle: number | null
   onPresent: (event: NativeSyntheticEvent<SizeInfo>) => void
   onSizeChange: (event: NativeSyntheticEvent<SizeInfo>) => void
 }
 
-const TrueSheetNativeView = requireNativeComponent<TrueSheetNativeViewProps>(ComponentName)
-
-if (!TrueSheetNativeView) {
-  throw new Error(LINKING_ERROR)
-}
-
 type NativeRef = Component<TrueSheetNativeViewProps> & Readonly<NativeMethods>
 
 interface TrueSheetState {
   scrollableHandle: number | null
 }
 
+const TrueSheetNativeView = requireNativeComponent<TrueSheetNativeViewProps>(NATIVE_COMPONENT_NAME)
+
+if (!TrueSheetNativeView) {
+  throw new Error(LINKING_ERROR)
+}
+
 export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
   displayName = 'TrueSheet'
 
   private readonly ref: RefObject<NativeRef>
 
+  /**
+   * Map of sheet names against their handle.
+   */
+  private static readonly handles: { [name: string]: number } = {}
+
   constructor(props: TrueSheetProps) {
     super(props)
 
@@ -58,10 +63,50 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
     }
   }
 
+  private static getHandle(name: string) {
+    const handle = TrueSheet.handles[name]
+    if (!handle) {
+      console.warn(`Could not get native view tag from "${name}". Check your name prop.`)
+      return
+    }
+
+    return handle
+  }
+
+  /**
+   * Present the sheet by given `name`.
+   * See `name` prop.
+   */
+  public static async present(name: string, index: number = 0) {
+    const handle = TrueSheet.getHandle(name)
+    if (!handle) return
+
+    await TrueSheetModule.present(handle, index)
+  }
+
+  /**
+   * Dismiss the sheet by given `name`.
+   * See `name` prop.
+   */
+  public static async dismiss(name: string) {
+    const handle = TrueSheet.getHandle(name)
+    if (!handle) return
+
+    await TrueSheetModule.dismiss(handle)
+  }
+
+  /**
+   * Resize the sheet by given `name`.
+   * See `name` prop.
+   */
+  public static async resize(name: string, index: number) {
+    await TrueSheet.present(name, index)
+  }
+
   private get handle(): number {
     const nodeHandle = findNodeHandle(this.ref.current)
     if (nodeHandle == null || nodeHandle === -1) {
-      throw new Error(`Could not get native view tag`)
+      throw new Error('Could not get native view tag')
     }
 
     return nodeHandle
@@ -72,6 +117,10 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
       ? findNodeHandle(this.props.scrollRef.current)
       : null
 
+    if (this.props.name) {
+      TrueSheet.handles[this.props.name] = this.handle
+    }
+
     this.setState({
       scrollableHandle,
     })
@@ -89,22 +138,8 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
     this.props.onDismiss?.()
   }
 
-  componentDidMount(): void {
-    if (this.props.sizes && this.props.sizes.length > 3) {
-      console.warn(
-        'TrueSheet only supports a maximum of 3 sizes; collapsed, half-expanded and expanded. Check your `sizes` prop.'
-      )
-    }
-
-    this.updateState()
-  }
-
-  componentDidUpdate(): void {
-    this.updateState()
-  }
-
   /**
-   * Present the modal sheet. Optionally accepts a size `index`.
+   * Present the sheet. Optionally accepts a size `index`.
    * See `sizes` prop
    */
   public async present(index: number = 0): Promise<void> {
@@ -126,6 +161,20 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
     await TrueSheetModule.dismiss(this.handle)
   }
 
+  componentDidMount(): void {
+    if (this.props.sizes && this.props.sizes.length > 3) {
+      console.warn(
+        'TrueSheet only supports a maximum of 3 sizes; collapsed, half-expanded and expanded. Check your `sizes` prop.'
+      )
+    }
+
+    this.updateState()
+  }
+
+  componentDidUpdate(): void {
+    this.updateState()
+  }
+
   render(): ReactNode {
     const {
       sizes = ['medium', 'large'],
@@ -180,7 +229,7 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
             {children}
           </View>
           <View collapsable={false}>
-            <TrueSheetFooter FooterComponent={FooterComponent} />
+            <TrueSheetFooter Component={FooterComponent} />
           </View>
           {Platform.OS === 'android' && <TrueSheetGrabber visible={grabber} {...grabberProps} />}
         </View>
@@ -189,18 +238,6 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
   }
 }
 
-const TrueSheetFooter = (props: Pick<TrueSheetProps, 'FooterComponent'>) => {
-  const { FooterComponent } = props
-
-  if (!FooterComponent) return null
-
-  if (typeof FooterComponent !== 'function') {
-    return FooterComponent
-  }
-
-  return <FooterComponent />
-}
-
 const $nativeSheet: ViewStyle = {
   position: 'absolute',
   left: -9999,

package/src/TrueSheetFooter.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import type { TrueSheetProps } from './types'
+
+interface TrueSheetFooterProps {
+  Component?: TrueSheetProps['FooterComponent']
+}
+
+export const TrueSheetFooter = (props: TrueSheetFooterProps) => {
+  const { Component } = props
+
+  if (!Component) return null
+
+  if (typeof Component !== 'function') {
+    return Component
+  }
+
+  return <Component />
+}

package/src/__mocks__/index.js

@@ -4,6 +4,10 @@ import { View } from 'react-native'
 export * from '../TrueSheetGrabber'
 
 export class TrueSheet extends React.Component {
+  static dismiss = jest.fn()
+  static present = jest.fn()
+  static resize = jest.fn()
+
   dismiss = jest.fn()
   present = jest.fn()
   resize = jest.fn()

package/src/types.ts

@@ -92,6 +92,21 @@ export type SheetSize =
   | 'large'
 
 export interface TrueSheetProps extends ViewProps {
+  /**
+   * The name to reference this sheet. It has to be unique.
+   * You can then present this sheet globally using its `name`.
+   *
+   * Example:
+   * ```ts
+   * <TrueSheet name="my-awesome-sheet">
+   *   <MyComponent />
+   * </TrueSheet>
+   * ```
+   * ```ts
+   * TrueSheet.present('my-awesome-sheet')
+   * ```
+   */
+  name?: string
   /**
    * The sizes you want the Sheet to support.
    * Maximum of 3 sizes only; collapsed, half-expanded, expanded.

package/android/src/main/java/com/lodev09/truesheet/TrueSheetBehavior.kt

@@ -1,230 +0,0 @@
-package com.lodev09.truesheet
-
-import android.view.MotionEvent
-import android.view.ViewGroup
-import android.widget.ScrollView
-import androidx.coordinatorlayout.widget.CoordinatorLayout
-import com.facebook.react.bridge.ReactContext
-import com.google.android.material.bottomsheet.BottomSheetBehavior
-import com.lodev09.truesheet.core.Utils
-
-data class SizeInfo(val index: Int, val value: Float)
-
-class TrueSheetBehavior(private val reactContext: ReactContext) : BottomSheetBehavior<ViewGroup>() {
-  var maxScreenHeight: Int = 0
-  var maxSheetHeight: Int? = null
-
-  var contentView: ViewGroup? = null
-  var footerView: ViewGroup? = null
-
-  var sizes: Array<Any> = arrayOf("medium", "large")
-
-  override fun onInterceptTouchEvent(parent: CoordinatorLayout, child: ViewGroup, event: MotionEvent): Boolean {
-    contentView?.let {
-      val isDownEvent = (event.actionMasked == MotionEvent.ACTION_DOWN)
-      val expanded = state == STATE_EXPANDED
-
-      if (isDownEvent && expanded) {
-        for (i in 0 until it.childCount) {
-          val contentChild = it.getChildAt(i)
-          val scrolled = (contentChild is ScrollView && contentChild.scrollY > 0)
-
-          if (!scrolled) continue
-          if (isInsideSheet(contentChild as ScrollView, event)) {
-            return false
-          }
-        }
-      }
-    }
-
-    return super.onInterceptTouchEvent(parent, child, event)
-  }
-
-  private fun isInsideSheet(scrollView: ScrollView, event: MotionEvent): Boolean {
-    val x = event.x
-    val y = event.y
-
-    val position = IntArray(2)
-    scrollView.getLocationOnScreen(position)
-
-    val nestedX = position[0]
-    val nestedY = position[1]
-
-    val boundRight = nestedX + scrollView.width
-    val boundBottom = nestedY + scrollView.height
-
-    return (x > nestedX && x < boundRight && y > nestedY && y < boundBottom) ||
-      event.action == MotionEvent.ACTION_CANCEL
-  }
-
-  /**
-   * Get the height value based on the size config value.
-   */
-  private fun getSizeHeight(size: Any, contentHeight: Int): Int {
-    val height =
-      when (size) {
-        is Double -> Utils.toPixel(size)
-
-        is Int -> Utils.toPixel(size.toDouble())
-
-        is String -> {
-          when (size) {
-            "auto" -> contentHeight
-
-            "large" -> maxScreenHeight
-
-            "medium" -> (maxScreenHeight * 0.50).toInt()
-
-            "small" -> (maxScreenHeight * 0.25).toInt()
-
-            else -> {
-              if (size.endsWith('%')) {
-                val percent = size.trim('%').toDoubleOrNull()
-                if (percent == null) {
-                  0
-                } else {
-                  ((percent / 100) * maxScreenHeight).toInt()
-                }
-              } else {
-                val fixedHeight = size.toDoubleOrNull()
-                if (fixedHeight == null) {
-                  0
-                } else {
-                  Utils.toPixel(fixedHeight)
-                }
-              }
-            }
-          }
-        }
-
-        else -> (maxScreenHeight * 0.5).toInt()
-      }
-
-    return minOf(height, maxSheetHeight ?: maxScreenHeight)
-  }
-
-  /**
-   * Determines the state based on the given size index.
-   */
-  fun getStateForSizeIndex(index: Int) =
-    when (sizes.size) {
-      1 -> STATE_EXPANDED
-
-      2 -> {
-        when (index) {
-          0 -> STATE_COLLAPSED
-          1 -> STATE_EXPANDED
-          else -> STATE_HIDDEN
-        }
-      }
-
-      3 -> {
-        when (index) {
-          0 -> STATE_COLLAPSED
-          1 -> STATE_HALF_EXPANDED
-          2 -> STATE_EXPANDED
-          else -> STATE_HIDDEN
-        }
-      }
-
-      else -> STATE_HIDDEN
-    }
-
-  /**
-   * Configure the sheet based on size preferences.
-   */
-  fun configure() {
-    // Update the usable sheet height
-    maxScreenHeight = Utils.screenHeight(reactContext)
-
-    var contentHeight = 0
-
-    contentView?.let { contentHeight = it.height }
-    footerView?.let { contentHeight += it.height }
-
-    // Configure sheet sizes
-    apply {
-      skipCollapsed = false
-      isFitToContents = true
-
-      // m3 max width 640dp
-      maxWidth = Utils.toPixel(640.0)
-
-      when (sizes.size) {
-        1 -> {
-          maxHeight = getSizeHeight(sizes[0], contentHeight)
-          peekHeight = maxHeight
-          skipCollapsed = true
-        }
-
-        2 -> {
-          peekHeight = getSizeHeight(sizes[0], contentHeight)
-          maxHeight = getSizeHeight(sizes[1], contentHeight)
-        }
-
-        3 -> {
-          // Enables half expanded
-          isFitToContents = false
-
-          peekHeight = getSizeHeight(sizes[0], contentHeight)
-          halfExpandedRatio = getSizeHeight(sizes[1], contentHeight).toFloat() / maxScreenHeight.toFloat()
-          maxHeight = getSizeHeight(sizes[2], contentHeight)
-        }
-      }
-    }
-  }
-
-  /**
-   * Get the SizeInfo data by state.
-   */
-  fun getSizeInfoForState(state: Int): SizeInfo? =
-    when (sizes.size) {
-      1 -> {
-        when (state) {
-          STATE_EXPANDED -> SizeInfo(0, Utils.toDIP(maxHeight))
-          else -> null
-        }
-      }
-
-      2 -> {
-        when (state) {
-          STATE_COLLAPSED -> SizeInfo(0, Utils.toDIP(peekHeight))
-          STATE_EXPANDED -> SizeInfo(1, Utils.toDIP(maxHeight))
-          else -> null
-        }
-      }
-
-      3 -> {
-        when (state) {
-          STATE_COLLAPSED -> SizeInfo(0, Utils.toDIP(peekHeight))
-
-          STATE_HALF_EXPANDED -> {
-            val height = halfExpandedRatio * maxScreenHeight
-            SizeInfo(1, Utils.toDIP(height.toInt()))
-          }
-
-          STATE_EXPANDED -> SizeInfo(2, Utils.toDIP(maxHeight))
-
-          else -> null
-        }
-      }
-
-      else -> null
-    }
-
-  /**
-   * Get SizeInfo data for given size index.
-   */
-  fun getSizeInfoForIndex(index: Int) = getSizeInfoForState(getStateForSizeIndex(index)) ?: SizeInfo(0, 0f)
-
-  /**
-   * Set the state based on the given size index.
-   */
-  fun setStateForSizeIndex(index: Int) {
-    state = getStateForSizeIndex(index)
-  }
-
-  companion object {
-    const val TAG = "TrueSheetView"
-  }
-}