react-native-quick-preview 1.0.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Oliver Lindblad
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,188 @@
+# react-native-quicklook
+
+A beautiful, customizable quick preview modal component for React Native.  
+Think **Gorhom Bottom Sheet**, but for quick previews.
+
+Perfect for:
+- Instagram-style **long-press previews**
+- 🛍️ **E-commerce product quick views**
+- 📰 **Article teasers**
+- ✈️ **Travel destination peeks**
+- …any content that needs a **quick peek before full navigation**
+
+---
+
+## ✨ Features
+
+- 🎨 Smooth **fade, scale, and swipe-to-close animations**
+- 🎯 **Universal content** – works with any layout (products, posts, etc.)
+- 🎛️ **Customizable** – theme, behavior, styling, backdrop
+- ♿ **Accessibility ready** – screen reader & keyboard navigation
+- 📱 **Cross-platform** – iOS & Android
+- 🔧 **TypeScript support**
+- ⚡ **Performance optimized** – native drivers
+
+---
+
+## 📦 Installation
+
+```bash
+npm install react-native-quicklook
+# or
+yarn add react-native-quicklook
+```
+
+---
+
+## 🚀 Quick Start
+
+```tsx
+import React, { useState } from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { QuickLook } from 'react-native-quicklook';
+
+export default function App() {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <TouchableOpacity onPress={() => setVisible(true)}>
+        <Text>Show Quick Look</Text>
+      </TouchableOpacity>
+
+      <QuickLook visible={visible} onClose={() => setVisible(false)}>
+        <View style={{ backgroundColor: '#fff', padding: 20 }}>
+          <Text style={{ fontSize: 18, fontWeight: 'bold' }}>Quick Preview Content</Text>
+          <Text style={{ marginTop: 10 }}>Any custom content goes here.</Text>
+        </View>
+      </QuickLook>
+    </View>
+  );
+}
+```
+
+---
+
+## 📖 Usage Examples
+
+### 🛍️ E-commerce Product Quick View
+```tsx
+<QuickLook visible={visible} onClose={onClose} onPressCard={onViewDetails}>
+  <View>
+    <Image source={{ uri: product.image }} style={{ width: '100%', height: 200 }} />
+    <Text>{product.name}</Text>
+    <Text>{product.price}</Text>
+  </View>
+</QuickLook>
+```
+
+### 📰 Article Preview
+```tsx
+<QuickLook visible={visible} onClose={onClose} theme="dark">
+  <View style={{ backgroundColor: '#1a1a1a' }}>
+    <Image source={{ uri: article.coverImage }} style={{ width: '100%', height: 200 }} />
+    <Text style={{ color: '#fff' }}>{article.title}</Text>
+    <Text style={{ color: '#ccc' }}>{article.excerpt}</Text>
+  </View>
+</QuickLook>
+```
+
+### ✈️ Travel Destination Peek
+```tsx
+<QuickLook visible={visible} onClose={onClose}>
+  <Image source={{ uri: destination.image }} style={{ width: '100%', height: 200 }} />
+  <Text>{destination.title}</Text>
+  <Text>From ${destination.price}</Text>
+</QuickLook>
+```
+
+---
+
+## 🎛️ API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `visible` | `boolean` | **required** | Controls modal visibility |
+| `onClose` | `() => void` | **required** | Called when modal closes |
+| `onPressCard` | `() => void` | `undefined` | Card press handler |
+| `children` | `React.ReactNode` | `undefined` | Content to render |
+| `theme` | `'light' \| 'dark'` | `'light'` | Overlay theme |
+| `backdropOpacity` | `number` | `0.5 / 0.8` | Overlay opacity |
+| `animationDuration` | `number` | `220` | Animation duration |
+| `closeOnBackdropPress` | `boolean` | `true` | Close on backdrop press |
+| `closeOnBackButton` | `boolean` | `true` | Close on Android back button |
+| `enableSwipeToClose` | `boolean` | `true` | Swipe down to close |
+| `swipeThreshold` | `number` | `80` | Swipe distance threshold |
+| `unmountOnExit` | `boolean` | `true` | Unmount when hidden |
+| `avoidKeyboard` | `boolean` | `false` | Avoid keyboard overlap |
+| `renderBackdrop` | `(opacity) => ReactNode` | `undefined` | Custom backdrop |
+| `onBackdropPress` | `() => void` | `undefined` | Backdrop press handler |
+| `testID` | `string` | `'quicklook'` | Test identifier |
+| `accessibilityLabel` | `string` | `'Quick look'` | A11y label |
+| `stylesOverride` | `object` | `{}` | Override default styles |
+
+---
+
+## 🎨 Customization
+
+### Custom Backdrop
+```tsx
+<QuickLook
+  visible={visible}
+  onClose={onClose}
+  renderBackdrop={(opacity) => (
+    <Animated.View style={[StyleSheet.absoluteFill, { backgroundColor: 'rgba(255,0,0,0.5)', opacity }]} />
+  )}
+>
+  {/* content */}
+</QuickLook>
+```
+
+### Custom Styles
+```tsx
+<QuickLook
+  visible={visible}
+  onClose={onClose}
+  stylesOverride={{
+    container: { borderRadius: 24, backgroundColor: '#000' },
+    overlay: { backgroundColor: 'rgba(0,0,0,0.9)' }
+  }}
+>
+  {/* content */}
+</QuickLook>
+```
+
+---
+
+## 🧪 Testing
+
+```tsx
+import { render, fireEvent } from '@testing-library/react-native';
+
+test('QuickLook closes on backdrop press', () => {
+  const onClose = jest.fn();
+  const { getByTestId } = render(
+    <QuickLook visible={true} onClose={onClose} testID="quicklook">
+      <Text>Test content</Text>
+    </QuickLook>
+  );
+
+  fireEvent.press(getByTestId('ql-backdrop'));
+  expect(onClose).toHaveBeenCalled();
+});
+```
+
+---
+
+## 📱 Platform Support
+- ✅ iOS 12+
+- ✅ Android API 21+
+- ✅ Expo SDK 48+
+
+---
+
+## 📄 License
+
+MIT © Your Name

package/dist/index.d.mts

