Repository: rit3zh/expo-liquid-glass-view
Branch: main
Commit: 2811521c909b
Files: 47
Total size: 99.1 KB
Directory structure:
gitextract_ulmtrhno/
├── .eslintrc.js
├── .gitignore
├── .npmignore
├── CHANGELOG.md
├── README.md
├── example/
│ ├── .gitignore
│ ├── App.tsx
│ ├── app.json
│ ├── babel.config.js
│ ├── constants.ts
│ ├── index.ts
│ ├── ios/
│ │ ├── .gitignore
│ │ ├── .spm.pods/
│ │ │ └── packages/
│ │ │ └── .umbrella/
│ │ │ ├── .build/
│ │ │ │ └── workspace-state.json
│ │ │ └── Package.swift
│ │ ├── .xcode.env
│ │ ├── Podfile
│ │ ├── Podfile.properties.json
│ │ ├── expoliquidglassexample/
│ │ │ ├── AppDelegate.swift
│ │ │ ├── Images.xcassets/
│ │ │ │ ├── AppIcon.appiconset/
│ │ │ │ │ └── Contents.json
│ │ │ │ ├── Contents.json
│ │ │ │ ├── SplashScreenBackground.colorset/
│ │ │ │ │ └── Contents.json
│ │ │ │ └── SplashScreenLogo.imageset/
│ │ │ │ └── Contents.json
│ │ │ ├── Info.plist
│ │ │ ├── PrivacyInfo.xcprivacy
│ │ │ ├── SplashScreen.storyboard
│ │ │ ├── Supporting/
│ │ │ │ └── Expo.plist
│ │ │ ├── expoliquidglassexample-Bridging-Header.h
│ │ │ └── expoliquidglassexample.entitlements
│ │ ├── expoliquidglassexample.xcodeproj/
│ │ │ ├── project.pbxproj
│ │ │ └── xcshareddata/
│ │ │ └── xcschemes/
│ │ │ └── expoliquidglassexample.xcscheme
│ │ └── expoliquidglassexample.xcworkspace/
│ │ └── contents.xcworkspacedata
│ ├── metro.config.js
│ ├── package.json
│ ├── screens/
│ │ └── ComplexVideo.tsx
│ ├── tsconfig.json
│ └── webpack.config.js
├── expo-module.config.json
├── ios/
│ ├── ExpoLiquidGlass.podspec
│ ├── ExpoLiquidGlassContainer.swift
│ ├── ExpoLiquidGlassModule.swift
│ └── ExpoLiquidGlassView.swift
├── package.json
├── src/
│ ├── ExpoLiquidGlassContainer.tsx
│ ├── ExpoLiquidGlassView.tsx
│ ├── ExpoLiquidGlassView.types.ts
│ └── index.ts
└── tsconfig.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .eslintrc.js
================================================
module.exports = {
root: true,
extends: ['universe/native', 'universe/web'],
ignorePatterns: ['build'],
};
================================================
FILE: .gitignore
================================================
# OSX
#
.DS_Store
# VSCode
.vscode/
jsconfig.json
# Xcode
#
build/
*.pbxuser
!default.pbxuser
*.mode1v3
!default.mode1v3
*.mode2v3
!default.mode2v3
*.perspectivev3
!default.perspectivev3
xcuserdata
*.xccheckout
*.moved-aside
DerivedData
*.hmap
*.ipa
*.xcuserstate
project.xcworkspace
# Android/IJ
#
.classpath
.cxx
.gradle
.idea
.project
.settings
local.properties
android.iml
android/app/libs
android/keystores/debug.keystore
# Cocoapods
#
example/ios/Pods
# Ruby
example/vendor/
# node.js
#
node_modules/
npm-debug.log
yarn-debug.log
yarn-error.log
# Expo
.expo/*
package-lock.json
================================================
FILE: .npmignore
================================================
# Exclude all top-level hidden directories by convention
/.*/
# Exclude tarballs generated by `npm pack`
/*.tgz
__mocks__
__tests__
/babel.config.js
/android/src/androidTest/
/android/src/test/
/android/build/
/example/
/src/
package-lock.json
================================================
FILE: CHANGELOG.md
================================================
# Changelog
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
### [0.1.7](https://github.com/rit3zh/expo-liquid-glass-view/compare/v0.1.6...v0.1.7) (2025-09-19)
### Features
* **glass:** add ExpoLiquidGlassContainer with layout direction support ([decc813](https://github.com/rit3zh/expo-liquid-glass-view/commit/decc8130854ad783da6f61488541dfba54309f67))
* **glass:** add ExpoLiquidGlassContainer with layout direction support ([2c33ac5](https://github.com/rit3zh/expo-liquid-glass-view/commit/2c33ac5a8df5350e8e959ede2f4f1437686f1879))
### [0.1.6](https://github.com/rit3zh/expo-liquid-glass-view/compare/v0.1.5...v0.1.6) (2025-08-04)
================================================
FILE: README.md
================================================
🧊 expo-liquid-glass-view
A beautiful, SwiftUI-powered glass effect view for React Native built with Expo
---
## ✨ Features
- 🧊 Native **glassEffect** on iOS
- 🍏 Powered by **SwiftUI** for ultra-smooth performance
- 🧱 Configurable corner radius and style (continuous or circular)
- 🌈 Custom **tint overlays** and **blur strength types**
- 🧩 Supports nesting **React Native children**
---
## 🚀 Installation
### 1. Add the package
```bash
npx expo install expo-liquid-glass-view
```
### 2. Install CocoaPods
```bash
cd ios && pod install
```
### 3. Prebuild the iOS project
```bash
npx expo prebuild --platform ios
```
### 4. Run your app
```bash
npx expo run:ios
```
> ⚠️ **iOS only** — This view uses SwiftUI and does not support Android.
---
## 📦 Usage
```tsx
import { ExpoLiquidGlassView } from "expo-liquid-glass-view";
export default function App() {
return (
Liquid Glass ✨
);
}
```
---
## ⚙️ Props
| Prop | Type | Default | Description |
| -------------- | --------------------------------------------------------------- | -------------- | -------------------------------------------------------------------------- |
| `type` | `"clear" \| "tint" \| "regular" \| "interactive" \| "identity"` | `"regular"` | Defines the glass blur intensity and system effect |
| `tint` | `string` | `undefined` | Optional iOS system tint, like `"systemUltraThinMaterial"` or custom color |
| `cornerRadius` | `number` | `12` | Border radius in points |
| `cornerStyle` | `"continuous"` \| `"circular"` | `"continuous"` | Defines the curvature style of the corners |
| `style` | `StyleProp` | `undefined` | Style for the outer native glass view |
| `containerStyle` | `StyleProp` | `undefined` | Style for the inner content container that wraps `children` |
| `children` | `React.ReactNode` | `undefined` | Optional React children to render inside the glass |
---
## 🧪 Types
```ts
export enum CornerStyle {
Continuous = "continuous",
Circular = "circular",
}
export enum LiquidGlassType {
Clear = "clear",
Tint = "tint",
Regular = "regular",
Interactive = "interactive",
Identity = "identity",
}
export interface ExpoLiquidGlassViewProps {
type?: LiquidGlassType;
tint?: string;
cornerRadius?: number;
cornerStyle?: CornerStyle;
style?: StyleProp;
containerStyle?: StyleProp;
children?: React.ReactNode;
}
```
---
## 📱 Platform Support
- ✅ iOS _(SwiftUI)_
- ❌ Android _(not supported)_
---
## 🛠 Built With
- ⚛️ [Expo Modules](https://docs.expo.dev/modules/overview/)
- 🍎 [SwiftUI](https://developer.apple.com/documentation/swiftui/)
- 📱 [React Native](https://reactnative.dev/)
---
## 🧩 Related Ideas
If you're building glassmorphic UIs, try pairing this with:
- `expo-blur`
- `expo-symbols`
- `react-native-skia`
---
## 🎥 Preview
https://github.com/user-attachments/assets/a08878fb-6a90-474b-8f21-1b46fe990177
## ❤️ Contributing
###### PRs and issues are welcome! Let’s keep building beautiful native UIs with React Native + SwiftUI!
## 📄 License
MIT © [rit3zh](https://github.com/rit3zh)
================================================
FILE: example/.gitignore
================================================
# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
# dependencies
node_modules/
# Expo
.expo/
dist/
web-build/
expo-env.d.ts
# Native
.kotlin/
*.orig.*
*.jks
*.p8
*.p12
*.key
*.mobileprovision
# Metro
.metro-health-check*
# debug
npm-debug.*
yarn-debug.*
yarn-error.*
# macOS
.DS_Store
*.pem
# local env files
.env*.local
# typescript
*.tsbuildinfo
================================================
FILE: example/App.tsx
================================================
import {
View,
Text,
StyleSheet,
SafeAreaView,
TouchableOpacity,
ImageBackground,
} from "react-native";
import React, { useState, useEffect } from "react";
import { ExpoLiquidGlassView } from "expo-liquid-glass-view";
const WIDTH: number = 300;
const HEIGHT: number = 300;
const BORDER_RADIUS: number = 999;
const App = () => {
const [videoLoaded, setVideoLoaded] = useState(false);
const [forceUpdate, setForceUpdate] = useState(0);
useEffect(() => {
const timer = setTimeout(() => {
setForceUpdate((prev) => prev + 1);
}, 100);
return () => clearTimeout(timer);
}, [videoLoaded]);
useEffect(() => {
const interval = setInterval(() => {
setForceUpdate((prev) => prev + 1);
}, 1000);
const cleanup = setTimeout(() => {
clearInterval(interval);
}, 3000);
return () => {
clearInterval(interval);
clearTimeout(cleanup);
};
}, []);
return (
Hello, from liquid glass!
);
};
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "black",
justifyContent: "center",
alignItems: "center",
},
overlay: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
videoContainer: {
position: "relative",
width: WIDTH,
height: HEIGHT,
borderRadius: BORDER_RADIUS,
overflow: "hidden",
bottom: 100,
},
video: {
width: WIDTH,
height: HEIGHT,
position: "absolute",
top: 0,
left: 0,
},
glassOverlay: {
height: HEIGHT,
width: WIDTH,
},
glassContent: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
innerView: {
overflow: "hidden",
width: WIDTH,
height: HEIGHT,
borderRadius: BORDER_RADIUS,
},
bottomContent: {
width: "90%",
alignItems: "center",
justifyContent: "flex-end",
height: "90%",
position: "absolute",
},
statsCard: {
width: "80%",
height: 80,
marginBottom: 40,
},
statsContent: {
flex: 1,
flexDirection: "row",
alignItems: "center",
justifyContent: "space-around",
paddingHorizontal: 20,
},
statItem: {
alignItems: "center",
},
statValue: {
fontSize: 20,
fontWeight: "600",
color: "#ffffff",
marginBottom: 4,
},
statLabel: {
fontSize: 12,
color: "#888888",
fontWeight: "400",
},
statDivider: {
width: 1,
height: 40,
backgroundColor: "#333333",
},
controls: {
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
gap: 40,
marginBottom: 40,
},
controlButton: {
alignItems: "center",
},
controlGlass: {
width: 50,
height: 50,
marginBottom: 12,
},
controlContent: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
controlIcon: {
fontSize: 20,
},
controlText: {
fontSize: 14,
color: "#cccccc",
fontWeight: "400",
},
});
================================================
FILE: example/app.json
================================================
{
"expo": {
"name": "expo-liquid-glass-example",
"slug": "expo-liquid-glass-example",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"userInterfaceStyle": "light",
"newArchEnabled": true,
"splash": {
"image": "./assets/splash-icon.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"ios": {
"supportsTablet": true,
"bundleIdentifier": "expo.modules.liquidglass.example"
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#ffffff"
},
"edgeToEdgeEnabled": true,
"package": "expo.modules.liquidglass.example"
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}
================================================
FILE: example/babel.config.js
================================================
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};
================================================
FILE: example/constants.ts
================================================
export const BACKGROUND_URL: string = `https://i.pinimg.com/736x/79/ab/04/79ab04ae66154a34c2518a69bf6c6a23.jpg`;
export const backgroundImages = [
BACKGROUND_URL,
"https://i.pinimg.com/736x/88/95/f2/8895f231b18c8b2f48a0c26d2f5d048e.jpg",
"https://images.unsplash.com/photo-1518837695005-2083093ee35b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80", // Ocean sunset
"https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80", // Forest
"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80", // City skyline
];
================================================
FILE: example/index.ts
================================================
import { registerRootComponent } from 'expo';
import App from './App';
// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in Expo Go or in a native build,
// the environment is set up appropriately
registerRootComponent(App);
================================================
FILE: example/ios/.gitignore
================================================
# OSX
#
.DS_Store
# Xcode
#
build/
*.pbxuser
!default.pbxuser
*.mode1v3
!default.mode1v3
*.mode2v3
!default.mode2v3
*.perspectivev3
!default.perspectivev3
xcuserdata
*.xccheckout
*.moved-aside
DerivedData
*.hmap
*.ipa
*.xcuserstate
project.xcworkspace
.xcode.env.local
# Bundle artifacts
*.jsbundle
# CocoaPods
/Pods/
================================================
FILE: example/ios/.spm.pods/packages/.umbrella/.build/workspace-state.json
================================================
{
"object" : {
"artifacts" : [
],
"dependencies" : [
],
"prebuilts" : [
]
},
"version" : 7
}
================================================
FILE: example/ios/.spm.pods/packages/.umbrella/Package.swift
================================================
// swift-tools-version:5.7
import PackageDescription
let package = Package(
name: "_umbrella_",
dependencies: [
]
)
================================================
FILE: example/ios/.xcode.env
================================================
# This `.xcode.env` file is versioned and is used to source the environment
# used when running script phases inside Xcode.
# To customize your local environment, you can create an `.xcode.env.local`
# file that is not versioned.
# NODE_BINARY variable contains the PATH to the node executable.
#
# Customize the NODE_BINARY variable here.
# For example, to use nvm with brew, add the following line
# . "$(brew --prefix nvm)/nvm.sh" --no-use
export NODE_BINARY=$(command -v node)
================================================
FILE: example/ios/Podfile
================================================
require File.join(File.dirname(`node --print "require.resolve('expo/package.json')"`), "scripts/autolinking")
require File.join(File.dirname(`node --print "require.resolve('react-native/package.json')"`), "scripts/react_native_pods")
require 'json'
podfile_properties = JSON.parse(File.read(File.join(__dir__, 'Podfile.properties.json'))) rescue {}
ENV['RCT_NEW_ARCH_ENABLED'] = '0' if podfile_properties['newArchEnabled'] == 'false'
ENV['EX_DEV_CLIENT_NETWORK_INSPECTOR'] = podfile_properties['EX_DEV_CLIENT_NETWORK_INSPECTOR']
platform :ios, podfile_properties['ios.deploymentTarget'] || '15.1'
install! 'cocoapods',
:deterministic_uuids => false
prepare_react_native_project!
target 'expoliquidglassexample' do
use_expo_modules!
if ENV['EXPO_USE_COMMUNITY_AUTOLINKING'] == '1'
config_command = ['node', '-e', "process.argv=['', '', 'config'];require('@react-native-community/cli').run()"];
else
config_command = [
'npx',
'expo-modules-autolinking',
'react-native-config',
'--json',
'--platform',
'ios'
]
end
config = use_native_modules!(config_command)
use_frameworks! :linkage => podfile_properties['ios.useFrameworks'].to_sym if podfile_properties['ios.useFrameworks']
use_frameworks! :linkage => ENV['USE_FRAMEWORKS'].to_sym if ENV['USE_FRAMEWORKS']
use_react_native!(
:path => config[:reactNativePath],
:hermes_enabled => podfile_properties['expo.jsEngine'] == nil || podfile_properties['expo.jsEngine'] == 'hermes',
# An absolute path to your application root.
:app_path => "#{Pod::Config.instance.installation_root}/..",
:privacy_file_aggregation_enabled => podfile_properties['apple.privacyManifestAggregationEnabled'] != 'false',
)
post_install do |installer|
react_native_post_install(
installer,
config[:reactNativePath],
:mac_catalyst_enabled => false,
:ccache_enabled => podfile_properties['apple.ccacheEnabled'] == 'true',
)
# This is necessary for Xcode 14, because it signs resource bundles by default
# when building for devices.
installer.target_installation_results.pod_target_installation_results
.each do |pod_name, target_installation_result|
target_installation_result.resource_bundle_targets.each do |resource_bundle_target|
resource_bundle_target.build_configurations.each do |config|
config.build_settings['CODE_SIGNING_ALLOWED'] = 'NO'
end
end
end
end
end
================================================
FILE: example/ios/Podfile.properties.json
================================================
{
"expo.jsEngine": "hermes",
"EX_DEV_CLIENT_NETWORK_INSPECTOR": "true",
"newArchEnabled": "true"
}
================================================
FILE: example/ios/expoliquidglassexample/AppDelegate.swift
================================================
import Expo
import React
import ReactAppDependencyProvider
@UIApplicationMain
public class AppDelegate: ExpoAppDelegate {
var window: UIWindow?
var reactNativeDelegate: ExpoReactNativeFactoryDelegate?
var reactNativeFactory: RCTReactNativeFactory?
public override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
) -> Bool {
let delegate = ReactNativeDelegate()
let factory = ExpoReactNativeFactory(delegate: delegate)
delegate.dependencyProvider = RCTAppDependencyProvider()
reactNativeDelegate = delegate
reactNativeFactory = factory
bindReactNativeFactory(factory)
#if os(iOS) || os(tvOS)
window = UIWindow(frame: UIScreen.main.bounds)
factory.startReactNative(
withModuleName: "main",
in: window,
launchOptions: launchOptions)
#endif
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
// Linking API
public override func application(
_ app: UIApplication,
open url: URL,
options: [UIApplication.OpenURLOptionsKey: Any] = [:]
) -> Bool {
return super.application(app, open: url, options: options) || RCTLinkingManager.application(app, open: url, options: options)
}
// Universal Links
public override func application(
_ application: UIApplication,
continue userActivity: NSUserActivity,
restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void
) -> Bool {
let result = RCTLinkingManager.application(application, continue: userActivity, restorationHandler: restorationHandler)
return super.application(application, continue: userActivity, restorationHandler: restorationHandler) || result
}
}
class ReactNativeDelegate: ExpoReactNativeFactoryDelegate {
// Extension point for config-plugins
override func sourceURL(for bridge: RCTBridge) -> URL? {
// needed to return the correct URL for expo-dev-client.
bridge.bundleURL ?? bundleURL()
}
override func bundleURL() -> URL? {
#if DEBUG
return RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: ".expo/.virtual-metro-entry")
#else
return Bundle.main.url(forResource: "main", withExtension: "jsbundle")
#endif
}
}
================================================
FILE: example/ios/expoliquidglassexample/Images.xcassets/AppIcon.appiconset/Contents.json
================================================
{
"images": [
{
"filename": "App-Icon-1024x1024@1x.png",
"idiom": "universal",
"platform": "ios",
"size": "1024x1024"
}
],
"info": {
"version": 1,
"author": "expo"
}
}
================================================
FILE: example/ios/expoliquidglassexample/Images.xcassets/Contents.json
================================================
{
"info" : {
"version" : 1,
"author" : "expo"
}
}
================================================
FILE: example/ios/expoliquidglassexample/Images.xcassets/SplashScreenBackground.colorset/Contents.json
================================================
{
"colors": [
{
"color": {
"components": {
"alpha": "1.000",
"blue": "1.00000000000000",
"green": "1.00000000000000",
"red": "1.00000000000000"
},
"color-space": "srgb"
},
"idiom": "universal"
}
],
"info": {
"version": 1,
"author": "expo"
}
}
================================================
FILE: example/ios/expoliquidglassexample/Images.xcassets/SplashScreenLogo.imageset/Contents.json
================================================
{
"images": [
{
"idiom": "universal",
"filename": "image.png",
"scale": "1x"
},
{
"idiom": "universal",
"filename": "image@2x.png",
"scale": "2x"
},
{
"idiom": "universal",
"filename": "image@3x.png",
"scale": "3x"
}
],
"info": {
"version": 1,
"author": "expo"
}
}
================================================
FILE: example/ios/expoliquidglassexample/Info.plist
================================================
CADisableMinimumFrameDurationOnPhone
CFBundleDevelopmentRegion
$(DEVELOPMENT_LANGUAGE)
CFBundleDisplayName
expo-liquid-glass-example
CFBundleExecutable
$(EXECUTABLE_NAME)
CFBundleIdentifier
$(PRODUCT_BUNDLE_IDENTIFIER)
CFBundleInfoDictionaryVersion
6.0
CFBundleName
$(PRODUCT_NAME)
CFBundlePackageType
$(PRODUCT_BUNDLE_PACKAGE_TYPE)
CFBundleShortVersionString
1.0.0
CFBundleSignature
????
CFBundleURLTypes
CFBundleURLSchemes
expo.modules.liquidglass.example
CFBundleVersion
1
LSMinimumSystemVersion
12.0
LSRequiresIPhoneOS
NSAppTransportSecurity
NSAllowsArbitraryLoads
NSAllowsLocalNetworking
UILaunchStoryboardName
SplashScreen
UIRequiredDeviceCapabilities
arm64
UIRequiresFullScreen
UIStatusBarStyle
UIStatusBarStyleDefault
UISupportedInterfaceOrientations
UIInterfaceOrientationPortrait
UIInterfaceOrientationPortraitUpsideDown
UISupportedInterfaceOrientations~ipad
UIInterfaceOrientationPortrait
UIInterfaceOrientationPortraitUpsideDown
UIInterfaceOrientationLandscapeLeft
UIInterfaceOrientationLandscapeRight
UIUserInterfaceStyle
Light
UIViewControllerBasedStatusBarAppearance
================================================
FILE: example/ios/expoliquidglassexample/PrivacyInfo.xcprivacy
================================================
NSPrivacyAccessedAPITypes
NSPrivacyAccessedAPIType
NSPrivacyAccessedAPICategoryUserDefaults
NSPrivacyAccessedAPITypeReasons
CA92.1
NSPrivacyAccessedAPIType
NSPrivacyAccessedAPICategoryFileTimestamp
NSPrivacyAccessedAPITypeReasons
0A2A.1
3B52.1
C617.1
NSPrivacyAccessedAPIType
NSPrivacyAccessedAPICategoryDiskSpace
NSPrivacyAccessedAPITypeReasons
E174.1
85F4.1
NSPrivacyAccessedAPIType
NSPrivacyAccessedAPICategorySystemBootTime
NSPrivacyAccessedAPITypeReasons
35F9.1
NSPrivacyCollectedDataTypes
NSPrivacyTracking
================================================
FILE: example/ios/expoliquidglassexample/SplashScreen.storyboard
================================================
================================================
FILE: example/ios/expoliquidglassexample/Supporting/Expo.plist
================================================
EXUpdatesCheckOnLaunch
ALWAYS
EXUpdatesEnabled
EXUpdatesLaunchWaitMs
0
================================================
FILE: example/ios/expoliquidglassexample/expoliquidglassexample-Bridging-Header.h
================================================
//
// Use this file to import your target's public headers that you would like to expose to Swift.
//
================================================
FILE: example/ios/expoliquidglassexample/expoliquidglassexample.entitlements
================================================
================================================
FILE: example/ios/expoliquidglassexample.xcodeproj/project.pbxproj
================================================
// !$*UTF8*$!
{
archiveVersion = 1;
classes = {
};
objectVersion = 54;
objects = {
/* Begin PBXBuildFile section */
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
273E81AD0335CBEF96B896C6 /* libPods-expoliquidglassexample.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 51F6C847FB2D4930BE9940B2 /* libPods-expoliquidglassexample.a */; };
3E461D99554A48A4959DE609 /* SplashScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */; };
6A9133C881153F765327B585 /* ExpoModulesProvider.swift in Sources */ = {isa = PBXBuildFile; fileRef = BBD87AAED3D97A13C324569A /* ExpoModulesProvider.swift */; };
6EE0FC273F935368C199F33A /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = C762BBF9BCCCC89ED572CFC1 /* PrivacyInfo.xcprivacy */; };
BB2F792D24A3F905000567C9 /* Expo.plist in Resources */ = {isa = PBXBuildFile; fileRef = BB2F792C24A3F905000567C9 /* Expo.plist */; };
F11748422D0307B40044C1D9 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = F11748412D0307B40044C1D9 /* AppDelegate.swift */; };
/* End PBXBuildFile section */
/* Begin PBXFileReference section */
13B07F961A680F5B00A75B9A /* expoliquidglassexample.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = expoliquidglassexample.app; sourceTree = BUILT_PRODUCTS_DIR; };
13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = expoliquidglassexample/Images.xcassets; sourceTree = ""; };
13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = expoliquidglassexample/Info.plist; sourceTree = ""; };
51F6C847FB2D4930BE9940B2 /* libPods-expoliquidglassexample.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-expoliquidglassexample.a"; sourceTree = BUILT_PRODUCTS_DIR; };
94770A3A0E8E6E2756728920 /* Pods-expoliquidglassexample.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-expoliquidglassexample.release.xcconfig"; path = "Target Support Files/Pods-expoliquidglassexample/Pods-expoliquidglassexample.release.xcconfig"; sourceTree = ""; };
AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = SplashScreen.storyboard; path = expoliquidglassexample/SplashScreen.storyboard; sourceTree = ""; };
BB2F792C24A3F905000567C9 /* Expo.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Expo.plist; sourceTree = ""; };
BBD87AAED3D97A13C324569A /* ExpoModulesProvider.swift */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = sourcecode.swift; name = ExpoModulesProvider.swift; path = "Pods/Target Support Files/Pods-expoliquidglassexample/ExpoModulesProvider.swift"; sourceTree = ""; };
BFB54A0A553C92C1BA2AEA9B /* Pods-expoliquidglassexample.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-expoliquidglassexample.debug.xcconfig"; path = "Target Support Files/Pods-expoliquidglassexample/Pods-expoliquidglassexample.debug.xcconfig"; sourceTree = ""; };
C762BBF9BCCCC89ED572CFC1 /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; includeInIndex = 1; name = PrivacyInfo.xcprivacy; path = expoliquidglassexample/PrivacyInfo.xcprivacy; sourceTree = ""; };
ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
F11748412D0307B40044C1D9 /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = AppDelegate.swift; path = expoliquidglassexample/AppDelegate.swift; sourceTree = ""; };
F11748442D0722820044C1D9 /* expoliquidglassexample-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; name = "expoliquidglassexample-Bridging-Header.h"; path = "expoliquidglassexample/expoliquidglassexample-Bridging-Header.h"; sourceTree = ""; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
13B07F8C1A680F5B00A75B9A /* Frameworks */ = {
isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647;
files = (
273E81AD0335CBEF96B896C6 /* libPods-expoliquidglassexample.a in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXFrameworksBuildPhase section */
/* Begin PBXGroup section */
13B07FAE1A68108700A75B9A /* expoliquidglassexample */ = {
isa = PBXGroup;
children = (
F11748412D0307B40044C1D9 /* AppDelegate.swift */,
F11748442D0722820044C1D9 /* expoliquidglassexample-Bridging-Header.h */,
BB2F792B24A3F905000567C9 /* Supporting */,
13B07FB51A68108700A75B9A /* Images.xcassets */,
13B07FB61A68108700A75B9A /* Info.plist */,
AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */,
C762BBF9BCCCC89ED572CFC1 /* PrivacyInfo.xcprivacy */,
);
name = expoliquidglassexample;
sourceTree = "";
};
1DDF3FEE1C95528445000776 /* ExpoModulesProviders */ = {
isa = PBXGroup;
children = (
A0BBAE60C308C81C63F05CD4 /* expoliquidglassexample */,
);
name = ExpoModulesProviders;
sourceTree = "";
};
2D16E6871FA4F8E400B85C8A /* Frameworks */ = {
isa = PBXGroup;
children = (
ED297162215061F000B7C4FE /* JavaScriptCore.framework */,
51F6C847FB2D4930BE9940B2 /* libPods-expoliquidglassexample.a */,
);
name = Frameworks;
sourceTree = "";
};
832341AE1AAA6A7D00B99B32 /* Libraries */ = {
isa = PBXGroup;
children = (
);
name = Libraries;
sourceTree = "";
};
83CBB9F61A601CBA00E9B192 = {
isa = PBXGroup;
children = (
13B07FAE1A68108700A75B9A /* expoliquidglassexample */,
832341AE1AAA6A7D00B99B32 /* Libraries */,
83CBBA001A601CBA00E9B192 /* Products */,
2D16E6871FA4F8E400B85C8A /* Frameworks */,
F3269B31D3DCC28BBDACC4B3 /* Pods */,
1DDF3FEE1C95528445000776 /* ExpoModulesProviders */,
);
indentWidth = 2;
sourceTree = "";
tabWidth = 2;
usesTabs = 0;
};
83CBBA001A601CBA00E9B192 /* Products */ = {
isa = PBXGroup;
children = (
13B07F961A680F5B00A75B9A /* expoliquidglassexample.app */,
);
name = Products;
sourceTree = "";
};
A0BBAE60C308C81C63F05CD4 /* expoliquidglassexample */ = {
isa = PBXGroup;
children = (
BBD87AAED3D97A13C324569A /* ExpoModulesProvider.swift */,
);
name = expoliquidglassexample;
sourceTree = "";
};
BB2F792B24A3F905000567C9 /* Supporting */ = {
isa = PBXGroup;
children = (
BB2F792C24A3F905000567C9 /* Expo.plist */,
);
name = Supporting;
path = expoliquidglassexample/Supporting;
sourceTree = "";
};
F3269B31D3DCC28BBDACC4B3 /* Pods */ = {
isa = PBXGroup;
children = (
BFB54A0A553C92C1BA2AEA9B /* Pods-expoliquidglassexample.debug.xcconfig */,
94770A3A0E8E6E2756728920 /* Pods-expoliquidglassexample.release.xcconfig */,
);
name = Pods;
path = Pods;
sourceTree = "";
};
/* End PBXGroup section */
/* Begin PBXNativeTarget section */
13B07F861A680F5B00A75B9A /* expoliquidglassexample */ = {
isa = PBXNativeTarget;
buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "expoliquidglassexample" */;
buildPhases = (
08A4A3CD28434E44B6B9DE2E /* [CP] Check Pods Manifest.lock */,
23E98009D95118211293BEED /* [Expo] Configure project */,
13B07F871A680F5B00A75B9A /* Sources */,
13B07F8C1A680F5B00A75B9A /* Frameworks */,
13B07F8E1A680F5B00A75B9A /* Resources */,
00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
800E24972A6A228C8D4807E9 /* [CP] Copy Pods Resources */,
47747F1187DB8FCC013763D0 /* [CP] Embed Pods Frameworks */,
);
buildRules = (
);
dependencies = (
);
name = expoliquidglassexample;
productName = expoliquidglassexample;
productReference = 13B07F961A680F5B00A75B9A /* expoliquidglassexample.app */;
productType = "com.apple.product-type.application";
};
/* End PBXNativeTarget section */
/* Begin PBXProject section */
83CBB9F71A601CBA00E9B192 /* Project object */ = {
isa = PBXProject;
attributes = {
LastUpgradeCheck = 1130;
TargetAttributes = {
13B07F861A680F5B00A75B9A = {
LastSwiftMigration = 1250;
};
};
};
buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "expoliquidglassexample" */;
compatibilityVersion = "Xcode 3.2";
developmentRegion = en;
hasScannedForEncodings = 0;
knownRegions = (
en,
Base,
);
mainGroup = 83CBB9F61A601CBA00E9B192;
productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */;
projectDirPath = "";
projectRoot = "";
targets = (
13B07F861A680F5B00A75B9A /* expoliquidglassexample */,
);
};
/* End PBXProject section */
/* Begin PBXResourcesBuildPhase section */
13B07F8E1A680F5B00A75B9A /* Resources */ = {
isa = PBXResourcesBuildPhase;
buildActionMask = 2147483647;
files = (
BB2F792D24A3F905000567C9 /* Expo.plist in Resources */,
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
3E461D99554A48A4959DE609 /* SplashScreen.storyboard in Resources */,
6EE0FC273F935368C199F33A /* PrivacyInfo.xcprivacy in Resources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXResourcesBuildPhase section */
/* Begin PBXShellScriptBuildPhase section */
00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = {
isa = PBXShellScriptBuildPhase;
alwaysOutOfDate = 1;
buildActionMask = 2147483647;
files = (
);
inputPaths = (
);
name = "Bundle React Native code and images";
outputPaths = (
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "if [[ -f \"$PODS_ROOT/../.xcode.env\" ]]; then\n source \"$PODS_ROOT/../.xcode.env\"\nfi\nif [[ -f \"$PODS_ROOT/../.xcode.env.local\" ]]; then\n source \"$PODS_ROOT/../.xcode.env.local\"\nfi\n\n# The project root by default is one level up from the ios directory\nexport PROJECT_ROOT=\"$PROJECT_DIR\"/..\n\nif [[ \"$CONFIGURATION\" = *Debug* ]]; then\n export SKIP_BUNDLING=1\nfi\nif [[ -z \"$ENTRY_FILE\" ]]; then\n # Set the entry JS file using the bundler's entry resolution.\n export ENTRY_FILE=\"$(\"$NODE_BINARY\" -e \"require('expo/scripts/resolveAppEntry')\" \"$PROJECT_ROOT\" ios absolute | tail -n 1)\"\nfi\n\nif [[ -z \"$CLI_PATH\" ]]; then\n # Use Expo CLI\n export CLI_PATH=\"$(\"$NODE_BINARY\" --print \"require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })\")\"\nfi\nif [[ -z \"$BUNDLE_COMMAND\" ]]; then\n # Default Expo CLI command for bundling\n export BUNDLE_COMMAND=\"export:embed\"\nfi\n\n# Source .xcode.env.updates if it exists to allow\n# SKIP_BUNDLING to be unset if needed\nif [[ -f \"$PODS_ROOT/../.xcode.env.updates\" ]]; then\n source \"$PODS_ROOT/../.xcode.env.updates\"\nfi\n# Source local changes to allow overrides\n# if needed\nif [[ -f \"$PODS_ROOT/../.xcode.env.local\" ]]; then\n source \"$PODS_ROOT/../.xcode.env.local\"\nfi\n\n`\"$NODE_BINARY\" --print \"require('path').dirname(require.resolve('react-native/package.json')) + '/scripts/react-native-xcode.sh'\"`\n\n";
};
08A4A3CD28434E44B6B9DE2E /* [CP] Check Pods Manifest.lock */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputFileListPaths = (
);
inputPaths = (
"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
"${PODS_ROOT}/Manifest.lock",
);
name = "[CP] Check Pods Manifest.lock";
outputFileListPaths = (
);
outputPaths = (
"$(DERIVED_FILE_DIR)/Pods-expoliquidglassexample-checkManifestLockResult.txt",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
showEnvVarsInLog = 0;
};
23E98009D95118211293BEED /* [Expo] Configure project */ = {
isa = PBXShellScriptBuildPhase;
alwaysOutOfDate = 1;
buildActionMask = 2147483647;
files = (
);
inputFileListPaths = (
);
inputPaths = (
);
name = "[Expo] Configure project";
outputFileListPaths = (
);
outputPaths = (
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "# This script configures Expo modules and generates the modules provider file.\nbash -l -c \"./Pods/Target\\ Support\\ Files/Pods-expoliquidglassexample/expo-configure-project.sh\"\n";
};
47747F1187DB8FCC013763D0 /* [CP] Embed Pods Frameworks */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputPaths = (
"${PODS_ROOT}/Target Support Files/Pods-expoliquidglassexample/Pods-expoliquidglassexample-frameworks.sh",
"${PODS_XCFRAMEWORKS_BUILD_DIR}/hermes-engine/Pre-built/hermes.framework/hermes",
);
name = "[CP] Embed Pods Frameworks";
outputPaths = (
"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/hermes.framework",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-expoliquidglassexample/Pods-expoliquidglassexample-frameworks.sh\"\n";
showEnvVarsInLog = 0;
};
800E24972A6A228C8D4807E9 /* [CP] Copy Pods Resources */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
);
inputPaths = (
"${PODS_ROOT}/Target Support Files/Pods-expoliquidglassexample/Pods-expoliquidglassexample-resources.sh",
"${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/EXConstants.bundle",
"${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/ExpoConstants_privacy.bundle",
"${PODS_CONFIGURATION_BUILD_DIR}/ExpoFileSystem/ExpoFileSystem_privacy.bundle",
"${PODS_CONFIGURATION_BUILD_DIR}/RCT-Folly/RCT-Folly_privacy.bundle",
"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/React-Core_privacy.bundle",
"${PODS_CONFIGURATION_BUILD_DIR}/React-cxxreact/React-cxxreact_privacy.bundle",
"${PODS_CONFIGURATION_BUILD_DIR}/boost/boost_privacy.bundle",
"${PODS_CONFIGURATION_BUILD_DIR}/glog/glog_privacy.bundle",
);
name = "[CP] Copy Pods Resources";
outputPaths = (
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EXConstants.bundle",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoConstants_privacy.bundle",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoFileSystem_privacy.bundle",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RCT-Folly_privacy.bundle",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-Core_privacy.bundle",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-cxxreact_privacy.bundle",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/boost_privacy.bundle",
"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/glog_privacy.bundle",
);
runOnlyForDeploymentPostprocessing = 0;
shellPath = /bin/sh;
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-expoliquidglassexample/Pods-expoliquidglassexample-resources.sh\"\n";
showEnvVarsInLog = 0;
};
/* End PBXShellScriptBuildPhase section */
/* Begin PBXSourcesBuildPhase section */
13B07F871A680F5B00A75B9A /* Sources */ = {
isa = PBXSourcesBuildPhase;
buildActionMask = 2147483647;
files = (
F11748422D0307B40044C1D9 /* AppDelegate.swift in Sources */,
6A9133C881153F765327B585 /* ExpoModulesProvider.swift in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
/* End PBXSourcesBuildPhase section */
/* Begin XCBuildConfiguration section */
13B07F941A680F5B00A75B9A /* Debug */ = {
isa = XCBuildConfiguration;
baseConfigurationReference = BFB54A0A553C92C1BA2AEA9B /* Pods-expoliquidglassexample.debug.xcconfig */;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
CLANG_ENABLE_MODULES = YES;
CODE_SIGN_ENTITLEMENTS = expoliquidglassexample/expoliquidglassexample.entitlements;
CURRENT_PROJECT_VERSION = 1;
ENABLE_BITCODE = NO;
GCC_PREPROCESSOR_DEFINITIONS = (
"$(inherited)",
"FB_SONARKIT_ENABLED=1",
);
INFOPLIST_FILE = expoliquidglassexample/Info.plist;
IPHONEOS_DEPLOYMENT_TARGET = 15.1;
LD_RUNPATH_SEARCH_PATHS = (
"$(inherited)",
"@executable_path/Frameworks",
);
MARKETING_VERSION = 1.0;
OTHER_LDFLAGS = (
"$(inherited)",
"-ObjC",
"-lc++",
);
OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG";
PRODUCT_BUNDLE_IDENTIFIER = expo.modules.liquidglass.example;
PRODUCT_NAME = expoliquidglassexample;
SWIFT_OBJC_BRIDGING_HEADER = "expoliquidglassexample/expoliquidglassexample-Bridging-Header.h";
SWIFT_OPTIMIZATION_LEVEL = "-Onone";
SWIFT_VERSION = 5.0;
TARGETED_DEVICE_FAMILY = "1,2";
VERSIONING_SYSTEM = "apple-generic";
};
name = Debug;
};
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
baseConfigurationReference = 94770A3A0E8E6E2756728920 /* Pods-expoliquidglassexample.release.xcconfig */;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
CLANG_ENABLE_MODULES = YES;
CODE_SIGN_ENTITLEMENTS = expoliquidglassexample/expoliquidglassexample.entitlements;
CURRENT_PROJECT_VERSION = 1;
INFOPLIST_FILE = expoliquidglassexample/Info.plist;
IPHONEOS_DEPLOYMENT_TARGET = 15.1;
LD_RUNPATH_SEARCH_PATHS = (
"$(inherited)",
"@executable_path/Frameworks",
);
MARKETING_VERSION = 1.0;
OTHER_LDFLAGS = (
"$(inherited)",
"-ObjC",
"-lc++",
);
OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
PRODUCT_BUNDLE_IDENTIFIER = expo.modules.liquidglass.example;
PRODUCT_NAME = expoliquidglassexample;
SWIFT_OBJC_BRIDGING_HEADER = "expoliquidglassexample/expoliquidglassexample-Bridging-Header.h";
SWIFT_VERSION = 5.0;
TARGETED_DEVICE_FAMILY = "1,2";
VERSIONING_SYSTEM = "apple-generic";
};
name = Release;
};
83CBBA201A601CBA00E9B192 /* Debug */ = {
isa = XCBuildConfiguration;
buildSettings = {
ALWAYS_SEARCH_USER_PATHS = NO;
CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES;
CLANG_CXX_LANGUAGE_STANDARD = "c++20";
CLANG_CXX_LIBRARY = "libc++";
CLANG_ENABLE_MODULES = YES;
CLANG_ENABLE_OBJC_ARC = YES;
CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
CLANG_WARN_BOOL_CONVERSION = YES;
CLANG_WARN_COMMA = YES;
CLANG_WARN_CONSTANT_CONVERSION = YES;
CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;
CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
CLANG_WARN_EMPTY_BODY = YES;
CLANG_WARN_ENUM_CONVERSION = YES;
CLANG_WARN_INFINITE_RECURSION = YES;
CLANG_WARN_INT_CONVERSION = YES;
CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;
CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
CLANG_WARN_STRICT_PROTOTYPES = YES;
CLANG_WARN_SUSPICIOUS_MOVE = YES;
CLANG_WARN_UNREACHABLE_CODE = YES;
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
COPY_PHASE_STRIP = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
ENABLE_TESTABILITY = YES;
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_DYNAMIC_NO_PIC = NO;
GCC_NO_COMMON_BLOCKS = YES;
GCC_OPTIMIZATION_LEVEL = 0;
GCC_PREPROCESSOR_DEFINITIONS = (
"DEBUG=1",
"$(inherited)",
);
GCC_SYMBOLS_PRIVATE_EXTERN = NO;
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
GCC_WARN_UNDECLARED_SELECTOR = YES;
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
GCC_WARN_UNUSED_FUNCTION = YES;
GCC_WARN_UNUSED_VARIABLE = YES;
IPHONEOS_DEPLOYMENT_TARGET = 15.1;
LD_RUNPATH_SEARCH_PATHS = (
/usr/lib/swift,
"$(inherited)",
);
LIBRARY_SEARCH_PATHS = "$(SDKROOT)/usr/lib/swift\"$(inherited)\"";
MTL_ENABLE_DEBUG_INFO = YES;
ONLY_ACTIVE_ARCH = YES;
OTHER_LDFLAGS = (
"$(inherited)",
" ",
);
REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
SDKROOT = iphoneos;
SWIFT_ACTIVE_COMPILATION_CONDITIONS = "$(inherited) DEBUG";
USE_HERMES = true;
};
name = Debug;
};
83CBBA211A601CBA00E9B192 /* Release */ = {
isa = XCBuildConfiguration;
buildSettings = {
ALWAYS_SEARCH_USER_PATHS = NO;
CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES;
CLANG_CXX_LANGUAGE_STANDARD = "c++20";
CLANG_CXX_LIBRARY = "libc++";
CLANG_ENABLE_MODULES = YES;
CLANG_ENABLE_OBJC_ARC = YES;
CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
CLANG_WARN_BOOL_CONVERSION = YES;
CLANG_WARN_COMMA = YES;
CLANG_WARN_CONSTANT_CONVERSION = YES;
CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;
CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
CLANG_WARN_EMPTY_BODY = YES;
CLANG_WARN_ENUM_CONVERSION = YES;
CLANG_WARN_INFINITE_RECURSION = YES;
CLANG_WARN_INT_CONVERSION = YES;
CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;
CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
CLANG_WARN_STRICT_PROTOTYPES = YES;
CLANG_WARN_SUSPICIOUS_MOVE = YES;
CLANG_WARN_UNREACHABLE_CODE = YES;
CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
COPY_PHASE_STRIP = YES;
ENABLE_NS_ASSERTIONS = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
GCC_C_LANGUAGE_STANDARD = gnu99;
GCC_NO_COMMON_BLOCKS = YES;
GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
GCC_WARN_UNDECLARED_SELECTOR = YES;
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
GCC_WARN_UNUSED_FUNCTION = YES;
GCC_WARN_UNUSED_VARIABLE = YES;
IPHONEOS_DEPLOYMENT_TARGET = 15.1;
LD_RUNPATH_SEARCH_PATHS = (
/usr/lib/swift,
"$(inherited)",
);
LIBRARY_SEARCH_PATHS = "$(SDKROOT)/usr/lib/swift\"$(inherited)\"";
MTL_ENABLE_DEBUG_INFO = NO;
OTHER_LDFLAGS = (
"$(inherited)",
" ",
);
REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
SDKROOT = iphoneos;
USE_HERMES = true;
VALIDATE_PRODUCT = YES;
};
name = Release;
};
/* End XCBuildConfiguration section */
/* Begin XCConfigurationList section */
13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "expoliquidglassexample" */ = {
isa = XCConfigurationList;
buildConfigurations = (
13B07F941A680F5B00A75B9A /* Debug */,
13B07F951A680F5B00A75B9A /* Release */,
);
defaultConfigurationIsVisible = 0;
defaultConfigurationName = Release;
};
83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "expoliquidglassexample" */ = {
isa = XCConfigurationList;
buildConfigurations = (
83CBBA201A601CBA00E9B192 /* Debug */,
83CBBA211A601CBA00E9B192 /* Release */,
);
defaultConfigurationIsVisible = 0;
defaultConfigurationName = Release;
};
/* End XCConfigurationList section */
};
rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */;
}
================================================
FILE: example/ios/expoliquidglassexample.xcodeproj/xcshareddata/xcschemes/expoliquidglassexample.xcscheme
================================================
================================================
FILE: example/ios/expoliquidglassexample.xcworkspace/contents.xcworkspacedata
================================================
================================================
FILE: example/metro.config.js
================================================
// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require('expo/metro-config');
const path = require('path');
const config = getDefaultConfig(__dirname);
// npm v7+ will install ../node_modules/react and ../node_modules/react-native because of peerDependencies.
// To prevent the incompatible react-native between ./node_modules/react-native and ../node_modules/react-native,
// excludes the one from the parent folder when bundling.
config.resolver.blockList = [
...Array.from(config.resolver.blockList ?? []),
new RegExp(path.resolve('..', 'node_modules', 'react')),
new RegExp(path.resolve('..', 'node_modules', 'react-native')),
];
config.resolver.nodeModulesPaths = [
path.resolve(__dirname, './node_modules'),
path.resolve(__dirname, '../node_modules'),
];
config.resolver.extraNodeModules = {
'expo-liquid-glass': '..',
};
config.watchFolders = [path.resolve(__dirname, '..')];
config.transformer.getTransformOptions = async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
});
module.exports = config;
================================================
FILE: example/package.json
================================================
{
"name": "expo-liquid-glass-example",
"version": "1.0.1",
"main": "index.ts",
"scripts": {
"start": "expo start",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web"
},
"dependencies": {
"@expo/ui": "0.1.1-alpha.10",
"@expo/vector-icons": "^14.1.0",
"expo": "~53.0.20",
"expo-linear-gradient": "^14.1.5",
"expo-symbols": "^0.4.5",
"react": "19.0.0",
"react-native": "0.79.5",
"react-native-animated-pagination-dots": "^0.1.73",
"react-native-video": "^6.16.1"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@types/react": "~19.0.10",
"typescript": "~5.8.3"
},
"private": true,
"expo": {
"autolinking": {
"nativeModulesDir": ".."
}
}
}
================================================
FILE: example/screens/ComplexVideo.tsx
================================================
import {
View,
Text,
StyleSheet,
ImageBackground,
ScrollView,
StatusBar,
TouchableOpacity,
Button,
Animated,
} from "react-native";
import React, { useState, useRef } from "react";
import {
CornerStyle,
ExpoLiquidGlassView,
LiquidGlassType,
} from "expo-liquid-glass-view";
import { SymbolView } from "expo-symbols";
import {
Ionicons,
MaterialCommunityIcons,
Feather,
AntDesign,
FontAwesome,
} from "@expo/vector-icons";
import * as constants from "../constants";
import Video from "react-native-video";
export default function App() {
const [showEye, setShowEye] = useState(true);
const [currentVideoIndex, setCurrentVideoIndex] = useState(0);
const [isTransitioning, setIsTransitioning] = useState(false);
const overlayOpacity = useRef(new Animated.Value(0)).current;
const videoSources = [
require("./video/liquid-background.mp4"),
require("./video/abstract.mp4"),
require("./video/sunny-beach.mp4"),
];
const handleVideoChange = () => {
if (isTransitioning) return;
setIsTransitioning(true);
Animated.sequence([
Animated.timing(overlayOpacity, {
toValue: 1,
duration: 300,
useNativeDriver: true,
}),
Animated.delay(50),
Animated.timing(overlayOpacity, {
toValue: 0,
duration: 300,
useNativeDriver: true,
}),
]).start(() => {
setIsTransitioning(false);
});
setTimeout(() => {
const nextIndex = (currentVideoIndex + 1) % videoSources.length;
setCurrentVideoIndex(nextIndex);
}, 350);
};
const onEyePress = () => {
setShowEye(!showEye);
};
return (
Good Evening
rit3zh
Pay
Transfer
Top Up
Analytics
Total Balance
{showEye ? "$12,547.85" : "**********"}
+2.5% from last month
Checking
$8,247.85
Savings
$4,300.00
My Cards
See All
2566 8478 8974 2135
FIDAN PARAJULLAYEVA
10/27
4521 •••• •••• 8901
BUSINESS CARD
08/26
This Month's Spending
$2,847.32
of $5,000 budget
Food
$847
Transport
$234
Shopping
$1,245
Entertainment
$521
Recent Transactions
Friends Cafe
182 9th Ave, New York
Today, 2:30 PM
-$64.00
House Rent
Monthly Payment
Dec 19, 9:00 AM
-$1,685.00
Salary Deposit
Monthly Salary
Dec 15, 8:00 AM
+$5,200.00
Savings Goals
Vacation Fund
Trip to Japan
68%
$3,400 of $5,000
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
scrollContainer: {
flexGrow: 1,
padding: 20,
paddingTop: 60,
paddingBottom: 40,
},
header: {
marginBottom: 25,
},
headerGlass: {
width: "100%",
height: 90,
},
headerContent: {
flex: 1,
padding: 20,
justifyContent: "center",
},
headerTop: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
profileSection: {
flexDirection: "row",
alignItems: "center",
},
profileAvatar: {
width: 50,
height: 50,
marginRight: 15,
},
avatarContent: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
greetingSection: {
flex: 1,
},
greeting: {
fontSize: 14,
color: "rgba(255, 255, 255, 0.7)",
marginBottom: 2,
},
userName: {
fontSize: 18,
fontWeight: "600",
color: "white",
},
notificationIcon: {
width: 40,
height: 40,
right: 40,
},
iconContent: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
notificationBadge: {
position: "absolute",
top: 8,
right: 8,
width: 8,
height: 8,
borderRadius: 4,
backgroundColor: "#FF6B6B",
},
quickActionsSection: {
marginBottom: 25,
},
quickActionsGrid: {
flexDirection: "row",
justifyContent: "space-between",
},
quickActionItem: {
flex: 1,
marginHorizontal: 5,
},
quickActionGlass: {
width: "100%",
height: 80,
},
quickActionContent: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
quickActionText: {
fontSize: 12,
color: "white",
marginTop: 8,
fontWeight: "500",
},
balanceSection: {
marginBottom: 25,
},
balanceOverviewGlass: {
width: "100%",
height: 200,
},
balanceOverviewContent: {
flex: 1,
padding: 25,
},
balanceHeader: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
marginBottom: 15,
},
balanceTitle: {
fontSize: 16,
color: "rgba(255, 255, 255, 0.8)",
},
totalBalance: {
fontSize: 36,
fontWeight: "bold",
color: "white",
marginBottom: 8,
},
balanceChange: {
flexDirection: "row",
alignItems: "center",
marginBottom: 20,
},
changeText: {
fontSize: 14,
color: "#4ECDC4",
marginLeft: 5,
},
balanceBreakdown: {
flexDirection: "row",
justifyContent: "space-between",
},
breakdownItem: {
flex: 1,
},
breakdownLabel: {
fontSize: 12,
color: "rgba(255, 255, 255, 0.6)",
marginBottom: 4,
},
breakdownAmount: {
fontSize: 16,
fontWeight: "600",
color: "white",
},
cardSection: {
marginBottom: 25,
},
sectionHeader: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
marginBottom: 15,
},
sectionTitle: {
fontSize: 22,
fontWeight: "bold",
color: "white",
marginBottom: 40,
},
seeAllText: {
fontSize: 14,
color: "#4ECDC4",
fontWeight: "500",
},
cardsScroll: {
flexDirection: "row",
},
creditCardGlass: {
width: 280,
height: 180,
marginRight: 15,
},
secondaryCard: {
backgroundColor: "rgba(0, 0, 0, 0.2)",
},
creditCardContent: {
flex: 1,
padding: 20,
justifyContent: "space-between",
},
cardHeader: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
cardChip: {
width: 40,
height: 32,
},
chipContent: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
visaText: {
fontSize: 18,
fontWeight: "bold",
color: "white",
fontStyle: "italic",
},
mastercardText: {
fontSize: 14,
fontWeight: "bold",
color: "white",
},
cardNumber: {
fontSize: 20,
fontWeight: "600",
color: "white",
letterSpacing: 2,
marginTop: 20,
},
cardHolder: {
fontSize: 12,
color: "rgba(255, 255, 255, 0.9)",
fontWeight: "500",
},
cardFooter: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
expiryDate: {
fontSize: 14,
color: "rgba(255, 255, 255, 0.9)",
},
contactlessIcon: {
width: 30,
height: 30,
},
contactlessContent: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
analyticsSection: {
marginBottom: 25,
},
analyticsGlass: {
width: "100%",
height: 240,
},
analyticsContent: {
flex: 1,
padding: 25,
},
spendingHeader: {
marginBottom: 15,
},
spentAmount: {
fontSize: 28,
fontWeight: "bold",
color: "white",
marginBottom: 5,
},
spentLabel: {
fontSize: 14,
color: "rgba(255, 255, 255, 0.7)",
},
progressBar: {
height: 8,
backgroundColor: "rgba(255, 255, 255, 0.2)",
borderRadius: 4,
marginBottom: 20,
overflow: "hidden",
},
progressFill: {
height: "100%",
width: "57%",
backgroundColor: "#4ECDC4",
borderRadius: 4,
},
categoriesGrid: {
flexDirection: "row",
justifyContent: "space-between",
},
categoryItem: {
alignItems: "center",
flex: 1,
},
categoryIcon: {
width: 30,
height: 30,
marginBottom: 8,
},
categoryIconContent: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
categoryLabel: {
fontSize: 12,
color: "rgba(255, 255, 255, 0.7)",
marginBottom: 4,
},
categoryAmount: {
fontSize: 14,
fontWeight: "600",
color: "white",
},
transactionsSection: {
marginBottom: 25,
gap: 12,
},
transactionGlass: {
width: "100%",
height: 85,
},
transactionContent: {
flex: 1,
flexDirection: "row",
alignItems: "center",
paddingHorizontal: 20,
},
transactionIcon: {
width: 44,
height: 44,
marginRight: 15,
},
transactionIconContent: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
transactionDetails: {
flex: 1,
},
transactionName: {
fontSize: 16,
fontWeight: "600",
color: "white",
marginBottom: 2,
},
transactionLocation: {
fontSize: 12,
color: "rgba(255, 255, 255, 0.6)",
marginBottom: 2,
},
transactionTime: {
fontSize: 12,
color: "rgba(255, 255, 255, 0.5)",
},
transactionRight: {
alignItems: "flex-end",
},
transactionAmount: {
fontSize: 16,
fontWeight: "bold",
color: "#FF6B6B",
marginBottom: 4,
},
transactionAmountLarge: {
fontSize: 16,
fontWeight: "bold",
color: "#FF6B6B",
marginBottom: 4,
},
transactionAmountPositive: {
fontSize: 16,
fontWeight: "bold",
color: "#A8E6CF",
marginBottom: 4,
},
goalsSection: {
marginBottom: 25,
},
goalGlass: {
width: "100%",
height: 170,
},
goalContent: {
flex: 1,
padding: 20,
},
goalHeader: {
flexDirection: "row",
alignItems: "center",
marginBottom: 15,
},
goalIcon: {
width: 40,
height: 40,
marginRight: 15,
},
goalIconContent: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
goalInfo: {
flex: 1,
},
goalTitle: {
fontSize: 16,
fontWeight: "600",
color: "white",
marginBottom: 2,
},
goalDescription: {
fontSize: 12,
color: "rgba(255, 255, 255, 0.6)",
},
goalPercentage: {
fontSize: 18,
fontWeight: "bold",
color: "#FFD93D",
},
goalProgress: {
gap: 8,
},
goalProgressBar: {
height: 8,
backgroundColor: "rgba(255, 255, 255, 0.2)",
borderRadius: 4,
overflow: "hidden",
},
goalProgressFill: {
height: "100%",
width: "68%",
backgroundColor: "#FFD93D",
borderRadius: 4,
},
goalAmount: {
fontSize: 14,
color: "rgba(255, 255, 255, 0.8)",
fontWeight: "500",
},
});
================================================
FILE: example/tsconfig.json
================================================
{
"extends": "expo/tsconfig.base",
"compilerOptions": {
"strict": true,
"paths": {
"expo-liquid-glass-view": ["../src/index"],
"expo-liquid-glass-view/*": ["../src/*"]
}
}
}
================================================
FILE: example/webpack.config.js
================================================
const createConfigAsync = require('@expo/webpack-config');
const path = require('path');
module.exports = async (env, argv) => {
const config = await createConfigAsync(
{
...env,
babel: {
dangerouslyAddModulePathsToTranspile: ['expo-liquid-glass'],
},
},
argv
);
config.resolve.modules = [
path.resolve(__dirname, './node_modules'),
path.resolve(__dirname, '../node_modules'),
];
return config;
};
================================================
FILE: expo-module.config.json
================================================
{
"platforms": ["apple"],
"apple": {
"modules": ["ExpoLiquidGlassModule"]
}
}
================================================
FILE: ios/ExpoLiquidGlass.podspec
================================================
require 'json'
package = JSON.parse(File.read(File.join(__dir__, '..', 'package.json')))
Pod::Spec.new do |s|
s.name = 'ExpoLiquidGlass'
s.version = package['version']
s.summary = package['description']
s.description = package['description']
s.license = package['license']
s.author = package['author']
s.homepage = package['homepage']
s.platforms = {
:ios => '15.1',
:tvos => '15.1'
}
s.swift_version = '5.4'
s.source = { git: 'https://github.com/rit3zh/expo-liquid-glass' }
s.static_framework = true
s.dependency 'ExpoModulesCore'
# Swift/Objective-C compatibility
s.pod_target_xcconfig = {
'DEFINES_MODULE' => 'YES',
}
s.source_files = "**/*.{h,m,mm,swift,hpp,cpp}"
end
================================================
FILE: ios/ExpoLiquidGlassContainer.swift
================================================
//
// ExpoLiquidGlassContainer.swift
// Pods
//
// Created by rit3zh CX on 9/19/25.
//
import ExpoModulesCore
import SwiftUI
class ExpoLiquidGlassContainerProps: ExpoSwiftUI.ViewProps {
@Field var spacing: CGFloat = 0
@Field var horizontal: Bool
}
struct ExpoLiquidGlassContainer: ExpoSwiftUI.View, ExpoSwiftUI.WithHostingView {
@ObservedObject var props: ExpoLiquidGlassContainerProps
var body: some View {
if #available(iOS 26.0, *) {
GlassEffectContainer(spacing: props.spacing) {
if props.horizontal {
HStack(spacing: props.spacing){
Children()
}
} else {
VStack(spacing: props.spacing){
Children()
}
}
}
} else {
Children()
}
}
}
================================================
FILE: ios/ExpoLiquidGlassModule.swift
================================================
import ExpoModulesCore
public class ExpoLiquidGlassModule: Module {
public func definition() -> ModuleDefinition {
Name("ExpoLiquidGlass")
View(ExpoLiquidGlassView.self)
View(ExpoLiquidGlassContainer.self)
}
}
================================================
FILE: ios/ExpoLiquidGlassView.swift
================================================
import ExpoModulesCore
import SwiftUI
class ExpoLiquidGlassViewProps: ExpoSwiftUI.ViewProps {
@Field var cornerRadius: CGFloat = 5
@Field var type: String
@Field var cornerStyle: String
@Field var tint: String
@Field var isInteractive: Bool
}
struct ExpoLiquidGlassView: ExpoSwiftUI.View, ExpoSwiftUI.WithHostingView {
@ObservedObject var props: ExpoLiquidGlassViewProps
var body: some View {
if #available(iOS 26.0, *) {
if hasChildren {
Children()
.glassEffect(
getGlassEffect(
from: props.type,
color: props.tint,
interactive: props.isInteractive
),
in: .rect(
cornerRadius: props.cornerRadius,
style: getCornerRadiusStyle(from: props.cornerStyle)
)
)
} else {
RoundedRectangle(
cornerRadius: props.cornerRadius,
style: getCornerRadiusStyle(from: props.cornerStyle)
)
.fill(Color.clear)
.frame(width: 100, height: 100)
.glassEffect(
getGlassEffect(
from: props.type,
color: props.tint,
interactive: props.isInteractive
),
in: .rect(
cornerRadius: props.cornerRadius,
style: getCornerRadiusStyle(from: props.cornerStyle)
)
)
}
} else {
if hasChildren {
Children()
} else {
RoundedRectangle(
cornerRadius: props.cornerRadius,
style: getCornerRadiusStyle(from: props.cornerStyle)
)
.fill(Color.clear)
.frame(width: 100, height: 100)
}
}
}
private var hasChildren: Bool {
!(Children().data.isEmpty)
}
}
private func getCornerRadiusStyle(from style: String) -> RoundedCornerStyle {
switch style.lowercased() {
case "continuous":
return .continuous
case "circular":
return .circular
default:
return .continuous
}
}
@available(iOS 26.0, *)
private func getGlassEffect(from type: String, color: String, interactive: Bool) -> Glass {
var glass: Glass
switch type.lowercased() {
case "clear":
glass = .clear
case "identity":
glass = .identity
case "regular":
glass = .regular
case "tint":
glass = .regular.tint(Color(hex: color))
default:
glass = .clear
}
if interactive {
return glass.interactive()
}
return glass
}
extension Color {
init(hex: String) {
let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
var int: UInt64 = 0
Scanner(string: hex).scanHexInt64(&int)
let a, r, g, b: UInt64
switch hex.count {
case 3:
(a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17)
case 6:
(a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF)
case 8:
(a, r, g, b) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
default:
(a, r, g, b) = (1, 1, 1, 0)
}
self.init(
.sRGB,
red: Double(r) / 255,
green: Double(g) / 255,
blue: Double(b) / 255,
opacity: Double(a) / 255
)
}
}
================================================
FILE: package.json
================================================
{
"name": "expo-liquid-glass-view",
"version": "0.1.10",
"description": " 🚀 Native liquid glass 🧊 views for Expo. Powered by SwiftUI + expo-modules-core ",
"main": "build/index.js",
"types": "build/index.d.ts",
"scripts": {
"build": "expo-module build",
"clean": "expo-module clean",
"lint": "expo-module lint",
"test": "expo-module test",
"prepare": "expo-module prepare",
"release": "standard-version",
"prepublishOnly": "expo-module prepublishOnly",
"expo-module": "expo-module",
"open:ios": "xed example/ios",
"open:android": "open -a \"Android Studio\" example/android"
},
"keywords": [
"react-native",
"expo",
"expo-liquid-glass",
"ExpoLiquidGlass"
],
"repository": "https://github.com/rit3zh/expo-liquid-glass-view",
"bugs": {
"url": "https://github.com/rit3zh/expo-liquid-glass-view/issues"
},
"author": "Ritesh. <119659853+rit3zh@users.noreply.github.com> (https://github.com/rit3zh)",
"license": "MIT",
"homepage": "https://github.com/rit3zh/expo-liquid-glass-view#readme",
"devDependencies": {
"@types/react": "~19.0.0",
"expo": "~53.0.0",
"expo-module-scripts": "^4.1.9",
"react-native": "0.79.1",
"standard-version": "^9.5.0"
},
"peerDependencies": {
"expo": "*",
"react": "*",
"react-native": "*"
}
}
================================================
FILE: src/ExpoLiquidGlassContainer.tsx
================================================
import { requireNativeView } from "expo";
import * as React from "react";
import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
interface ExpoLiquidGlassContainerProps {
morph?: number;
style?: StyleProp;
children?: React.ReactNode;
}
const NativeView: React.ComponentType = requireNativeView(
"ExpoLiquidGlass",
"ExpoLiquidGlassContainer"
);
export function ExpoLiquidGlassContainer(props: ExpoLiquidGlassContainerProps) {
return (
{props.children}
);
}
const styles = StyleSheet.create({
wrapper: {
// alignSelf: "flex-start",
},
container: {
alignSelf: "flex-start",
flexShrink: 1,
},
});
================================================
FILE: src/ExpoLiquidGlassView.tsx
================================================
import { requireNativeView } from "expo";
import * as React from "react";
import { StyleSheet, View } from "react-native";
import type { ExpoLiquidGlassViewProps } from "./ExpoLiquidGlassView.types";
const NativeView: React.ComponentType =
requireNativeView(
"ExpoLiquidGlass",
"ExpoLiquidGlassView"
);
export function ExpoLiquidGlassView(props: ExpoLiquidGlassViewProps) {
const { children, containerStyle, style, ...nativeProps } = props;
return (
{children ? (
{children}
) : null}
);
}
const styles = StyleSheet.create({
wrapper: {
alignSelf: "flex-start",
},
container: {
alignSelf: "flex-start",
flexShrink: 1,
},
});
================================================
FILE: src/ExpoLiquidGlassView.types.ts
================================================
import * as React from "react";
import type { StyleProp, ViewStyle } from "react-native";
export enum CornerStyle {
Continuous = "continuous",
Circular = "circular",
}
export enum LiquidGlassType {
Clear = "clear",
Tint = "tint",
Regular = "regular",
Interactive = "interactive",
Identity = "identity",
}
export interface ExpoLiquidGlassViewProps {
type?: LiquidGlassType;
tint?: string;
cornerRadius?: number;
isInteractive?: boolean;
cornerStyle?: CornerStyle;
style?: StyleProp;
containerStyle?: StyleProp;
children?: React.ReactNode;
}
================================================
FILE: src/index.ts
================================================
export * from "./ExpoLiquidGlassView";
export * from "./ExpoLiquidGlassContainer";
export { CornerStyle, LiquidGlassType } from "./ExpoLiquidGlassView.types";
================================================
FILE: tsconfig.json
================================================
// @generated by expo-module-scripts
{
"extends": "expo-module-scripts/tsconfig.base",
"compilerOptions": {
"outDir": "./build"
},
"include": ["./src"],
"exclude": ["**/__mocks__/*", "**/__tests__/*", "**/__rsc_tests__/*"]
}