{"_id":"@askewxyz/react-native-liquid-glass","_rev":"3-69cb6b43786bd5feb8e940d7c35c9e00","name":"@askewxyz/react-native-liquid-glass","dist-tags":{"latest":"0.3.1"},"versions":{"0.1.0":{"name":"@askewxyz/react-native-liquid-glass","version":"0.1.0","keywords":["react-native","expo","ios","liquid-glass","uiglasseffect","uikit","ui","material","blur"],"author":{"name":"muhammad.mustadi@gmail.com"},"license":"MIT","_id":"@askewxyz/react-native-liquid-glass@0.1.0","maintainers":[{"name":"devataskew","email":"dev@askew.xyz"},{"name":"odiataskew","email":"odi@askew.xyz"}],"dist":{"shasum":"44b3e9607a4381261201c1778814358dee22b559","tarball":"https://registry.npmjs.org/@askewxyz/react-native-liquid-glass/-/react-native-liquid-glass-0.1.0.tgz","fileCount":26,"integrity":"sha512-0CBLOtfWI4Yi7j+xKh8IgY50lYhl98VhpTvRBZkhoXRctSrk4Cdy6RvUHGXbc1dizAukJ1hw04ux0vGbCusQrA==","signatures":[{"sig":"MEUCICtO3ZuINW3UDCgSBFbkOozmeOH5nUxCqgyt8nez1Z6JAiEAiu0aoLMzN6vKN2FiSKc/5RQBRbnRlcwDoTk7nO2PfaI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31205},"main":"index.ts","types":"index.ts","exports":{".":{"types":"./index.ts","default":"./index.ts"}},"gitHead":"b8a73ac06cbec03b5ae97364bb722d898b6a6dae","_npmUser":{"name":"odiataskew","email":"odi@askew.xyz"},"_npmVersion":"11.14.1","description":"Apple Liquid Glass (UIGlassEffect + UIGlassContainerEffect) for React Native via Expo Modules. Includes HIG-aligned components: Button, Toolbar, Sidebar, Sheet, and a content-layer Card.","directories":{},"_nodeVersion":"24.13.0","_hasShrinkwrap":false,"peerDependencies":{"expo":">=54.0.0","react":">=19.0.0","react-native":">=0.81.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-liquid-glass_0.1.0_1778705110108_0.6810409044130341","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@askewxyz/react-native-liquid-glass","version":"0.2.0","keywords":["react-native","expo","ios","liquid-glass","uiglasseffect","uikit","ui","material","blur"],"author":{"name":"muhammad.mustadi@gmail.com"},"license":"MIT","_id":"@askewxyz/react-native-liquid-glass@0.2.0","maintainers":[{"name":"devataskew","email":"dev@askew.xyz"},{"name":"odiataskew","email":"odi@askew.xyz"}],"homepage":"https://github.com/askew-xyz/react-native-liquid-glass#readme","bugs":{"url":"https://github.com/askew-xyz/react-native-liquid-glass/issues"},"dist":{"shasum":"328ef5f205d334e6a9599b4c11d84bb32515f95c","tarball":"https://registry.npmjs.org/@askewxyz/react-native-liquid-glass/-/react-native-liquid-glass-0.2.0.tgz","fileCount":27,"integrity":"sha512-D8DLoaVjwsfn2zWjKkjsiTSxDLBe/KxsHbGLxH61af9gfQsYPKDzhCNrKmSreyojVHILlA+y+CGzvNm+f98hiw==","signatures":[{"sig":"MEYCIQCpjMS8uUUKE597q3y9V8JQONy4cpDERR/0gqnmyOJ3BQIhANhaKAa8V+5mwpTpXO0QuCRf1+lz3NKwNAsmYvXBZkrk","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":45738},"jest":{"preset":"jest-expo","setupFiles":["/jest.setup.ts"],"testPathIgnorePatterns":["/node_modules/","/ios/","/android/","/example/"],"transformIgnorePatterns":["node_modules/(?!((jest-)?react-native|@react-native(-community)?|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-clone-referenced-element|@react-native-picker|@react-navigation/.*|expo-modules-core))"]},"main":"index.ts","types":"index.ts","exports":{".":{"types":"./index.ts","default":"./index.ts"}},"gitHead":"008c2d30e953705ff801d4bca8caa67096d190df","scripts":{"test":"jest"},"_npmUser":{"name":"odiataskew","email":"odi@askew.xyz"},"repository":{"url":"git+https://github.com/askew-xyz/react-native-liquid-glass.git","type":"git"},"_npmVersion":"11.14.1","description":"Apple Liquid Glass (UIGlassEffect + UIGlassContainerEffect) for React Native via Expo Modules. Includes HIG-aligned components: Button, Toolbar, Sidebar, Sheet, and a content-layer Card.","directories":{},"_nodeVersion":"24.13.0","_hasShrinkwrap":false,"devDependencies":{"expo":"~54.0.33","jest":"^29.7.0","react":"19.1.0","jest-expo":"^55.0.17","typescript":"~5.9.2","@types/jest":"^30.0.0","@types/react":"~19.1.0","react-native":"0.81.5","react-test-renderer":"19.1.0","@testing-library/react-native":"^13.3.3"},"peerDependencies":{"expo":">=54.0.0","react":">=19.0.0","react-native":">=0.81.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-liquid-glass_0.2.0_1778709451966_0.40854815502508335","host":"s3://npm-registry-packages-npm-production"}},"0.3.1":{"name":"@askewxyz/react-native-liquid-glass","version":"0.3.1","description":"Apple Liquid Glass (UIGlassEffect + UIGlassContainerEffect) for React Native via Expo Modules. Includes HIG-aligned components: Button, Toolbar, Sidebar, Sheet, and a content-layer Card.","main":"index.ts","types":"index.ts","exports":{".":{"types":"./index.ts","default":"./index.ts"}},"scripts":{"test":"jest"},"jest":{"preset":"jest-expo","setupFiles":["/jest.setup.ts"],"transformIgnorePatterns":["node_modules/(?!((jest-)?react-native|@react-native(-community)?|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-clone-referenced-element|@react-native-picker|@react-navigation/.*|expo-modules-core))"],"testPathIgnorePatterns":["/node_modules/","/ios/","/android/","/example/"]},"keywords":["react-native","expo","ios","liquid-glass","uiglasseffect","uikit","ui","material","blur"],"author":{"name":"muhammad.mustadi@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/askew-xyz/react-native-liquid-glass.git"},"peerDependencies":{"expo":">=54.0.0","react":">=19.0.0","react-native":">=0.81.0"},"devDependencies":{"@testing-library/react-native":"^13.3.3","@types/jest":"^30.0.0","@types/react":"~19.1.0","expo":"~54.0.33","jest":"^29.7.0","jest-expo":"^55.0.17","react":"19.1.0","react-native":"0.81.5","react-test-renderer":"19.1.0","typescript":"~5.9.2"},"gitHead":"aca79e67a4b7b7433c4ae8c4e8eae509311c72d0","_id":"@askewxyz/react-native-liquid-glass@0.3.1","bugs":{"url":"https://github.com/askew-xyz/react-native-liquid-glass/issues"},"homepage":"https://github.com/askew-xyz/react-native-liquid-glass#readme","_nodeVersion":"24.13.0","_npmVersion":"11.14.1","dist":{"integrity":"sha512-knu49Uu95///PkYVYhFkkwyK1DqxEKKPi6T/6KYfxQfrSHOxYtfTum8t7Bmk9h3QWdFI6mllDRKDKDo9XaQFTw==","shasum":"63e89e45fbb0f5166f789c0d93ef017c35aa9a5e","tarball":"https://registry.npmjs.org/@askewxyz/react-native-liquid-glass/-/react-native-liquid-glass-0.3.1.tgz","fileCount":27,"unpackedSize":49737,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGP3D7CJKsJkCQQH2wJrii8tN7GuP5FISxs/P67B2ttKAiA9XiwY4EwBJk6k/YJnMCGg3bkpaCdB7F0rnx06qoOw/Q=="}]},"_npmUser":{"name":"odiataskew","email":"odi@askew.xyz"},"directories":{},"maintainers":[{"name":"devataskew","email":"dev@askew.xyz"},{"name":"odiataskew","email":"odi@askew.xyz"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-liquid-glass_0.3.1_1778773271838_0.9551517682952377"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-13T20:45:09.596Z","modified":"2026-05-14T15:41:12.140Z","0.1.0":"2026-05-13T20:45:10.251Z","0.2.0":"2026-05-13T21:57:32.142Z","0.3.1":"2026-05-14T15:41:11.986Z"},"bugs":{"url":"https://github.com/askew-xyz/react-native-liquid-glass/issues"},"author":{"name":"muhammad.mustadi@gmail.com"},"license":"MIT","homepage":"https://github.com/askew-xyz/react-native-liquid-glass#readme","keywords":["react-native","expo","ios","liquid-glass","uiglasseffect","uikit","ui","material","blur"],"repository":{"type":"git","url":"git+https://github.com/askew-xyz/react-native-liquid-glass.git"},"description":"Apple Liquid Glass (UIGlassEffect + UIGlassContainerEffect) for React Native via Expo Modules. Includes HIG-aligned components: Button, Toolbar, Sidebar, Sheet, and a content-layer Card.","maintainers":[{"name":"devataskew","email":"dev@askew.xyz"},{"name":"odiataskew","email":"odi@askew.xyz"}],"readme":"# react-native-liquid-glass\n\nApple Liquid Glass (`UIGlassEffect`, `UIGlassContainerEffect`) for React Native, exposed via an Expo Module. Built strictly against Apple's iOS 26 UIKit API and the Human Interface Guidelines for materials.\n\n## Requirements\n\n- iOS 26+ for true `UIGlassEffect`. On older iOS, the view falls back to `UIBlurEffect(.systemUltraThinMaterial)` / `.systemMaterial`.\n- Xcode 26+ (iOS 26 SDK).\n- Expo SDK 54+, React Native 0.81+, React 19+.\n- A development build (Expo Go cannot load custom native modules).\n\n## Install\n\n```sh\nnpx expo install @askewxyz/react-native-liquid-glass\nnpx expo prebuild --platform ios\ncd ios && pod install\nnpx expo run:ios\n```\n\n## API surface\n\n### Primitives (thin wrappers over UIKit)\n\n`` wraps `UIVisualEffectView(effect: UIGlassEffect(style: ...))`.\n\n| Prop | Type | Maps to |\n| ------------- | -------------------------- | ----------------------------- |\n| `variant` | `'regular' \\| 'clear'` | `UIGlassEffect.Style` |\n| `tintColor` | `ColorValue` | `UIGlassEffect.tintColor` |\n| `interactive` | `boolean` | `UIGlassEffect.isInteractive` |\n| `cornerRadius`| `number` | layer corner radius |\n\n`` wraps `UIVisualEffectView(effect: UIGlassContainerEffect())`. Nest `` instances inside it and they will be reparented into the container's `contentView` so iOS morphs their shapes fluidly into each other (per Apple's container effect docs).\n\n### Components (HIG-aligned)\n\n- `` - mirrors SwiftUI `.buttonStyle(.glass)` / `.glassProminent`. Props: `label`, `variantStyle`, `variant`, `tintColor`, `icon`, `iconStyle`, `labelStyle`, `height`, `cornerRadius` (default `height/2`, always a pill), `contentPaddingHorizontal`, `disabled`, `onPress`, `onLongPress`, `accessibilityLabel`, `accessibilityHint`, `testID`, `style`.\n- `` - floating top navigation bar. Props: `title`, `leading`, `trailing` (both accept any ReactNode), `variant`, `tintColor`, `height` (default 56), `cornerRadius` (default `height/2`), `titleStyle`, `contentPaddingHorizontal`, `accessibilityLabel`, `testID`, `style`.\n- `` - floating tab bar / toolbar. Items use a `LiquidGlassContainer` so they morph together. Props: `items`, `height`, `itemHeight`, `itemCornerRadius`, `activeTintColor`, `gap`, `paddingHorizontal`, `variant`, `labelStyle`, `iconStyle`, `style`, `accessibilityLabel`, `testID`. Each item: `key`, `icon`, `label?`, `onPress?`, `onLongPress?`, `active?`, `tintColor?`, `accessibilityLabel?`, `testID?`.\n- `` - vertical navigation column. Props: `items`, `width`, `itemHeight`, `itemCornerRadius`, `activeTintColor`, `gap`, `paddingVertical`, `paddingHorizontal`, `variant`, `labelStyle`, `iconStyle`, `header`, `footer`, `style`, `accessibilityLabel`, `testID`. Each item: same shape as toolbar plus a required `label`.\n- `` - modal sheet with `detent: 'half' | 'full'`. Props: `visible`, `onDismiss`, `detent`, `variant`, `tintColor`, `cornerRadius`, `backdropOpacity` (default 0.35), `backdropColor`, `disableBackdropDismiss`, `hideHandle`, `springFriction`, `contentPaddingHorizontal`, `contentPaddingBottom`, `style`, `contentStyle`, `accessibilityLabel`, `testID`.\n- `` - intentionally NOT Liquid Glass. Props: `title?`, `body?`, `eyebrow?`, `children`, `backgroundColor`, `cornerRadius`, `padding`, `titleStyle`, `bodyStyle`, `eyebrowStyle`, `style`, `accessibilityLabel`, `testID`. Per Apple HIG, Liquid Glass belongs to the navigation/control layer; cards in the content layer should use standard materials.\n\n## When to use what\n\nApple's HIG, paraphrased:\n\n- Glass = functional layer (bars, sidebars, controls, sheets). Use `variant=\"regular\"` (default) for surfaces with text. Use `variant=\"clear\"` over media and add a ~35% dark dimming layer behind if the media is bright.\n- Glass != content layer. Don't put articles, list rows, or feed cards behind glass.\n- Group multiple glass elements with a `LiquidGlassContainer` (we wrap `UIGlassContainerEffect` for this). Don't stack glass on glass; let neighbouring shapes morph.\n- Use color sparingly. Tint glass only to emphasize a primary action.\n\n## Example\n\n```tsx\nimport {\n GlassButton,\n GlassNavBar,\n GlassToolbar,\n GlassSidebar,\n GlassSheet,\n ContentCard,\n} from '@askewxyz/react-native-liquid-glass';\n\nexport default function Screen() {\n const [open, setOpen] = useState(false);\n return (\n <>\n }\n trailing={}\n />\n \n setOpen(true)} />\n \n setOpen(false)}\n backdropOpacity={0.5}\n hideHandle={false}\n >\n ...\n \n \n );\n}\n```\n\n## Web fallback\n\nA pure-DOM fallback renders `backdrop-filter: blur(...) saturate(...)` so layouts don't crash when targeting web. Visual fidelity is best-effort.\n\n## Repo layout\n\n```\nreact-native-liquid-glass/\n index.ts <- public API\n src/ <- library TS sources\n LiquidGlassView.tsx\n LiquidGlassContainer.tsx\n components/\n ios/ <- Swift: UIGlassEffect / UIGlassContainerEffect\n android/ <- Kotlin: no-op stubs\n __tests__/ <- jest-expo, 24 tests\n expo-module.config.json\n package.json\n example/ <- demo app that consumes the library via file:..\n App.tsx\n package.json\n```\n\n## Run the demo\n\n```sh\ngit clone https://github.com/askew-xyz/react-native-liquid-glass.git\ncd react-native-liquid-glass\nnpm install\ncd example && npm install\nnpx expo prebuild --platform ios\ncd ios && pod install && cd ..\nnpx expo run:ios\n```\n\n## Testing\n\n```sh\nnpm test\n```\n\nJest with the `jest-expo` preset. The native view is mocked via `requireNativeView` so tests do not need a built native binary.\n\n## License\n\nMIT.\n","readmeFilename":"README.md"}