@@ -0,0 +1,42 @@
+import React, { ReactNode } from 'react';
+import { Animated } from 'react-native';
+
+type ThemeMode = 'light' | 'dark';
+type CloseReason = 'programmatic' | 'backdrop' | 'backButton' | 'swipe';
+interface QuickLookProps {
+    visible: boolean;
+    onClose: () => void;
+    /** Lifecycle hooks (great for haptics/analytics) */
+    onOpen?: () => void;
+    onClosed?: (reason: CloseReason) => void;
+    /** Optional: press whole card (prefer explicit CTAs as well) */
+    onPressCard?: () => void;
+    theme?: ThemeMode;
+    backdropOpacity?: number;
+    animationDuration?: number;
+    /** Behavior toggles */
+    closeOnBackdropPress?: boolean;
+    closeOnBackButton?: boolean;
+    enableSwipeToClose?: boolean;
+    swipeThreshold?: number;
+    unmountOnExit?: boolean;
+    avoidKeyboard?: boolean;
+    /** Headless content */
+    children?: ReactNode;
+    /** Backdrop customization */
+    renderBackdrop?: (opacity: Animated.AnimatedInterpolation<number>) => ReactNode;
+    onBackdropPress?: () => void;
+    /** Testing & a11y */
+    testID?: string;
+    accessibilityLabel?: string;
+    /** Outer wrapper style overrides */
+    stylesOverride?: {
+        overlay?: any;
+        container?: any;
+        centerWrap?: any;
+    };
+}
+
+declare const QuickLook: React.FC<QuickLookProps>;
+
+export { type CloseReason, QuickLook, type QuickLookProps, type ThemeMode };

package/dist/index.d.ts

@@ -0,0 +1,42 @@
+import React, { ReactNode } from 'react';
+import { Animated } from 'react-native';
+
+type ThemeMode = 'light' | 'dark';
+type CloseReason = 'programmatic' | 'backdrop' | 'backButton' | 'swipe';
+interface QuickLookProps {
+    visible: boolean;
+    onClose: () => void;
+    /** Lifecycle hooks (great for haptics/analytics) */
+    onOpen?: () => void;
+    onClosed?: (reason: CloseReason) => void;
+    /** Optional: press whole card (prefer explicit CTAs as well) */
+    onPressCard?: () => void;
+    theme?: ThemeMode;
+    backdropOpacity?: number;
+    animationDuration?: number;
+    /** Behavior toggles */
+    closeOnBackdropPress?: boolean;
+    closeOnBackButton?: boolean;
+    enableSwipeToClose?: boolean;
+    swipeThreshold?: number;
+    unmountOnExit?: boolean;
+    avoidKeyboard?: boolean;
+    /** Headless content */
+    children?: ReactNode;
+    /** Backdrop customization */
+    renderBackdrop?: (opacity: Animated.AnimatedInterpolation<number>) => ReactNode;
+    onBackdropPress?: () => void;
+    /** Testing & a11y */
+    testID?: string;
+    accessibilityLabel?: string;
+    /** Outer wrapper style overrides */
+    stylesOverride?: {
+        overlay?: any;
+        container?: any;
+        centerWrap?: any;
+    };
+}
+
+declare const QuickLook: React.FC<QuickLookProps>;
+
+export { type CloseReason, QuickLook, type QuickLookProps, type ThemeMode };

package/dist/index.js

