@lodev09/react-native-true-sheet 2.0.5 → 4.0.0-beta.0

package/src/reanimated/ReanimatedTrueSheet.tsx

@@ -0,0 +1,95 @@
+import { forwardRef } from 'react';
+import Animated, {
+  type WithSpringConfig,
+  type WithTimingConfig,
+  withSpring,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated';
+import { Platform } from 'react-native';
+
+import { TrueSheet } from '../TrueSheet';
+import type { TrueSheetProps, PositionChangeEvent } from '../TrueSheet.types';
+import { useReanimatedTrueSheet } from './ReanimatedTrueSheetProvider';
+import { useReanimatedPositionChangeHandler } from './useReanimatedPositionChangeHandler';
+
+const SPRING_CONFIG: WithSpringConfig = {
+  damping: 500,
+  stiffness: 1000,
+  mass: 3,
+  overshootClamping: true,
+};
+
+const TIMING_CONFIG: WithTimingConfig = {
+  duration: 300,
+  easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+};
+
+interface ReanimatedTrueSheetProps extends TrueSheetProps {
+  /**
+   * Worklet version of `onPositionChange`
+   *
+   * @see {@link TrueSheetProps.onPositionChange}
+   */
+  onPositionChange?: TrueSheetProps['onPositionChange'];
+}
+
+// Create animated version of TrueSheet
+const AnimatedTrueSheet = Animated.createAnimatedComponent(TrueSheet);
+
+/**
+ * Reanimated-enabled version of TrueSheet that automatically syncs position with the provider's shared value.
+ * Must be used within a ReanimatedTrueSheetProvider.
+ *
+ * NOTE: `onPositionChange` is now under UI thread.
+ * Make sure you add `worklet` if you want to override this.
+ *
+ * @example
+ * ```tsx
+ * import { ReanimatedTrueSheet, ReanimatedTrueSheetProvider } from '@lodev09/react-native-true-sheet'
+ *
+ * function MyScreen() {
+ *   const sheetRef = useRef<TrueSheet>(null)
+ *
+ *   return (
+ *     <ReanimatedTrueSheetProvider>
+ *       <View>
+ *         <ReanimatedTrueSheet
+ *           ref={sheetRef}
+ *           detents={[0.25, 0.5, 1]}
+ *           initialDetentIndex={1}
+ *         >
+ *           <Text>Sheet Content</Text>
+ *         </ReanimatedTrueSheet>
+ *       </View>
+ *     </ReanimatedTrueSheetProvider>
+ *   )
+ * }
+ * ```
+ */
+export const ReanimatedTrueSheet = forwardRef<TrueSheet, ReanimatedTrueSheetProps>((props, ref) => {
+  const { onPositionChange, ...rest } = props;
+
+  const { animatedPosition, animatedIndex } = useReanimatedTrueSheet();
+
+  const positionChangeHandler = useReanimatedPositionChangeHandler((payload) => {
+    'worklet';
+
+    // When transitioning=true, we animate the position manually for smooth transitions.
+    // This is used when native can't provide real-time position updates during animations.
+    if (payload.transitioning) {
+      if (Platform.OS === 'android') {
+        animatedPosition.value = withTiming(payload.position, TIMING_CONFIG);
+      } else {
+        animatedPosition.value = withSpring(payload.position, SPRING_CONFIG);
+      }
+    } else {
+      animatedPosition.value = payload.position;
+    }
+
+    animatedIndex.value = payload.index;
+    onPositionChange?.({ nativeEvent: payload } as PositionChangeEvent);
+  });
+
+  return <AnimatedTrueSheet ref={ref} onPositionChange={positionChangeHandler} {...rest} />;
+});

package/src/reanimated/ReanimatedTrueSheetProvider.tsx

@@ -0,0 +1,92 @@
+import { createContext, useContext, useMemo, type ReactNode } from 'react';
+import { useWindowDimensions } from 'react-native';
+import { useSharedValue, type SharedValue } from 'react-native-reanimated';
+
+export interface ReanimatedTrueSheetContextValue {
+  /**
+   * Shared value representing the current sheet position (Y offset from bottom)
+   */
+  animatedPosition: SharedValue<number>;
+  /**
+   * Shared value representing the current detent index
+   */
+  animatedIndex: SharedValue<number>;
+}
+
+const ReanimatedTrueSheetContext = createContext<ReanimatedTrueSheetContextValue | null>(null);
+
+export interface ReanimatedTrueSheetProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * Provider component that manages shared values for Reanimated TrueSheet.
+ * Wrap your app or component tree with this provider to enable Reanimated integration.
+ *
+ * @example
+ * ```tsx
+ * import { ReanimatedTrueSheetProvider } from '@lodev09/react-native-true-sheet'
+ *
+ * function App() {
+ *   return (
+ *     <ReanimatedTrueSheetProvider>
+ *       <YourApp />
+ *     </ReanimatedTrueSheetProvider>
+ *   )
+ * }
+ * ```
+ */
+export const ReanimatedTrueSheetProvider = ({ children }: ReanimatedTrueSheetProviderProps) => {
+  const { height } = useWindowDimensions();
+  const animatedPosition = useSharedValue(height);
+  const animatedIndex = useSharedValue(-1);
+
+  const value = useMemo(
+    () => ({
+      animatedPosition,
+      animatedIndex,
+    }),
+    [animatedPosition, animatedIndex]
+  );
+
+  return (
+    <ReanimatedTrueSheetContext.Provider value={value}>
+      {children}
+    </ReanimatedTrueSheetContext.Provider>
+  );
+};
+
+/**
+ * Hook to access the Reanimated TrueSheet context.
+ * Returns the shared values for sheet position and detent index that can be used in animations.
+ *
+ * @throws Error if used outside of ReanimatedTrueSheetProvider
+ *
+ * @example
+ * ```tsx
+ * import { useReanimatedTrueSheet } from '@lodev09/react-native-true-sheet'
+ * import { useAnimatedStyle } from 'react-native-reanimated'
+ *
+ * function MyComponent() {
+ *   const { animatedPosition, animatedIndex } = useReanimatedTrueSheet()
+ *
+ *   const animatedStyle = useAnimatedStyle(() => ({
+ *     transform: [{ translateY: -animatedPosition.value }]
+ *   }))
+ *
+ *   return <Animated.View style={animatedStyle}>...</Animated.View>
+ * }
+ * ```
+ */
+export const useReanimatedTrueSheet = (): ReanimatedTrueSheetContextValue => {
+  const context = useContext(ReanimatedTrueSheetContext);
+
+  if (!context) {
+    throw new Error(
+      'useReanimatedTrueSheet must be used within a ReanimatedTrueSheetProvider. ' +
+        'Make sure to wrap your component tree with <ReanimatedTrueSheetProvider>.'
+    );
+  }
+
+  return context;
+};

package/src/reanimated/index.ts

@@ -0,0 +1,3 @@
+export * from './ReanimatedTrueSheet';
+export * from './ReanimatedTrueSheetProvider';
+export * from './useReanimatedPositionChangeHandler';

package/src/reanimated/useReanimatedPositionChangeHandler.ts

@@ -0,0 +1,26 @@
+import { useEvent, useHandler } from 'react-native-reanimated';
+import type { PositionChangeEvent, PositionChangeEventPayload } from '../TrueSheet.types';
+import type { DependencyList } from 'react-native-reanimated/lib/typescript/hook/commonTypes';
+
+type PositionChangeHandler = (
+  payload: PositionChangeEventPayload,
+  context: Record<string, unknown>
+) => void;
+
+export const useReanimatedPositionChangeHandler = (
+  handler: PositionChangeHandler,
+  dependencies: DependencyList = []
+) => {
+  const { context, doDependenciesDiffer } = useHandler({ onPositionChange: handler }, dependencies);
+
+  return useEvent<PositionChangeEvent>(
+    (event) => {
+      'worklet';
+      if (handler && event.eventName.endsWith('onPositionChange')) {
+        handler(event, context);
+      }
+    },
+    ['onPositionChange'],
+    doDependenciesDiffer
+  );
+};

package/src/specs/NativeTrueSheetModule.ts

@@ -0,0 +1,38 @@
+/**
+ * TurboModule spec for TrueSheet imperative API
+ * Provides promise-based async operations with proper error handling
+ *
+ * @format
+ */
+
+import type { TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
+
+interface Spec extends TurboModule {
+  /**
+   * Present a sheet by reference
+   * @param viewTag - Native view tag of the sheet component
+   * @param index - Detent index to present at
+   * @returns Promise that resolves when sheet is fully presented
+   * @throws PRESENT_FAILED if presentation fails
+   */
+  presentByRef(viewTag: number, index: number): Promise<void>;
+
+  /**
+   * Dismiss a sheet by reference
+   * @param viewTag - Native view tag of the sheet component
+   * @returns Promise that resolves when sheet is fully dismissed
+   * @throws DISMISS_FAILED if dismissal fails
+   */
+  dismissByRef(viewTag: number): Promise<void>;
+
+  /**
+   * Resize a sheet to a different index by reference
+   * @param viewTag - Native view tag of the sheet component
+   * @param index - New detent index
+   * @returns Promise that resolves when resize is complete
+   */
+  resizeByRef(viewTag: number, index: number): Promise<void>;
+}
+
+export default TurboModuleRegistry.get<Spec>('TrueSheetModule');

package/TrueSheet.podspec

@@ -1,49 +0,0 @@
-require "json"
-
-package = JSON.parse(File.read(File.join(__dir__, "package.json")))
-folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
-
-Pod::Spec.new do |s|
-  s.name         = "TrueSheet"
-  s.version      = package["version"]
-  s.summary      = package["description"]
-  s.homepage     = package["homepage"]
-  s.license      = package["license"]
-  s.authors      = package["author"]
-
-  s.platforms    = { :ios => "13.4" }
-  s.source       = { :git => "https://github.com/lodev09/react-native-true-sheet.git", :tag => "#{s.version}" }
-
-  s.source_files = "ios/**/*.{h,m,mm,swift}"
-
-  if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
-    s.pod_target_xcconfig = {
-      # Detect if new arch is enabled in Swift code
-      "OTHER_SWIFT_FLAGS" => "-DRCT_NEW_ARCH_ENABLED"
-    }
-  end
-
-  # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
-  # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.
-  if respond_to?(:install_modules_dependencies, true)
-    install_modules_dependencies(s)
-  else
-    s.dependency "React-Core"
-
-    # Don't install the dependencies when we run `pod install` in the old architecture.
-    if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
-      s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
-      s.pod_target_xcconfig = s.pod_target_xcconfig | {
-        "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
-        "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
-        "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
-      }
-      s.dependency "React-RCTFabric"
-      s.dependency "React-Codegen"
-      s.dependency "RCT-Folly"
-      s.dependency "RCTRequired"
-      s.dependency "RCTTypeSafety"
-      s.dependency "ReactCommon/turbomodule/core"
-    end
-  end
-end

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

@@ -1,400 +0,0 @@
-package com.lodev09.truesheet
-
-import android.annotation.SuppressLint
-import android.graphics.Color
-import android.graphics.drawable.ShapeDrawable
-import android.graphics.drawable.shapes.RoundRectShape
-import android.view.View
-import android.view.ViewGroup
-import android.view.WindowManager
-import com.facebook.react.uimanager.ThemedReactContext
-import com.google.android.material.bottomsheet.BottomSheetBehavior
-import com.google.android.material.bottomsheet.BottomSheetDialog
-import com.lodev09.truesheet.core.KeyboardManager
-import com.lodev09.truesheet.core.RootSheetView
-import com.lodev09.truesheet.core.Utils
-
-data class SizeInfo(val index: Int, val value: Float)
-
-@SuppressLint("ClickableViewAccessibility")
-class TrueSheetDialog(private val reactContext: ThemedReactContext, private val rootSheetView: RootSheetView) :
-  BottomSheetDialog(reactContext) {
-
-  private var keyboardManager = KeyboardManager(reactContext)
-  private var windowAnimation: Int = 0
-
-  // First child of the rootSheetView
-  private val containerView: ViewGroup?
-    get() = if (rootSheetView.childCount > 0) {
-      rootSheetView.getChildAt(0) as? ViewGroup
-    } else {
-      null
-    }
-
-  private val sheetContainerView: ViewGroup?
-    get() = rootSheetView.parent?.let { it as? ViewGroup }
-
-  /**
-   * Specify whether the sheet background is dimmed.
-   * Set to `false` to allow interaction with the background components.
-   */
-  var dimmed = true
-
-  /**
-   * The size index that the sheet should start to dim the background.
-   * This is ignored if `dimmed` is set to `false`.
-   */
-  var dimmedIndex = 0
-
-  /**
-   * The maximum window height
-   */
-  var maxScreenHeight = 0
-
-  var contentHeight = 0
-  var footerHeight = 0
-  var maxSheetHeight: Int? = null
-
-  var edgeToEdge: Boolean = false
-    set(value) {
-      field = value
-      maxScreenHeight = Utils.screenHeight(reactContext, value)
-    }
-
-  var dismissible: Boolean = true
-    set(value) {
-      field = value
-      setCanceledOnTouchOutside(value)
-      setCancelable(value)
-
-      behavior.isHideable = value
-    }
-
-  var cornerRadius: Float = 0f
-  var backgroundColor: Int = Color.WHITE
-
-  // 1st child is the content view
-  val contentView: ViewGroup?
-    get() = containerView?.getChildAt(0) as? ViewGroup
-
-  // 2nd child is the footer view
-  val footerView: ViewGroup?
-    get() = containerView?.getChildAt(1) as? ViewGroup
-
-  var sizes: Array<Any> = arrayOf("medium", "large")
-
-  init {
-    setContentView(rootSheetView)
-
-    sheetContainerView?.setBackgroundColor(backgroundColor)
-    sheetContainerView?.clipToOutline = true
-
-    // Setup window params to adjust layout based on Keyboard state
-    window?.apply {
-      // Store current windowAnimation value to toggle later
-      windowAnimation = attributes.windowAnimations
-    }
-
-    // Update the usable sheet height
-    maxScreenHeight = Utils.screenHeight(reactContext, edgeToEdge)
-  }
-
-  override fun getEdgeToEdgeEnabled(): Boolean = edgeToEdge || super.getEdgeToEdgeEnabled()
-
-  override fun onStart() {
-    super.onStart()
-
-    if (edgeToEdge) {
-      window?.apply {
-        setFlags(
-          WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
-          WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
-        )
-
-        decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
-      }
-    }
-  }
-
-  /**
-   * Setup background color and corner radius.
-   */
-  fun setupBackground() {
-    val outerRadii = floatArrayOf(
-      cornerRadius,
-      cornerRadius,
-      cornerRadius,
-      cornerRadius,
-      0f,
-      0f,
-      0f,
-      0f
-    )
-
-    val background = ShapeDrawable(RoundRectShape(outerRadii, null, null))
-
-    // Use current background color
-    background.paint.color = backgroundColor
-    sheetContainerView?.background = background
-  }
-
-  /**
-   * Setup dimmed sheet.
-   * `dimmedIndex` will further customize the dimming behavior.
-   */
-  fun setupDimmedBackground(sizeIndex: Int) {
-    window?.apply {
-      val view = findViewById<View>(com.google.android.material.R.id.touch_outside)
-
-      if (dimmed && sizeIndex >= dimmedIndex) {
-        // Remove touch listener
-        view.setOnTouchListener(null)
-
-        // Add the dimmed background
-        setFlags(
-          WindowManager.LayoutParams.FLAG_DIM_BEHIND,
-          WindowManager.LayoutParams.FLAG_DIM_BEHIND
-        )
-
-        setCanceledOnTouchOutside(dismissible)
-      } else {
-        // Override the background touch and pass it to the components outside
-        view.setOnTouchListener { v, event ->
-          event.setLocation(event.rawX - v.x, event.rawY - v.y)
-          reactContext.currentActivity?.dispatchTouchEvent(event)
-          false
-        }
-
-        // Remove the dimmed background
-        clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND)
-
-        setCanceledOnTouchOutside(false)
-      }
-    }
-  }
-
-  fun resetAnimation() {
-    window?.apply {
-      setWindowAnimations(windowAnimation)
-    }
-  }
-
-  /**
-   * Present the sheet.
-   */
-  fun present(sizeIndex: Int, animated: Boolean = true) {
-    setupDimmedBackground(sizeIndex)
-    if (isShowing) {
-      setStateForSizeIndex(sizeIndex)
-    } else {
-      configure()
-      setStateForSizeIndex(sizeIndex)
-
-      if (!animated) {
-        // Disable animation
-        window?.setWindowAnimations(0)
-      }
-
-      show()
-    }
-  }
-
-  fun positionFooter() {
-    footerView?.let { footer ->
-      sheetContainerView?.let { container ->
-        footer.y = (maxScreenHeight - container.top - footerHeight).toFloat()
-      }
-    }
-  }
-
-  /**
-   * Set the state based for the given size index.
-   */
-  private fun setStateForSizeIndex(index: Int) {
-    behavior.state = getStateForSizeIndex(index)
-  }
-
-  /**
-   * Get the height value based on the size config value.
-   */
-  private fun getSizeHeight(size: Any): Int {
-    val height: Int =
-      when (size) {
-        is Double -> Utils.toPixel(size).toInt()
-
-        is Int -> Utils.toPixel(size.toDouble()).toInt()
-
-        is String -> {
-          when (size) {
-            "auto" -> contentHeight + footerHeight
-
-            "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).toInt()
-                }
-              }
-            }
-          }
-        }
-
-        else -> (maxScreenHeight * 0.5).toInt()
-      }
-
-    return maxSheetHeight?.let { minOf(height, it, maxScreenHeight) } ?: minOf(height, maxScreenHeight)
-  }
-
-  /**
-   * Determines the state based from the given size index.
-   */
-  private fun getStateForSizeIndex(index: Int) =
-    when (sizes.size) {
-      1 -> BottomSheetBehavior.STATE_EXPANDED
-
-      2 -> {
-        when (index) {
-          0 -> BottomSheetBehavior.STATE_COLLAPSED
-          1 -> BottomSheetBehavior.STATE_EXPANDED
-          else -> BottomSheetBehavior.STATE_HIDDEN
-        }
-      }
-
-      3 -> {
-        when (index) {
-          0 -> BottomSheetBehavior.STATE_COLLAPSED
-          1 -> BottomSheetBehavior.STATE_HALF_EXPANDED
-          2 -> BottomSheetBehavior.STATE_EXPANDED
-          else -> BottomSheetBehavior.STATE_HIDDEN
-        }
-      }
-
-      else -> BottomSheetBehavior.STATE_HIDDEN
-    }
-
-  /**
-   * Handle keyboard state changes and adjust maxScreenHeight (sheet max height) accordingly.
-   * Also update footer's Y position.
-   */
-  fun registerKeyboardManager() {
-    keyboardManager.registerKeyboardListener(object : KeyboardManager.OnKeyboardChangeListener {
-      override fun onKeyboardStateChange(isVisible: Boolean, visibleHeight: Int?) {
-        maxScreenHeight = when (isVisible) {
-          true -> visibleHeight ?: 0
-          else -> Utils.screenHeight(reactContext, edgeToEdge)
-        }
-
-        positionFooter()
-      }
-    })
-  }
-
-  fun setOnSizeChangeListener(listener: (w: Int, h: Int) -> Unit) {
-    rootSheetView.sizeChangeListener = listener
-  }
-
-  /**
-   * Remove keyboard listener.
-   */
-  fun unregisterKeyboardManager() {
-    keyboardManager.unregisterKeyboardListener()
-  }
-
-  /**
-   * Configure the sheet based from the size preference.
-   */
-  fun configure() {
-    // Configure sheet sizes
-    behavior.apply {
-      skipCollapsed = false
-      isFitToContents = true
-
-      // m3 max width 640dp
-      maxWidth = Utils.toPixel(640.0).toInt()
-
-      when (sizes.size) {
-        1 -> {
-          maxHeight = getSizeHeight(sizes[0])
-          skipCollapsed = true
-        }
-
-        2 -> {
-          setPeekHeight(getSizeHeight(sizes[0]), isShowing)
-          maxHeight = getSizeHeight(sizes[1])
-        }
-
-        3 -> {
-          // Enables half expanded
-          isFitToContents = false
-
-          setPeekHeight(getSizeHeight(sizes[0]), isShowing)
-
-          halfExpandedRatio = minOf(getSizeHeight(sizes[1]).toFloat() / maxScreenHeight.toFloat(), 1.0f)
-          maxHeight = getSizeHeight(sizes[2])
-        }
-      }
-    }
-  }
-
-  /**
-   * Get the SizeInfo data by state.
-   */
-  fun getSizeInfoForState(state: Int): SizeInfo? =
-    when (sizes.size) {
-      1 -> {
-        when (state) {
-          BottomSheetBehavior.STATE_EXPANDED -> SizeInfo(0, Utils.toDIP(behavior.maxHeight.toFloat()))
-          else -> null
-        }
-      }
-
-      2 -> {
-        when (state) {
-          BottomSheetBehavior.STATE_COLLAPSED -> SizeInfo(0, Utils.toDIP(behavior.peekHeight.toFloat()))
-          BottomSheetBehavior.STATE_EXPANDED -> SizeInfo(1, Utils.toDIP(behavior.maxHeight.toFloat()))
-          else -> null
-        }
-      }
-
-      3 -> {
-        when (state) {
-          BottomSheetBehavior.STATE_COLLAPSED -> SizeInfo(0, Utils.toDIP(behavior.peekHeight.toFloat()))
-
-          BottomSheetBehavior.STATE_HALF_EXPANDED -> {
-            val height = behavior.halfExpandedRatio * maxScreenHeight
-            SizeInfo(1, Utils.toDIP(height))
-          }
-
-          BottomSheetBehavior.STATE_EXPANDED -> SizeInfo(2, Utils.toDIP(behavior.maxHeight.toFloat()))
-
-          else -> null
-        }
-      }
-
-      else -> null
-    }
-
-  /**
-   * Get SizeInfo data for given size index.
-   */
-  fun getSizeInfoForIndex(index: Int) = getSizeInfoForState(getStateForSizeIndex(index)) ?: SizeInfo(0, 0f)
-
-  companion object {
-    const val TAG = "TrueSheetView"
-  }
-}