feat: improve liquid glass detection (#3)

Author: okwasniewski

README.md

@@ -31,18 +31,17 @@ yarn add @callstack/liquid-glass
 ### Usage
 
 ```tsx
-import { LiquidGlassView } from '@callstack/liquid-glass';
-
-// Handle fallback for unsupported iOS versions
-const supportsLiquidGlass =
-  Platform.OS === 'ios' && Number(Platform.Version.split('.').at(0)) >= 26;
+import {
+  LiquidGlassView,
+  isLiquidGlassSupported,
+} from '@callstack/liquid-glass';
 
 function MyComponent() {
   return (
     <LiquidGlassView
       style={[
         { width: 200, height: 100, borderRadius: 20 },
-        !supportsLiquidGlass && { backgroundColor: 'rgba(255,255,255,0.5)' },
+        !isLiquidGlassSupported && { backgroundColor: 'rgba(255,255,255,0.5)' },
       ]}
       interactive
       effect="clear"
@@ -56,6 +55,22 @@ function MyComponent() {
 > [!NOTE]
 > On unsupported iOS version (below iOS 26), it will render a normal `View` without any effects.
 
+### API
+
+#### `isLiquidGlassSupported`
+
+A boolean constant that indicates whether the current device supports the liquid glass effect.
+
+```tsx
+import { isLiquidGlassSupported } from '@callstack/liquid-glass';
+
+if (isLiquidGlassSupported) {
+  // Device supports liquid glass effect
+} else {
+  // Provide fallback UI
+}
+```
+
 ### LiquidGlassView - Props
 
 | Prop          | Type                            | Default     | Description                                                                                                                         |

example/src/App.tsx

@@ -9,7 +9,10 @@ import {
   View,
   Pressable,
 } from 'react-native';
-import { LiquidGlassView } from '@callstack/liquid-glass';
+import {
+  LiquidGlassView,
+  isLiquidGlassSupported,
+} from '@callstack/liquid-glass';
 import { useEffect, useState } from 'react';
 
 const AnimatedLiquidGlassView =
@@ -62,7 +65,10 @@ function WeatherWidget() {
   return (
     <View style={{ flexDirection: 'row', gap: 10, marginBottom: 20 }}>
       <LiquidGlassView
-        style={styles.weather}
+        style={[
+          styles.weather,
+          !isLiquidGlassSupported && { backgroundColor: 'rgba(255,165,0,0.3)' },
+        ]}
         interactive={true}
         effect={'clear'}
         tintColor={'orange'}

ios/LiquidGlassContainerView.mm

@@ -7,7 +7,11 @@
 
 #import "RCTFabricComponentsPlugins.h"
 
+#if __has_include("LiquidGlass/LiquidGlass-Swift.h")
+#import "LiquidGlass/LiquidGlass-Swift.h"
+#else
 #import "LiquidGlass-Swift.h"
+#endif
 
 using namespace facebook::react;
 

ios/LiquidGlassModule.h

@@ -0,0 +1,9 @@
+#import <UIKit/UIKit.h>
+
+#import <React/RCTBridge.h>
+#import <LiquidGlassViewSpec/LiquidGlassViewSpec.h>
+
+@interface LiquidGlassModule : NSObject <NativeLiquidGlassModuleSpec>
+
+@end
+

ios/LiquidGlassModule.mm

@@ -0,0 +1,41 @@
+#import "LiquidGlassModule.h"
+
+@implementation LiquidGlassModule {
+  facebook::react::ModuleConstants<JS::NativeLiquidGlassModule::Constants> _constants;
+}
+
+- (void)initialize
+{
+#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 260000 /* __IPHONE_26_0 */
+  if (@available(iOS 26.0, *)) {
+    _constants = facebook::react::typedConstants<JS::NativeLiquidGlassModule::Constants>({
+      .isLiquidGlassSupported = YES
+    });
+  }
+#else
+  _constants = facebook::react::typedConstants<JS::NativeLiquidGlassModule::Constants>({
+    .isLiquidGlassSupported = NO
+  });
+#endif
+}
+
+- (facebook::react::ModuleConstants<JS::NativeLiquidGlassModule::Constants>)constantsToExport
+{
+  return (facebook::react::ModuleConstants<JS::NativeLiquidGlassModule::Constants>)[self getConstants];
+}
+
++ (NSString *)moduleName {
+  return @"NativeLiquidGlassModule";
+}
+
+
+- (facebook::react::ModuleConstants<JS::NativeLiquidGlassModule::Constants>)getConstants
+{
+  return _constants;
+}
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const facebook::react::ObjCTurboModule::InitParams &)params {
+  return std::make_shared<facebook::react::NativeLiquidGlassModuleSpecJSI>(params);
+}
+
+@end

ios/LiquidGlassView.mm

@@ -7,9 +7,13 @@
 #import "RCTImagePrimitivesConversions.h"
 
 #import "RCTFabricComponentsPlugins.h"
+#import "RCTConversions.h"
 
+#if __has_include("LiquidGlass/LiquidGlass-Swift.h")
+#import "LiquidGlass/LiquidGlass-Swift.h"
+#else
 #import "LiquidGlass-Swift.h"
-#import "RCTConversions.h"
+#endif
 
 using namespace facebook::react;
 

package.json

@@ -159,6 +159,9 @@
       "componentProvider": {
         "LiquidGlassView": "LiquidGlassView",
         "LiquidGlassContainerView": "LiquidGlassContainerView"
+      },
+      "modulesProvider": {
+        "NativeLiquidGlassModule": "LiquidGlassModule"
       }
     }
   },

src/NativeLiquidGlassModule.ts

@@ -0,0 +1,13 @@
+import { TurboModuleRegistry, type TurboModule } from 'react-native';
+
+type LiquidGlassModuleConstants = {
+  isLiquidGlassSupported: boolean;
+};
+
+export interface Spec extends TurboModule {
+  getConstants(): LiquidGlassModuleConstants;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>(
+  'NativeLiquidGlassModule'
+);

src/index.tsx

@@ -1,2 +1,3 @@
 export { LiquidGlassView } from './LiquidGlassView';
 export { type NativeProps as LiquidGlassViewProps } from './LiquidGlassViewNativeComponent';
+export { isLiquidGlassSupported } from './isLiquidGlassSupported';

src/isLiquidGlassSupported.ts

@@ -0,0 +1,4 @@
+import NativeLiquidGlassModule from './NativeLiquidGlassModule';
+
+export const isLiquidGlassSupported =
+  NativeLiquidGlassModule.getConstants().isLiquidGlassSupported;