@@ -0,0 +1,2 @@
+'use strict';var react=require('react'),reactNative=require('react-native'),jsxRuntime=require('react/jsx-runtime');var K=Object.defineProperty,U=Object.defineProperties;var X=Object.getOwnPropertyDescriptors;var Q=Object.getOwnPropertySymbols;var Z=Object.prototype.hasOwnProperty,B=Object.prototype.propertyIsEnumerable;var x=(r,e,a)=>e in r?K(r,e,{enumerable:true,configurable:true,writable:true,value:a}):r[e]=a,I=(r,e)=>{for(var a in e||(e={}))Z.call(e,a)&&x(r,a,e[a]);if(Q)for(var a of Q(e))B.call(e,a)&&x(r,a,e[a]);return r},S=(r,e)=>U(r,X(e));var {width:ne,height:_}=reactNative.Dimensions.get("window"),oe="dialog",se=(r,e)=>`rgba(0,0,0,${e!=null?e:r==="dark"?.8:.5})`,ue=({visible:r,onClose:e,onOpen:a,onClosed:d,theme:g="light",backdropOpacity:w,animationDuration:f=220,closeOnBackdropPress:j=true,closeOnBackButton:z=true,enableSwipeToClose:m=true,swipeThreshold:R=80,unmountOnExit:M=true,avoidKeyboard:v=false,children:E,renderBackdrop:D,onBackdropPress:k,testID:T="quicklook",accessibilityLabel:Y="Quick look",stylesOverride:b={}})=>{let[u,L]=react.useState(false),[$,A]=react.useState(0),n=react.useRef(new reactNative.Animated.Value(0)).current,o=react.useRef(new reactNative.Animated.Value(.96)).current,s=react.useRef(new reactNative.Animated.Value(0)).current,G=react.useMemo(()=>se(g,w),[g,w]),l=react.useRef("programmatic");react.useEffect(()=>{r&&!u?(L(true),a==null||a(),requestAnimationFrame(()=>{reactNative.Animated.parallel([reactNative.Animated.timing(n,{toValue:1,duration:f,useNativeDriver:true}),reactNative.Animated.spring(o,{toValue:1,useNativeDriver:true,friction:7,tension:80})]).start();})):!r&&u&&reactNative.Animated.parallel([reactNative.Animated.timing(n,{toValue:0,duration:f,useNativeDriver:true}),reactNative.Animated.timing(o,{toValue:.96,duration:f,useNativeDriver:true})]).start(()=>{s.setValue(0),d==null||d(l.current),l.current="programmatic",M&&L(false);});},[r,u,f,n,o,s,M,a,d]),react.useEffect(()=>{if(!v)return;let y=reactNative.Keyboard.addListener("keyboardDidShow",p=>{var N,P;return A((P=(N=p.endCoordinates)==null?void 0:N.height)!=null?P:0)}),i=reactNative.Keyboard.addListener("keyboardDidHide",()=>A(0));return ()=>{y.remove(),i.remove();}},[v]);let J=react.useRef(reactNative.PanResponder.create({onMoveShouldSetPanResponder:(y,i)=>m&&Math.abs(i.dy)>Math.abs(i.dx)&&Math.abs(i.dy)>5,onPanResponderMove:(y,i)=>{if(m&&i.dy>0){s.setValue(i.dy);let p=Math.min(1,i.dy/(R*2));n.setValue(1-p*.25),o.setValue(1-p*.03);}},onPanResponderRelease:(y,i)=>{m&&(i.dy>R?(l.current="swipe",reactNative.Animated.parallel([reactNative.Animated.timing(s,{toValue:_*.35,duration:180,useNativeDriver:true}),reactNative.Animated.timing(n,{toValue:0,duration:180,useNativeDriver:true})]).start(()=>e==null?void 0:e())):reactNative.Animated.parallel([reactNative.Animated.spring(s,{toValue:0,useNativeDriver:true}),reactNative.Animated.spring(n,{toValue:1,useNativeDriver:true}),reactNative.Animated.spring(o,{toValue:1,useNativeDriver:true})]).start());}})).current;return !u&&!r?null:jsxRuntime.jsx(reactNative.Modal,{transparent:true,visible:u||r,animationType:"none",onRequestClose:()=>{z&&(l.current="backButton",e==null||e());},presentationStyle:"overFullScreen",statusBarTranslucent:reactNative.Platform.OS==="android",children:jsxRuntime.jsxs(reactNative.Animated.View,{style:[V.overlay,{backgroundColor:G,opacity:n},b.overlay],accessibilityViewIsModal:true,children:[D?D(n):jsxRuntime.jsx(reactNative.Pressable,{onPress:()=>{k==null||k(),j&&(l.current="backdrop",e==null||e());},style:reactNative.StyleSheet.absoluteFill,android_disableSound:true,accessibilityRole:"button",accessibilityLabel:"Close quick look",testID:"ql-backdrop"}),jsxRuntime.jsx(reactNative.View,{style:[V.centerWrap,{paddingBottom:Math.max(16,v?$:16)},b.centerWrap],pointerEvents:"box-none",children:jsxRuntime.jsx(reactNative.Animated.View,S(I({},m?J.panHandlers:{}),{style:[V.container,{transform:[{scale:o},{translateY:s}]},b.container],testID:T,accessibilityRole:oe,accessibilityViewIsModal:true,accessibilityLabel:Y,children:E}))})]})})},V=reactNative.StyleSheet.create({overlay:{flex:1,justifyContent:"center",alignItems:"center"},centerWrap:{flex:1,width:"100%",justifyContent:"center",alignItems:"center",paddingHorizontal:16},container:{width:Math.min(ne*.92,560),maxHeight:_*.82,borderRadius:16,overflow:"hidden",elevation:8,shadowColor:"#000",shadowOpacity:.2,shadowRadius:12,shadowOffset:{width:0,height:6},backgroundColor:"#fff"}});exports.QuickLook=ue;//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/QuickLook.tsx"],"names":["screenWidth","screenHeight","Dimensions","dialogA11yRole","overlayColor","theme","custom","QuickLook","visible","onClose","onOpen","onClosed","backdropOpacity","animationDuration","closeOnBackdropPress","closeOnBackButton","enableSwipeToClose","swipeThreshold","unmountOnExit","avoidKeyboard","children","renderBackdrop","onBackdropPress","testID","accessibilityLabel","stylesOverride","mounted","setMounted","useState","kb","setKb","fade","useRef","Animated","scale","translateY","baseOverlay","useMemo","closeReasonRef","useEffect","show","Keyboard","e","_a","_b","hide","panResponder","PanResponder","_evt","g","jsx","Modal","Platform","jsxs","styles","Pressable","StyleSheet","View","__spreadProps","__spreadValues"],"mappings":"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","file":"index.js","sourcesContent":["// src/QuickLook.tsx\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport {\n  View,\n  StyleSheet,\n  Modal,\n  Dimensions,\n  Animated,\n  Platform,\n  Pressable,\n  PanResponder,\n  Keyboard,\n} from 'react-native';\nimport type { AccessibilityRole } from 'react-native';\nimport type { CloseReason, QuickLookProps, ThemeMode } from './QuickLookProperties';\n\nconst { width: screenWidth, height: screenHeight } = Dimensions.get('window');\n\n// TS-safe across RN versions where \"dialog\" may not exist in AccessibilityRole\nconst dialogA11yRole = 'dialog' as unknown as AccessibilityRole;\n\nconst overlayColor = (theme: ThemeMode, custom?: number) =>\n  `rgba(0,0,0,${custom ?? (theme === 'dark' ? 0.8 : 0.5)})`;\n\nexport const QuickLook: React.FC<QuickLookProps> = ({\n  visible,\n  onClose,\n  onOpen,\n  onClosed,\n  theme = 'light',\n  backdropOpacity,\n  animationDuration = 220,\n  closeOnBackdropPress = true,\n  closeOnBackButton = true,\n  enableSwipeToClose = true,\n  swipeThreshold = 80,\n  unmountOnExit = true,\n  avoidKeyboard = false,\n  children,\n  renderBackdrop,\n  onBackdropPress,\n  testID = 'quicklook',\n  accessibilityLabel = 'Quick look',\n  stylesOverride = {},\n}) => {\n  const [mounted, setMounted] = useState(false);\n  const [kb, setKb] = useState(0); // keyboard height\n\n  const fade = useRef(new Animated.Value(0)).current;\n  const scale = useRef(new Animated.Value(0.96)).current;\n  const translateY = useRef(new Animated.Value(0)).current;\n\n  const baseOverlay = useMemo(() => overlayColor(theme, backdropOpacity), [theme, backdropOpacity]);\n\n  // Track why we closed so we can report it to onClosed\n  const closeReasonRef = useRef<CloseReason>('programmatic');\n\n  // Mount/unmount with animation\n  useEffect(() => {\n    if (visible && !mounted) {\n      setMounted(true);\n      onOpen?.(); // great place to trigger optional haptics in-app\n\n      requestAnimationFrame(() => {\n        Animated.parallel([\n          Animated.timing(fade, { toValue: 1, duration: animationDuration, useNativeDriver: true }),\n          Animated.spring(scale, { toValue: 1, useNativeDriver: true, friction: 7, tension: 80 }),\n        ]).start();\n      });\n    } else if (!visible && mounted) {\n      Animated.parallel([\n        Animated.timing(fade, { toValue: 0, duration: animationDuration, useNativeDriver: true }),\n        Animated.timing(scale, { toValue: 0.96, duration: animationDuration, useNativeDriver: true }),\n      ]).start(() => {\n        translateY.setValue(0);\n        onClosed?.(closeReasonRef.current);\n        closeReasonRef.current = 'programmatic';\n        if (unmountOnExit) setMounted(false);\n      });\n    }\n  }, [visible, mounted, animationDuration, fade, scale, translateY, unmountOnExit, onOpen, onClosed]);\n\n  // Keyboard avoidance (optional)\n  useEffect(() => {\n    if (!avoidKeyboard) return;\n    const show = Keyboard.addListener('keyboardDidShow', (e) => setKb(e.endCoordinates?.height ?? 0));\n    const hide = Keyboard.addListener('keyboardDidHide', () => setKb(0));\n    return () => {\n      show.remove();\n      hide.remove();\n    };\n  }, [avoidKeyboard]);\n\n  // Swipe to close\n  const panResponder = useRef(\n    PanResponder.create({\n      onMoveShouldSetPanResponder: (_evt, g) =>\n        enableSwipeToClose && Math.abs(g.dy) > Math.abs(g.dx) && Math.abs(g.dy) > 5,\n      onPanResponderMove: (_evt, g) => {\n        if (!enableSwipeToClose) return;\n        if (g.dy > 0) {\n          translateY.setValue(g.dy);\n          const p = Math.min(1, g.dy / (swipeThreshold * 2));\n          fade.setValue(1 - p * 0.25);\n          scale.setValue(1 - p * 0.03);\n        }\n      },\n      onPanResponderRelease: (_evt, g) => {\n        if (!enableSwipeToClose) return;\n        if (g.dy > swipeThreshold) {\n          closeReasonRef.current = 'swipe';\n          Animated.parallel([\n            Animated.timing(translateY, { toValue: screenHeight * 0.35, duration: 180, useNativeDriver: true }),\n            Animated.timing(fade, { toValue: 0, duration: 180, useNativeDriver: true }),\n          ]).start(() => onClose?.());\n        } else {\n          Animated.parallel([\n            Animated.spring(translateY, { toValue: 0, useNativeDriver: true }),\n            Animated.spring(fade, { toValue: 1, useNativeDriver: true }),\n            Animated.spring(scale, { toValue: 1, useNativeDriver: true }),\n          ]).start();\n        }\n      },\n    })\n  ).current;\n\n  if (!mounted && !visible) return null;\n\n  return (\n    <Modal\n      transparent\n      visible={mounted || visible}\n      animationType=\"none\"\n      onRequestClose={() => {\n        if (closeOnBackButton) {\n          closeReasonRef.current = 'backButton';\n          onClose?.();\n        }\n      }}\n      presentationStyle=\"overFullScreen\"\n      statusBarTranslucent={Platform.OS === 'android'}\n    >\n      {/* Backdrop */}\n      <Animated.View\n        style={[\n          styles.overlay,\n          { backgroundColor: baseOverlay, opacity: fade },\n          stylesOverride.overlay,\n        ]}\n        accessibilityViewIsModal\n      >\n        {renderBackdrop ? (\n          // If you provide a custom backdrop, you control its hit area/closing\n          renderBackdrop(fade as unknown as Animated.AnimatedInterpolation<number>)\n        ) : (\n          <Pressable\n            onPress={() => {\n              onBackdropPress?.();\n              if (closeOnBackdropPress) {\n                closeReasonRef.current = 'backdrop';\n                onClose?.();\n              }\n            }}\n            style={StyleSheet.absoluteFill}\n            android_disableSound\n            accessibilityRole=\"button\"\n            accessibilityLabel=\"Close quick look\"\n            testID=\"ql-backdrop\"\n          />\n        )}\n\n        {/* Centered card */}\n        <View\n          style={[\n            styles.centerWrap,\n            { paddingBottom: Math.max(16, avoidKeyboard ? kb : 16) },\n            stylesOverride.centerWrap,\n          ]}\n          pointerEvents=\"box-none\"\n        >\n          <Animated.View\n            {...(enableSwipeToClose ? panResponder.panHandlers : {})}\n            style={[\n              styles.container,\n              { transform: [{ scale }, { translateY }] },\n              stylesOverride.container,\n            ]}\n            testID={testID}\n            accessibilityRole={dialogA11yRole}\n            accessibilityViewIsModal\n            accessibilityLabel={accessibilityLabel}\n          >\n            {children}\n          </Animated.View>\n        </View>\n      </Animated.View>\n    </Modal>\n  );\n};\n\nconst styles = StyleSheet.create({\n  overlay: { flex: 1, justifyContent: 'center', alignItems: 'center' },\n  centerWrap: {\n    flex: 1,\n    width: '100%',\n    justifyContent: 'center',\n    alignItems: 'center',\n    paddingHorizontal: 16,\n  },\n  container: {\n    width: Math.min(screenWidth * 0.92, 560),\n    maxHeight: screenHeight * 0.82,\n    borderRadius: 16,\n    overflow: 'hidden',\n    elevation: 8,\n    shadowColor: '#000',\n    shadowOpacity: 0.2,\n    shadowRadius: 12,\n    shadowOffset: { width: 0, height: 6 },\n    backgroundColor: '#fff',\n  },\n});\n"]}

