@lodev09/react-native-true-sheet 3.5.7 → 3.6.0

package/src/TrueSheet.web.tsx

@@ -48,11 +48,30 @@ import type {
 } from './TrueSheet.types';
 
 const DEFAULT_CORNER_RADIUS = 16;
+const DEFAULT_ELEVATION = 4;
 
 const DEFAULT_GRABBER_COLOR = 'rgba(0, 0, 0, 0.3)';
 const DEFAULT_GRABBER_WIDTH = 32;
 const DEFAULT_GRABBER_HEIGHT = 4;
 
+/**
+ * Converts elevation to CSS box-shadow based on Material Design 3 elevation system.
+ * Uses a combination of ambient and key shadows for realistic depth.
+ */
+const getElevationShadow = (elevation: number): string => {
+  if (elevation <= 0) return 'none';
+
+  const ambientY = elevation * 0.5;
+  const ambientBlur = elevation * 1.5;
+  const ambientOpacity = 0.08 + elevation * 0.01;
+
+  const keyY = elevation;
+  const keyBlur = elevation * 2;
+  const keyOpacity = 0.12 + elevation * 0.02;
+
+  return `0px ${ambientY}px ${ambientBlur}px rgba(0, 0, 0, ${ambientOpacity}), 0px ${keyY}px ${keyBlur}px rgba(0, 0, 0, ${keyOpacity})`;
+};
+
 const renderSlot = (slot: TrueSheetProps['header'] | TrueSheetProps['footer']) => {
   if (!slot) return null;
   if (isValidElement(slot)) return slot;
@@ -72,11 +91,14 @@ export const TrueSheet = forwardRef<TrueSheetRef, TrueSheetProps>((props, ref) =
     initialDetentIndex = -1,
     backgroundColor = '#ffffff',
     cornerRadius = DEFAULT_CORNER_RADIUS,
+    elevation = DEFAULT_ELEVATION,
     grabber = true,
     grabberOptions,
     maxHeight,
     header,
+    headerStyle,
     footer,
+    footerStyle,
     onMount,
     onWillPresent,
     onDidPresent,
@@ -323,12 +345,15 @@ export const TrueSheet = forwardRef<TrueSheetRef, TrueSheetProps>((props, ref) =
     () =>
       footer
         ? (footerProps: BottomSheetFooterProps) => (
-            <BottomSheetFooter style={styles.footer} {...footerProps}>
+            <BottomSheetFooter
+              style={StyleSheet.flatten([styles.footer, footerStyle])}
+              {...footerProps}
+            >
               {renderSlot(footer)}
             </BottomSheetFooter>
           )
         : undefined,
-    [footer]
+    [footer, footerStyle]
   );
 
   // For scrollable, we render the child directly
@@ -412,7 +437,7 @@ export const TrueSheet = forwardRef<TrueSheetRef, TrueSheetProps>((props, ref) =
 
   const sheetContent = (
     <ContainerComponent>
-      {renderSlot(header)}
+      {header && <View style={headerStyle}>{renderSlot(header)}</View>}
       {scrollable ? children : <View style={style}>{children}</View>}
     </ContainerComponent>
   );
@@ -420,7 +445,12 @@ export const TrueSheet = forwardRef<TrueSheetRef, TrueSheetProps>((props, ref) =
   const sharedProps = {
     style: [
       styles.root,
-      { backgroundColor, borderTopLeftRadius: cornerRadius, borderTopRightRadius: cornerRadius },
+      {
+        backgroundColor,
+        borderTopLeftRadius: cornerRadius,
+        borderTopRightRadius: cornerRadius,
+        boxShadow: getElevationShadow(elevation),
+      },
     ],
     index: snapIndex,
     enablePanDownToClose: dismissible,
@@ -464,7 +494,6 @@ export const TrueSheet = forwardRef<TrueSheetRef, TrueSheetProps>((props, ref) =
 const styles = StyleSheet.create({
   root: {
     overflow: 'hidden',
-    boxShadow: '0px -2px 16px 0px rgba(9, 10, 9, 0.08)',
   },
   handle: {
     position: 'absolute',

package/src/fabric/TrueSheetViewNativeComponent.ts

@@ -41,6 +41,7 @@ export interface NativeProps extends ViewProps {
   // Number properties - use 0 as default to avoid nil insertion
   maxHeight?: WithDefault<Double, 0>;
   cornerRadius?: WithDefault<Double, -1>;
+  elevation?: WithDefault<Double, -1>;
 
   // Color properties
   backgroundColor?: ColorValue;
@@ -48,7 +49,7 @@ export interface NativeProps extends ViewProps {
   dimmedDetentIndex?: WithDefault<Int32, 0>;
 
   // String properties - use empty string as default to avoid nil insertion
-  blurTint?: WithDefault<string, ''>;
+  backgroundBlur?: WithDefault<string, ''>;
 
   insetAdjustment?: WithDefault<'automatic' | 'never', 'automatic'>;
 

package/src/navigation/types.ts

@@ -133,7 +133,7 @@ export type TrueSheetNavigationOptions = Pick<
   | 'grabberOptions'
   | 'dimmed'
   | 'dimmedDetentIndex'
-  | 'blurTint'
+  | 'backgroundBlur'
   | 'blurOptions'
   | 'maxHeight'
   | 'scrollable'