@lodev09/react-native-true-sheet 0.1.0

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

@@ -0,0 +1,94 @@
+import type { Component, ComponentType, RefObject } from 'react';
+import type { ColorValue, ViewProps } from 'react-native';
+export interface SizeChangeEvent {
+    index: number;
+    value: number;
+}
+/**
+ * Supported Sheet size.
+ * Requires IOS 15+
+ */
+export type SheetSize = 
+/**
+ * Auto resize based on content height
+ *
+ * @platform android
+ * @platform ios 16+
+ */
+'auto'
+/**
+ * Fixed height
+ *
+ * @platform android
+ * @platform ios 16+
+ */
+ | number
+/**
+ * Fixed height in %
+ *
+ * @platform android
+ * @platform ios 16+
+ */
+ | `${number}%`
+/**
+ * Translates to 25%
+ *
+ * @platform android
+ * @platform ios 16+
+ */
+ | 'small'
+/**
+ * Translates to 50%
+ *
+ * @platform android
+ * @platform ios 15+
+ */
+ | 'medium'
+/**
+ * Translates to 100%
+ *
+ * @platform android
+ * @platform ios 15+
+ */
+ | 'large';
+export interface TrueSheetProps extends ViewProps {
+    /**
+     * Main sheet background color
+     */
+    backgroundColor?: ColorValue;
+    /**
+     * The main scrollable ref that Sheet should handle.
+     */
+    scrollRef?: RefObject<Component<unknown>>;
+    /**
+     * The sizes you want the Sheet to support.
+     * IMPORTANT! Sort them in ascending order
+     *
+     * Example:
+     * ```ts
+     * size={['auto', 400, '80%', 'large']}
+     * ```
+     *
+     * @default ['medium', 'large']
+     */
+    sizes?: SheetSize[];
+    /**
+     * A component that floats at the bottom of the Sheet.
+     */
+    FooterComponent?: ComponentType<unknown>;
+    /**
+     * Called when the Sheet has been presented.
+     * Comes with the size index.
+     */
+    onPresent?: () => void;
+    /**
+     * Called when the Sheet has been dismissed
+     */
+    onDismiss?: () => void;
+    /**
+     * Called when the size of the sheet has changed.
+     * Either by dragging or programatically.
+     */
+    onSizeChange?: (event: SizeChangeEvent) => void;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAChE,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAEzD,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED;;;GAGG;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;;OAEG;IACH,eAAe,CAAC,EAAE,UAAU,CAAA;IAE5B;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IAEzC;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,SAAS,EAAE,CAAA;IAEnB;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAA;IAExC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IAEtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAA;CAChD"}

package/package.json

@@ -0,0 +1,183 @@
+{
+  "name": "@lodev09/react-native-true-sheet",
+  "version": "0.1.0",
+  "description": "The true native bottom sheet. 💩",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/src/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace true-sheet-example",
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint --fix \"**/*.{js,ts,tsx}\"",
+    "format": "prettier --write \"**/*.{js,ts,tsx}\"",
+    "tidy": "yarn typecheck && yarn lint && yarn format && scripts/swiftlint.sh && scripts/swiftformat.sh",
+    "clean": "del-cli android/build lib && yarn workspace true-sheet-example clean",
+    "prepare": "bob build",
+    "release": "release-it"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lodev09/react-native-true-sheet.git"
+  },
+  "author": "lodev09 <lodev09@gmail.com> (https://github.com/lodev09)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/lodev09/react-native-true-sheet/issues"
+  },
+  "homepage": "https://github.com/lodev09/react-native-true-sheet#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.0.3",
+    "@evilmartians/lefthook": "^1.6.5",
+    "@react-native/eslint-config": "^0.73.2",
+    "@release-it/conventional-changelog": "^8.0.1",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.2.64",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
+    "commitlint": "^19.0.3",
+    "del-cli": "^5.1.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^16.6.2",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-promise": "^6.1.1",
+    "jest": "^29.7.0",
+    "prettier": "^3.2.5",
+    "react": "^18.2.0",
+    "react-native": "^0.73.5",
+    "react-native-builder-bob": "^0.23.2",
+    "release-it": "^17.1.1",
+    "turbo": "^1.12.5",
+    "typescript": "~5.3.3"
+  },
+  "resolutions": {
+    "@types/react": "^18.2.44"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.1.1",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true,
+      "comments": {
+        "submit": true,
+        "issue": ":rocket: _This issue has been resolved in v${version}. See [${releaseName}](${releaseUrl}) for release notes._",
+        "pr": ":rocket: _This pull request is included in v${version}. See [${releaseName}](${releaseUrl}) for release notes._"
+      }
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": "angular"
+      }
+    }
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "plugin:@typescript-eslint/recommended",
+      "eslint:recommended",
+      "plugin:react/recommended",
+      "plugin:react-native/all",
+      "standard",
+      "prettier"
+    ],
+    "globals": {
+      "it": false
+    },
+    "rules": {
+      "@typescript-eslint/no-var-requires": 0,
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          "argsIgnorePattern": "^_",
+          "varsIgnorePattern": "^_"
+        }
+      ],
+      "no-unused-vars": 0
+    },
+    "settings": {
+      "react": {
+        "pragma": "React",
+        "version": "detect"
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false,
+    "printWidth": 100,
+    "semi": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
+}

package/src/TrueSheet.tsx

@@ -0,0 +1,162 @@
+import React, { PureComponent, Component, type RefObject, createRef, type ReactNode } from 'react'
+import {
+  requireNativeComponent,
+  Platform,
+  findNodeHandle,
+  type NativeMethods,
+  type ViewStyle,
+  View,
+  type ViewProps,
+  type NativeSyntheticEvent,
+  type StyleProp,
+  type ColorValue,
+} from 'react-native'
+
+import type { TrueSheetProps, SizeChangeEvent } from './types'
+import { TrueSheetModule } from './TrueSheetModule'
+
+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 {
+  scrollableHandle: number | null
+  footerHandle: number | null
+  onDismiss: () => void
+  onPresent: (event: NativeSyntheticEvent<{ index: number }>) => void
+  onSizeChange: (event: NativeSyntheticEvent<SizeChangeEvent>) => void
+  children: ReactNode
+  backgroundColor?: ColorValue
+  style: StyleProp<ViewStyle>
+  sizes: TrueSheetProps['sizes']
+}
+
+const TrueSheetNativeView = requireNativeComponent<TrueSheetNativeViewProps>(ComponentName)
+
+if (!TrueSheetNativeView) {
+  throw new Error(LINKING_ERROR)
+}
+
+type NativeRef = Component<TrueSheetNativeViewProps> & Readonly<NativeMethods>
+type FooterRef = Component<ViewProps> & Readonly<NativeMethods>
+
+interface TrueSheetState {
+  scrollableHandle: number | null
+  footerHandle: number | null
+}
+
+export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
+  displayName = 'TrueSheet'
+
+  private readonly ref: RefObject<NativeRef>
+  private readonly footerRef: RefObject<FooterRef>
+
+  constructor(props: TrueSheetProps) {
+    super(props)
+
+    this.ref = createRef<NativeRef>()
+    this.footerRef = createRef<FooterRef>()
+
+    this.onDismiss = this.onDismiss.bind(this)
+    this.onPresent = this.onPresent.bind(this)
+    this.onSizeChange = this.onSizeChange.bind(this)
+
+    this.state = {
+      scrollableHandle: null,
+      footerHandle: null,
+    }
+  }
+
+  private get handle(): number {
+    const nodeHandle = findNodeHandle(this.ref.current)
+    if (nodeHandle == null || nodeHandle === -1) {
+      throw new Error(`Could not get native view tag`)
+    }
+
+    return nodeHandle
+  }
+
+  private updateHandles() {
+    const scrollableHandle = this.props.scrollRef?.current
+      ? findNodeHandle(this.props.scrollRef.current)
+      : null
+
+    const footerHandle = findNodeHandle(this.footerRef.current)
+
+    this.setState({
+      footerHandle,
+      scrollableHandle,
+    })
+  }
+
+  private onSizeChange(event: NativeSyntheticEvent<SizeChangeEvent>) {
+    this.props.onSizeChange?.(event.nativeEvent)
+  }
+
+  private onPresent(): void {
+    this.props.onPresent?.()
+  }
+
+  private onDismiss(): void {
+    this.props.onDismiss?.()
+  }
+
+  componentDidMount(): void {
+    this.updateHandles()
+  }
+
+  componentDidUpdate(): void {
+    this.updateHandles()
+  }
+
+  /**
+   * Present the modal sheet at size index.
+   * See `sizes` prop
+   */
+  public async present(index: number = 0) {
+    await TrueSheetModule.present(this.handle, index)
+  }
+
+  /**
+   * Dismiss the Sheet
+   */
+  public async dismiss() {
+    await TrueSheetModule.dismiss(this.handle)
+  }
+
+  render(): ReactNode {
+    const FooterComponent = this.props.FooterComponent
+
+    return (
+      <TrueSheetNativeView
+        ref={this.ref}
+        style={$nativeSheet}
+        scrollableHandle={this.state.scrollableHandle}
+        footerHandle={this.state.footerHandle}
+        sizes={this.props.sizes ?? ['medium', 'large']}
+        backgroundColor={this.props.backgroundColor}
+        onPresent={this.onPresent}
+        onDismiss={this.onDismiss}
+        onSizeChange={this.onSizeChange}
+      >
+        <View>
+          <View style={this.props.style}>{this.props.children}</View>
+          {!!FooterComponent && (
+            <View ref={this.footerRef}>
+              <FooterComponent />
+            </View>
+          )}
+        </View>
+      </TrueSheetNativeView>
+    )
+  }
+}
+
+const $nativeSheet: ViewStyle = {
+  position: 'absolute',
+  zIndex: -99,
+}