package/dist/index.mjs

@@ -0,0 +1,2 @@
+import {useState,useRef,useMemo,useEffect}from'react';import {Dimensions,StyleSheet,Animated,Keyboard,PanResponder,Modal,Pressable,View,Platform}from'react-native';import {jsx,jsxs}from'react/jsx-runtime';var K=Object.defineProperty,U=Object.defineProperties;var X=Object.getOwnPropertyDescriptors;var Q=Object.getOwnPropertySymbols;var Z=Object.prototype.hasOwnProperty,B=Object.prototype.propertyIsEnumerable;var x=(r,e,a)=>e in r?K(r,e,{enumerable:true,configurable:true,writable:true,value:a}):r[e]=a,I=(r,e)=>{for(var a in e||(e={}))Z.call(e,a)&&x(r,a,e[a]);if(Q)for(var a of Q(e))B.call(e,a)&&x(r,a,e[a]);return r},S=(r,e)=>U(r,X(e));var {width:ne,height:_}=Dimensions.get("window"),oe="dialog",se=(r,e)=>`rgba(0,0,0,${e!=null?e:r==="dark"?.8:.5})`,ue=({visible:r,onClose:e,onOpen:a,onClosed:d,theme:g="light",backdropOpacity:w,animationDuration:f=220,closeOnBackdropPress:j=true,closeOnBackButton:z=true,enableSwipeToClose:m=true,swipeThreshold:R=80,unmountOnExit:M=true,avoidKeyboard:v=false,children:E,renderBackdrop:D,onBackdropPress:k,testID:T="quicklook",accessibilityLabel:Y="Quick look",stylesOverride:b={}})=>{let[u,L]=useState(false),[$,A]=useState(0),n=useRef(new Animated.Value(0)).current,o=useRef(new Animated.Value(.96)).current,s=useRef(new Animated.Value(0)).current,G=useMemo(()=>se(g,w),[g,w]),l=useRef("programmatic");useEffect(()=>{r&&!u?(L(true),a==null||a(),requestAnimationFrame(()=>{Animated.parallel([Animated.timing(n,{toValue:1,duration:f,useNativeDriver:true}),Animated.spring(o,{toValue:1,useNativeDriver:true,friction:7,tension:80})]).start();})):!r&&u&&Animated.parallel([Animated.timing(n,{toValue:0,duration:f,useNativeDriver:true}),Animated.timing(o,{toValue:.96,duration:f,useNativeDriver:true})]).start(()=>{s.setValue(0),d==null||d(l.current),l.current="programmatic",M&&L(false);});},[r,u,f,n,o,s,M,a,d]),useEffect(()=>{if(!v)return;let y=Keyboard.addListener("keyboardDidShow",p=>{var N,P;return A((P=(N=p.endCoordinates)==null?void 0:N.height)!=null?P:0)}),i=Keyboard.addListener("keyboardDidHide",()=>A(0));return ()=>{y.remove(),i.remove();}},[v]);let J=useRef(PanResponder.create({onMoveShouldSetPanResponder:(y,i)=>m&&Math.abs(i.dy)>Math.abs(i.dx)&&Math.abs(i.dy)>5,onPanResponderMove:(y,i)=>{if(m&&i.dy>0){s.setValue(i.dy);let p=Math.min(1,i.dy/(R*2));n.setValue(1-p*.25),o.setValue(1-p*.03);}},onPanResponderRelease:(y,i)=>{m&&(i.dy>R?(l.current="swipe",Animated.parallel([Animated.timing(s,{toValue:_*.35,duration:180,useNativeDriver:true}),Animated.timing(n,{toValue:0,duration:180,useNativeDriver:true})]).start(()=>e==null?void 0:e())):Animated.parallel([Animated.spring(s,{toValue:0,useNativeDriver:true}),Animated.spring(n,{toValue:1,useNativeDriver:true}),Animated.spring(o,{toValue:1,useNativeDriver:true})]).start());}})).current;return !u&&!r?null:jsx(Modal,{transparent:true,visible:u||r,animationType:"none",onRequestClose:()=>{z&&(l.current="backButton",e==null||e());},presentationStyle:"overFullScreen",statusBarTranslucent:Platform.OS==="android",children:jsxs(Animated.View,{style:[V.overlay,{backgroundColor:G,opacity:n},b.overlay],accessibilityViewIsModal:true,children:[D?D(n):jsx(Pressable,{onPress:()=>{k==null||k(),j&&(l.current="backdrop",e==null||e());},style:StyleSheet.absoluteFill,android_disableSound:true,accessibilityRole:"button",accessibilityLabel:"Close quick look",testID:"ql-backdrop"}),jsx(View,{style:[V.centerWrap,{paddingBottom:Math.max(16,v?$:16)},b.centerWrap],pointerEvents:"box-none",children:jsx(Animated.View,S(I({},m?J.panHandlers:{}),{style:[V.container,{transform:[{scale:o},{translateY:s}]},b.container],testID:T,accessibilityRole:oe,accessibilityViewIsModal:true,accessibilityLabel:Y,children:E}))})]})})},V=StyleSheet.create({overlay:{flex:1,justifyContent:"center",alignItems:"center"},centerWrap:{flex:1,width:"100%",justifyContent:"center",alignItems:"center",paddingHorizontal:16},container:{width:Math.min(ne*.92,560),maxHeight:_*.82,borderRadius:16,overflow:"hidden",elevation:8,shadowColor:"#000",shadowOpacity:.2,shadowRadius:12,shadowOffset:{width:0,height:6},backgroundColor:"#fff"}});export{ue as QuickLook};//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/QuickLook.tsx"],"names":["screenWidth","screenHeight","Dimensions","dialogA11yRole","overlayColor","theme","custom","QuickLook","visible","onClose","onOpen","onClosed","backdropOpacity","animationDuration","closeOnBackdropPress","closeOnBackButton","enableSwipeToClose","swipeThreshold","unmountOnExit","avoidKeyboard","children","renderBackdrop","onBackdropPress","testID","accessibilityLabel","stylesOverride","mounted","setMounted","useState","kb","setKb","fade","useRef","Animated","scale","translateY","baseOverlay","useMemo","closeReasonRef","useEffect","show","Keyboard","e","_a","_b","hide","panResponder","PanResponder","_evt","g","jsx","Modal","Platform","jsxs","styles","Pressable","StyleSheet","View","__spreadProps","__spreadValues"],"mappings":"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","file":"index.mjs","sourcesContent":["// src/QuickLook.tsx\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport {\n  View,\n  StyleSheet,\n  Modal,\n  Dimensions,\n  Animated,\n  Platform,\n  Pressable,\n  PanResponder,\n  Keyboard,\n} from 'react-native';\nimport type { AccessibilityRole } from 'react-native';\nimport type { CloseReason, QuickLookProps, ThemeMode } from './QuickLookProperties';\n\nconst { width: screenWidth, height: screenHeight } = Dimensions.get('window');\n\n// TS-safe across RN versions where \"dialog\" may not exist in AccessibilityRole\nconst dialogA11yRole = 'dialog' as unknown as AccessibilityRole;\n\nconst overlayColor = (theme: ThemeMode, custom?: number) =>\n  `rgba(0,0,0,${custom ?? (theme === 'dark' ? 0.8 : 0.5)})`;\n\nexport const QuickLook: React.FC<QuickLookProps> = ({\n  visible,\n  onClose,\n  onOpen,\n  onClosed,\n  theme = 'light',\n  backdropOpacity,\n  animationDuration = 220,\n  closeOnBackdropPress = true,\n  closeOnBackButton = true,\n  enableSwipeToClose = true,\n  swipeThreshold = 80,\n  unmountOnExit = true,\n  avoidKeyboard = false,\n  children,\n  renderBackdrop,\n  onBackdropPress,\n  testID = 'quicklook',\n  accessibilityLabel = 'Quick look',\n  stylesOverride = {},\n}) => {\n  const [mounted, setMounted] = useState(false);\n  const [kb, setKb] = useState(0); // keyboard height\n\n  const fade = useRef(new Animated.Value(0)).current;\n  const scale = useRef(new Animated.Value(0.96)).current;\n  const translateY = useRef(new Animated.Value(0)).current;\n\n  const baseOverlay = useMemo(() => overlayColor(theme, backdropOpacity), [theme, backdropOpacity]);\n\n  // Track why we closed so we can report it to onClosed\n  const closeReasonRef = useRef<CloseReason>('programmatic');\n\n  // Mount/unmount with animation\n  useEffect(() => {\n    if (visible && !mounted) {\n      setMounted(true);\n      onOpen?.(); // great place to trigger optional haptics in-app\n\n      requestAnimationFrame(() => {\n        Animated.parallel([\n          Animated.timing(fade, { toValue: 1, duration: animationDuration, useNativeDriver: true }),\n          Animated.spring(scale, { toValue: 1, useNativeDriver: true, friction: 7, tension: 80 }),\n        ]).start();\n      });\n    } else if (!visible && mounted) {\n      Animated.parallel([\n        Animated.timing(fade, { toValue: 0, duration: animationDuration, useNativeDriver: true }),\n        Animated.timing(scale, { toValue: 0.96, duration: animationDuration, useNativeDriver: true }),\n      ]).start(() => {\n        translateY.setValue(0);\n        onClosed?.(closeReasonRef.current);\n        closeReasonRef.current = 'programmatic';\n        if (unmountOnExit) setMounted(false);\n      });\n    }\n  }, [visible, mounted, animationDuration, fade, scale, translateY, unmountOnExit, onOpen, onClosed]);\n\n  // Keyboard avoidance (optional)\n  useEffect(() => {\n    if (!avoidKeyboard) return;\n    const show = Keyboard.addListener('keyboardDidShow', (e) => setKb(e.endCoordinates?.height ?? 0));\n    const hide = Keyboard.addListener('keyboardDidHide', () => setKb(0));\n    return () => {\n      show.remove();\n      hide.remove();\n    };\n  }, [avoidKeyboard]);\n\n  // Swipe to close\n  const panResponder = useRef(\n    PanResponder.create({\n      onMoveShouldSetPanResponder: (_evt, g) =>\n        enableSwipeToClose && Math.abs(g.dy) > Math.abs(g.dx) && Math.abs(g.dy) > 5,\n      onPanResponderMove: (_evt, g) => {\n        if (!enableSwipeToClose) return;\n        if (g.dy > 0) {\n          translateY.setValue(g.dy);\n          const p = Math.min(1, g.dy / (swipeThreshold * 2));\n          fade.setValue(1 - p * 0.25);\n          scale.setValue(1 - p * 0.03);\n        }\n      },\n      onPanResponderRelease: (_evt, g) => {\n        if (!enableSwipeToClose) return;\n        if (g.dy > swipeThreshold) {\n          closeReasonRef.current = 'swipe';\n          Animated.parallel([\n            Animated.timing(translateY, { toValue: screenHeight * 0.35, duration: 180, useNativeDriver: true }),\n            Animated.timing(fade, { toValue: 0, duration: 180, useNativeDriver: true }),\n          ]).start(() => onClose?.());\n        } else {\n          Animated.parallel([\n            Animated.spring(translateY, { toValue: 0, useNativeDriver: true }),\n            Animated.spring(fade, { toValue: 1, useNativeDriver: true }),\n            Animated.spring(scale, { toValue: 1, useNativeDriver: true }),\n          ]).start();\n        }\n      },\n    })\n  ).current;\n\n  if (!mounted && !visible) return null;\n\n  return (\n    <Modal\n      transparent\n      visible={mounted || visible}\n      animationType=\"none\"\n      onRequestClose={() => {\n        if (closeOnBackButton) {\n          closeReasonRef.current = 'backButton';\n          onClose?.();\n        }\n      }}\n      presentationStyle=\"overFullScreen\"\n      statusBarTranslucent={Platform.OS === 'android'}\n    >\n      {/* Backdrop */}\n      <Animated.View\n        style={[\n          styles.overlay,\n          { backgroundColor: baseOverlay, opacity: fade },\n          stylesOverride.overlay,\n        ]}\n        accessibilityViewIsModal\n      >\n        {renderBackdrop ? (\n          // If you provide a custom backdrop, you control its hit area/closing\n          renderBackdrop(fade as unknown as Animated.AnimatedInterpolation<number>)\n        ) : (\n          <Pressable\n            onPress={() => {\n              onBackdropPress?.();\n              if (closeOnBackdropPress) {\n                closeReasonRef.current = 'backdrop';\n                onClose?.();\n              }\n            }}\n            style={StyleSheet.absoluteFill}\n            android_disableSound\n            accessibilityRole=\"button\"\n            accessibilityLabel=\"Close quick look\"\n            testID=\"ql-backdrop\"\n          />\n        )}\n\n        {/* Centered card */}\n        <View\n          style={[\n            styles.centerWrap,\n            { paddingBottom: Math.max(16, avoidKeyboard ? kb : 16) },\n            stylesOverride.centerWrap,\n          ]}\n          pointerEvents=\"box-none\"\n        >\n          <Animated.View\n            {...(enableSwipeToClose ? panResponder.panHandlers : {})}\n            style={[\n              styles.container,\n              { transform: [{ scale }, { translateY }] },\n              stylesOverride.container,\n            ]}\n            testID={testID}\n            accessibilityRole={dialogA11yRole}\n            accessibilityViewIsModal\n            accessibilityLabel={accessibilityLabel}\n          >\n            {children}\n          </Animated.View>\n        </View>\n      </Animated.View>\n    </Modal>\n  );\n};\n\nconst styles = StyleSheet.create({\n  overlay: { flex: 1, justifyContent: 'center', alignItems: 'center' },\n  centerWrap: {\n    flex: 1,\n    width: '100%',\n    justifyContent: 'center',\n    alignItems: 'center',\n    paddingHorizontal: 16,\n  },\n  container: {\n    width: Math.min(screenWidth * 0.92, 560),\n    maxHeight: screenHeight * 0.82,\n    borderRadius: 16,\n    overflow: 'hidden',\n    elevation: 8,\n    shadowColor: '#000',\n    shadowOpacity: 0.2,\n    shadowRadius: 12,\n    shadowOffset: { width: 0, height: 6 },\n    backgroundColor: '#fff',\n  },\n});\n"]}

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "react-native-quick-preview",
+  "version": "1.0.4",   
+  "description": "A beautiful, customizable quick preview modal component for React Native",
+  "author": "Oliver Lindblad",
+  "license": "MIT",
+
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "react-native": "dist/index.js",
+
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "react-native": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+
+  "sideEffects": false,
+  "files": ["dist", "src", "README.md", "LICENSE"],
+
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx",
+    "clean": "rimraf dist",
+    "prepublishOnly": "rimraf dist && tsup"
+  },
+
+  "keywords": [
+    "react-native",
+    "modal",
+    "preview",
+    "quicklook",
+    "expo",
+    "typescript",
+    "ui",
+    "component"
+  ],
+
+  "peerDependencies": {
+    "react": ">=18.2.0 <21",
+    "react-native": ">=0.64.0 <1"
+  },
+
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "eslint": "^8.57.0",
+    "rimraf": "^6.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+
+    "react": "19.0.0",
+    "react-native": "0.79.5"
+  },
+
+  "overrides": {
+    "eslint": "^8.57.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "@typescript-eslint/eslint-plugin": "^7.18.0"
+  },
+
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Hashtagsmile/react-native-quicklook.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Hashtagsmile/react-native-quicklook/issues"
+  },
+  "homepage": "https://github.com/Hashtagsmile/react-native-quicklook#readme",
+  "publishConfig": { "access": "public" },
+  "engines": { "node": ">=16" }
+}

