@lodev09/react-native-true-sheet 2.0.6 → 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