package/src/TrueSheetModule.ts

@@ -0,0 +1,18 @@
+import { NativeModules, Platform } from 'react-native'
+
+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'
+
+export const TrueSheetModule = NativeModules.TrueSheetViewManager
+  ? NativeModules.TrueSheetViewManager
+  : new Proxy(
+      {},
+      {
+        get() {
+          throw new Error(LINKING_ERROR)
+        },
+      }
+    )

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './types'
+export * from './TrueSheet'

package/src/types.ts

@@ -0,0 +1,107 @@
+import type { Component, ComponentType, RefObject } from 'react'
+import type { ColorValue, ViewProps } from 'react-native'
+
+export interface SizeChangeEvent {
+  index: number
+  value: number
+}
+
+/**
+ * Supported Sheet size.
+ * Requires IOS 15+
+ */
+export type SheetSize =
+  /**
+   * Auto resize based on content height
+   *
+   * @platform android
+   * @platform ios 16+
+   */
+  | 'auto'
+
+  /**
+   * Fixed height
+   *
+   * @platform android
+   * @platform ios 16+
+   */
+  | number
+
+  /**
+   * Fixed height in %
+   *
+   * @platform android
+   * @platform ios 16+
+   */
+  | `${number}%`
+
+  /**
+   * Translates to 25%
+   *
+   * @platform android
+   * @platform ios 16+
+   */
+  | 'small'
+
+  /**
+   * Translates to 50%
+   *
+   * @platform android
+   * @platform ios 15+
+   */
+  | 'medium'
+
+  /**
+   * Translates to 100%
+   *
+   * @platform android
+   * @platform ios 15+
+   */
+  | 'large'
+
+export interface TrueSheetProps extends ViewProps {
+  /**
+   * Main sheet background color
+   */
+  backgroundColor?: ColorValue
+
+  /**
+   * The main scrollable ref that Sheet should handle.
+   */
+  scrollRef?: RefObject<Component<unknown>>
+
+  /**
+   * The sizes you want the Sheet to support.
+   * IMPORTANT! Sort them in ascending order
+   *
+   * Example:
+   * ```ts
+   * size={['auto', 400, '80%', 'large']}
+   * ```
+   *
+   * @default ['medium', 'large']
+   */
+  sizes?: SheetSize[]
+
+  /**
+   * A component that floats at the bottom of the Sheet.
+   */
+  FooterComponent?: ComponentType<unknown>
+
+  /**
+   * Called when the Sheet has been presented.
+   * Comes with the size index.
+   */
+  onPresent?: () => void
+
+  /**
+   * Called when the Sheet has been dismissed
+   */
+  onDismiss?: () => void
+
+  /**
+   * Called when the size of the sheet has changed.
+   * Either by dragging or programatically.
+   */
+  onSizeChange?: (event: SizeChangeEvent) => void
+}