package/src/QuickLook.tsx

@@ -0,0 +1,222 @@
+// src/QuickLook.tsx
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  View,
+  StyleSheet,
+  Modal,
+  Dimensions,
+  Animated,
+  Platform,
+  Pressable,
+  PanResponder,
+  Keyboard,
+} from 'react-native';
+import type { AccessibilityRole } from 'react-native';
+import type { CloseReason, QuickLookProps, ThemeMode } from './QuickLookProperties';
+
+const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
+
+// TS-safe across RN versions where "dialog" may not exist in AccessibilityRole
+const dialogA11yRole = 'dialog' as unknown as AccessibilityRole;
+
+const overlayColor = (theme: ThemeMode, custom?: number) =>
+  `rgba(0,0,0,${custom ?? (theme === 'dark' ? 0.8 : 0.5)})`;
+
+export const QuickLook: React.FC<QuickLookProps> = ({
+  visible,
+  onClose,
+  onOpen,
+  onClosed,
+  theme = 'light',
+  backdropOpacity,
+  animationDuration = 220,
+  closeOnBackdropPress = true,
+  closeOnBackButton = true,
+  enableSwipeToClose = true,
+  swipeThreshold = 80,
+  unmountOnExit = true,
+  avoidKeyboard = false,
+  children,
+  renderBackdrop,
+  onBackdropPress,
+  testID = 'quicklook',
+  accessibilityLabel = 'Quick look',
+  stylesOverride = {},
+}) => {
+  const [mounted, setMounted] = useState(false);
+  const [kb, setKb] = useState(0); // keyboard height
+
+  const fade = useRef(new Animated.Value(0)).current;
+  const scale = useRef(new Animated.Value(0.96)).current;
+  const translateY = useRef(new Animated.Value(0)).current;
+
+  const baseOverlay = useMemo(() => overlayColor(theme, backdropOpacity), [theme, backdropOpacity]);
+
+  // Track why we closed so we can report it to onClosed
+  const closeReasonRef = useRef<CloseReason>('programmatic');
+
+  // Mount/unmount with animation
+  useEffect(() => {
+    if (visible && !mounted) {
+      setMounted(true);
+      onOpen?.(); // great place to trigger optional haptics in-app
+
+      requestAnimationFrame(() => {
+        Animated.parallel([
+          Animated.timing(fade, { toValue: 1, duration: animationDuration, useNativeDriver: true }),
+          Animated.spring(scale, { toValue: 1, useNativeDriver: true, friction: 7, tension: 80 }),
+        ]).start();
+      });
+    } else if (!visible && mounted) {
+      Animated.parallel([
+        Animated.timing(fade, { toValue: 0, duration: animationDuration, useNativeDriver: true }),
+        Animated.timing(scale, { toValue: 0.96, duration: animationDuration, useNativeDriver: true }),
+      ]).start(() => {
+        translateY.setValue(0);
+        onClosed?.(closeReasonRef.current);
+        closeReasonRef.current = 'programmatic';
+        if (unmountOnExit) setMounted(false);
+      });
+    }
+  }, [visible, mounted, animationDuration, fade, scale, translateY, unmountOnExit, onOpen, onClosed]);
+
+  // Keyboard avoidance (optional)
+  useEffect(() => {
+    if (!avoidKeyboard) return;
+    const show = Keyboard.addListener('keyboardDidShow', (e) => setKb(e.endCoordinates?.height ?? 0));
+    const hide = Keyboard.addListener('keyboardDidHide', () => setKb(0));
+    return () => {
+      show.remove();
+      hide.remove();
+    };
+  }, [avoidKeyboard]);
+
+  // Swipe to close
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (_evt, g) =>
+        enableSwipeToClose && Math.abs(g.dy) > Math.abs(g.dx) && Math.abs(g.dy) > 5,
+      onPanResponderMove: (_evt, g) => {
+        if (!enableSwipeToClose) return;
+        if (g.dy > 0) {
+          translateY.setValue(g.dy);
+          const p = Math.min(1, g.dy / (swipeThreshold * 2));
+          fade.setValue(1 - p * 0.25);
+          scale.setValue(1 - p * 0.03);
+        }
+      },
+      onPanResponderRelease: (_evt, g) => {
+        if (!enableSwipeToClose) return;
+        if (g.dy > swipeThreshold) {
+          closeReasonRef.current = 'swipe';
+          Animated.parallel([
+            Animated.timing(translateY, { toValue: screenHeight * 0.35, duration: 180, useNativeDriver: true }),
+            Animated.timing(fade, { toValue: 0, duration: 180, useNativeDriver: true }),
+          ]).start(() => onClose?.());
+        } else {
+          Animated.parallel([
+            Animated.spring(translateY, { toValue: 0, useNativeDriver: true }),
+            Animated.spring(fade, { toValue: 1, useNativeDriver: true }),
+            Animated.spring(scale, { toValue: 1, useNativeDriver: true }),
+          ]).start();
+        }
+      },
+    })
+  ).current;
+
+  if (!mounted && !visible) return null;
+
+  return (
+    <Modal
+      transparent
+      visible={mounted || visible}
+      animationType="none"
+      onRequestClose={() => {
+        if (closeOnBackButton) {
+          closeReasonRef.current = 'backButton';
+          onClose?.();
+        }
+      }}
+      presentationStyle="overFullScreen"
+      statusBarTranslucent={Platform.OS === 'android'}
+    >
+      {/* Backdrop */}
+      <Animated.View
+        style={[
+          styles.overlay,
+          { backgroundColor: baseOverlay, opacity: fade },
+          stylesOverride.overlay,
+        ]}
+        accessibilityViewIsModal
+      >
+        {renderBackdrop ? (
+          // If you provide a custom backdrop, you control its hit area/closing
+          renderBackdrop(fade as unknown as Animated.AnimatedInterpolation<number>)
+        ) : (
+          <Pressable
+            onPress={() => {
+              onBackdropPress?.();
+              if (closeOnBackdropPress) {
+                closeReasonRef.current = 'backdrop';
+                onClose?.();
+              }
+            }}
+            style={StyleSheet.absoluteFill}
+            android_disableSound
+            accessibilityRole="button"
+            accessibilityLabel="Close quick look"
+            testID="ql-backdrop"
+          />
+        )}
+
+        {/* Centered card */}
+        <View
+          style={[
+            styles.centerWrap,
+            { paddingBottom: Math.max(16, avoidKeyboard ? kb : 16) },
+            stylesOverride.centerWrap,
+          ]}
+          pointerEvents="box-none"
+        >
+          <Animated.View
+            {...(enableSwipeToClose ? panResponder.panHandlers : {})}
+            style={[
+              styles.container,
+              { transform: [{ scale }, { translateY }] },
+              stylesOverride.container,
+            ]}
+            testID={testID}
+            accessibilityRole={dialogA11yRole}
+            accessibilityViewIsModal
+            accessibilityLabel={accessibilityLabel}
+          >
+            {children}
+          </Animated.View>
+        </View>
+      </Animated.View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+  centerWrap: {
+    flex: 1,
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+  },
+  container: {
+    width: Math.min(screenWidth * 0.92, 560),
+    maxHeight: screenHeight * 0.82,
+    borderRadius: 16,
+    overflow: 'hidden',
+    elevation: 8,
+    shadowColor: '#000',
+    shadowOpacity: 0.2,
+    shadowRadius: 12,
+    shadowOffset: { width: 0, height: 6 },
+    backgroundColor: '#fff',
+  },
+});

package/src/QuickLookProperties.ts

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react';
+import type { Animated } from 'react-native';
+
+export type ThemeMode = 'light' | 'dark';
+export type CloseReason = 'programmatic' | 'backdrop' | 'backButton' | 'swipe';
+
+
+export interface QuickLookProps {
+  visible: boolean;
+  onClose: () => void;
+
+   /** Lifecycle hooks (great for haptics/analytics) */
+   onOpen?: () => void;                     // fires when animating in
+   onClosed?: (reason: CloseReason) => void; // fires after fully closed
+ 
+   /** Optional: press whole card (prefer explicit CTAs as well) */
+   onPressCard?: () => void;
+
+  theme?: ThemeMode;
+  backdropOpacity?: number;    // default 0.5 light / 0.8 dark
+  animationDuration?: number;  // default 220
+
+  /** Behavior toggles */
+  closeOnBackdropPress?: boolean; // default true
+  closeOnBackButton?: boolean;    // default true
+  enableSwipeToClose?: boolean;   // default true
+  swipeThreshold?: number;        // default 80
+  unmountOnExit?: boolean;        // default true
+  avoidKeyboard?: boolean;        // default false
+
+  /** Headless content */
+  children?: ReactNode;
+
+  /** Backdrop customization */
+  renderBackdrop?: (opacity: Animated.AnimatedInterpolation<number>) => ReactNode;
+  onBackdropPress?: () => void;
+
+  /** Testing & a11y */
+  testID?: string;
+  accessibilityLabel?: string;
+
+  /** Outer wrapper style overrides */
+  stylesOverride?: {
+    overlay?: any;
+    container?: any;
+    centerWrap?: any;
+  };
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { QuickLook } from './QuickLook';
+export type { QuickLookProps, ThemeMode, CloseReason  } from './QuickLookProperties';