native-view-ios-26 1.0.0

package/README.md

@@ -0,0 +1,350 @@
+# native-view-ios-26
+
+Native iOS Safe Area module for React Native với Swift bridge. Thư viện này cung cấp 2 native components với blur effect dưới status bar và API để truy xuất thông tin safe area insets.
+
+## Tính năng
+
+- ✅ `<NativeSafeAreaView>` - Native view với safe area và blur effect
+- ✅ `<NativeSafeAreaScrollView>` - Native scroll view với safe area và blur effect
+- ✅ Blur effect tự động dưới status bar (systemMaterial blur)
+- ✅ Lấy safe area insets hiện tại (top, bottom, left, right)
+- ✅ Lắng nghe thay đổi safe area khi xoay màn hình
+- ✅ Hỗ trợ iOS 13+ và iOS 26
+- ✅ Viết bằng Swift với hiệu suất cao
+- ✅ TypeScript support đầy đủ
+
+## Cài đặt
+
+```bash
+npm install native-view-ios-26
+# hoặc
+yarn add native-view-ios-26
+```
+
+### iOS
+
+Sau khi cài đặt, chạy lệnh sau để cài đặt CocoaPods dependencies:
+
+```bash
+cd ios && pod install && cd ..
+```
+
+## Sử dụng
+
+### 1. Native Components với Blur Effect
+
+#### NativeSafeAreaView
+
+Component view cơ bản với safe area insets và blur effect dưới status bar:
+
+```javascript
+import { NativeSafeAreaView } from 'native-view-ios-26';
+
+function App() {
+  return (
+    <NativeSafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>
+      <Text>Nội dung tự động có padding safe area</Text>
+      <Text>Blur effect xuất hiện dưới status bar</Text>
+    </NativeSafeAreaView>
+  );
+}
+```
+
+**Props:**
+- `showBlur?: boolean` - Hiển thị blur effect (mặc định: `true`)
+- `style?: ViewStyle` - Style cho view
+
+#### NativeSafeAreaScrollView
+
+Component scroll view với safe area insets và blur effect dưới status bar:
+
+```javascript
+import { NativeSafeAreaScrollView } from 'native-view-ios-26';
+
+function App() {
+  return (
+    <NativeSafeAreaScrollView 
+      style={{ flex: 1 }}
+      showBlur={true}
+      showsVerticalScrollIndicator={true}
+    >
+      <Text>Nội dung có thể scroll</Text>
+      <Text>Blur effect luôn cố định dưới status bar</Text>
+      {/* More content... */}
+    </NativeSafeAreaScrollView>
+  );
+}
+```
+
+**Props:**
+- `showBlur?: boolean` - Hiển thị blur effect (mặc định: `true`)
+- `scrollEnabled?: boolean` - Cho phép scroll (mặc định: `true`)
+- `showsVerticalScrollIndicator?: boolean` - Hiển thị thanh scroll dọc (mặc định: `true`)
+- `showsHorizontalScrollIndicator?: boolean` - Hiển thị thanh scroll ngang (mặc định: `false`)
+- `style?: ViewStyle` - Style cho scroll view
+
+### 2. Tắt Blur Effect
+
+```javascript
+// Không hiển thị blur effect
+<NativeSafeAreaView showBlur={false}>
+  <Text>Không có blur effect</Text>
+</NativeSafeAreaView>
+
+<NativeSafeAreaScrollView showBlur={false}>
+  <Text>Scroll view không có blur effect</Text>
+</NativeSafeAreaScrollView>
+```
+
+### 3. Lấy Safe Area Insets programmatically
+
+### 3. Lấy Safe Area Insets programmatically
+
+```javascript
+import NativeViewIOS26 from 'native-view-ios-26';
+
+// Lấy safe area insets
+const insets = await NativeViewIOS26.getSafeAreaInsets();
+console.log('Safe Area Insets:', insets);
+// Output: { top: 47, bottom: 34, left: 0, right: 0 }
+```
+
+### 4. Lắng nghe thay đổi Safe Area
+
+```javascript
+import { useEffect, useState } from 'react';
+import NativeViewIOS26 from 'native-view-ios-26';
+
+function App() {
+  const [insets, setInsets] = useState({ top: 0, bottom: 0, left: 0, right: 0 });
+
+  useEffect(() => {
+    // Lấy giá trị ban đầu
+    NativeViewIOS26.getSafeAreaInsets().then(setInsets);
+
+    // Đăng ký listener
+    const subscription = NativeViewIOS26.addSafeAreaListener((newInsets) => {
+      console.log('Safe area changed:', newInsets);
+      setInsets(newInsets);
+    });
+
+    // Cleanup
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  return (
+    <View style={{ 
+      paddingTop: insets.top,
+      paddingBottom: insets.bottom,
+      paddingLeft: insets.left,
+      paddingRight: insets.right 
+    }}>
+      <Text>Top: {insets.top}</Text>
+      <Text>Bottom: {insets.bottom}</Text>
+      <Text>Left: {insets.left}</Text>
+      <Text>Right: {insets.right}</Text>
+    </View>
+  );
+}
+```
+
+## API Reference
+
+### Components
+
+#### `<NativeSafeAreaView>`
+
+Native view component với automatic safe area insets và blur effect.
+
+**Props:**
+```typescript
+interface NativeSafeAreaViewProps {
+  showBlur?: boolean;        // Default: true
+  style?: ViewStyle;
+  children?: React.ReactNode;
+}
+```
+
+#### `<NativeSafeAreaScrollView>`
+
+Native scroll view component với automatic safe area insets và blur effect.
+
+**Props:**
+```typescript
+interface NativeSafeAreaScrollViewProps {
+  showBlur?: boolean;                      // Default: true
+  scrollEnabled?: boolean;                  // Default: true
+  showsVerticalScrollIndicator?: boolean;   // Default: true
+  showsHorizontalScrollIndicator?: boolean; // Default: false
+  style?: ViewStyle;
+  children?: React.ReactNode;
+}
+```
+
+### Methods
+
+### `getSafeAreaInsets()`
+
+Trả về Promise với safe area insets hiện tại.
+
+**Returns:**
+```typescript
+Promise<{
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}>
+```
+
+### `addSafeAreaListener(callback)`
+
+Đăng ký listener để nhận thông báo khi safe area thay đổi (ví dụ: khi xoay màn hình).
+
+**Parameters:**
+- `callback: (insets: SafeAreaInsets) => void` - Hàm được gọi khi safe area thay đổi
+
+**Returns:**
+```typescript
+{
+  remove: () => void;
+}
+```
+
+## Yêu cầu hệ thống
+
+- React Native >= 0.60
+- iOS >= 13.0
+- Swift 5.0+
+
+## Lưu ý
+
+- Thư viện này chỉ hoạt động trên iOS
+- Blur effect sử dụng `UIVisualEffectView` với style `systemMaterial`
+- Blur effect tự động điều chỉnh theo Dark Mode / Light Mode của hệ thống
+- Safe area insets có thể thay đổi khi:
+  - Xoay màn hình
+  - Hiển thị/ẩn thanh trạng thái
+  - Thay đổi layout của ứng dụng
+- `NativeSafeAreaScrollView` tự động set content insets phù hợp với safe area
+
+## So sánh với SafeAreaView mặc định
+
+| Feature | React Native SafeAreaView | NativeSafeAreaView | NativeSafeAreaScrollView |
+|---------|--------------------------|-------------------|-------------------------|
+| Safe Area Padding | ✅ | ✅ | ✅ |
+| Blur Effect dưới Status Bar | ❌ | ✅ | ✅ |
+| Hoạt động trong ScrollView | ❌ (bị lỗi trên iOS 26) | ✅ | ✅ (built-in scroll) |
+| Auto Content Inset | ❌ | N/A | ✅ |
+| Native Performance | ❌ (JS) | ✅ (Swift) | ✅ (Swift) |
+
+## Ví dụ thực tế
+
+### Màn hình với Header và Content
+
+```javascript
+import { NativeSafeAreaView } from 'native-view-ios-26';
+import { View, Text, StyleSheet } from 'react-native';
+
+function HomeScreen() {
+  return (
+    <NativeSafeAreaView style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.title}>My App</Text>
+      </View>
+      <View style={styles.content}>
+        <Text>Main content here</Text>
+      </View>
+    </NativeSafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  header: {
+    padding: 16,
+    backgroundColor: '#f0f0f0',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+  },
+  content: {
+    flex: 1,
+    padding: 16,
+  },
+});
+```
+
+### Scroll View với nhiều nội dung
+
+```javascript
+import { NativeSafeAreaScrollView } from 'native-view-ios-26';
+import { View, Text, Image, StyleSheet } from 'react-native';
+
+function ArticleScreen() {
+  return (
+    <NativeSafeAreaScrollView 
+      style={styles.container}
+      showBlur={true}
+      showsVerticalScrollIndicator={true}
+    >
+      <Image source={{ uri: 'https://...' }} style={styles.image} />
+      <View style={styles.content}>
+        <Text style={styles.title}>Article Title</Text>
+        <Text style={styles.body}>
+          Long article content that scrolls...
+        </Text>
+      </View>
+    </NativeSafeAreaScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  image: {
+    width: '100%',
+    height: 300,
+  },
+  content: {
+    padding: 16,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    marginBottom: 16,
+  },
+  body: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+});
+```
+
+## Lưu ý
+
+- Thư viện này chỉ hoạt động trên iOS
+- Safe area insets có thể thay đổi khi:
+  - Xoay màn hình
+  - Hiển thị/ẩn thanh trạng thái
+  - Thay đổi layout của ứng dụng
+
+## License
+
+MIT
+
+## Tác giả
+
+Jason Phan
+
+## Đóng góp
+
+Mọi đóng góp đều được chào đón! Vui lòng tạo pull request hoặc issue trên GitHub.

package/components.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { requireNativeComponent, ViewProps, ViewStyle } from 'react-native';
+
+// Native View Component
+interface NativeSafeAreaViewProps extends ViewProps {
+  showBlur?: boolean;
+  style?: ViewStyle;
+}
+
+const RNNativeSafeAreaView = requireNativeComponent<NativeSafeAreaViewProps>('NativeSafeAreaView');
+
+export const NativeSafeAreaView: React.FC<NativeSafeAreaViewProps> = ({ 
+  showBlur = true,
+  children,
+  style,
+  ...props
+}) => {
+  return (
+    <RNNativeSafeAreaView showBlur={showBlur} style={style} {...props}>
+      {children}
+    </RNNativeSafeAreaView>
+  );
+};
+
+// Native ScrollView Component
+interface NativeSafeAreaScrollViewProps extends ViewProps {
+  showBlur?: boolean;
+  scrollEnabled?: boolean;
+  showsVerticalScrollIndicator?: boolean;
+  showsHorizontalScrollIndicator?: boolean;
+  style?: ViewStyle;
+}
+
+const RNNativeSafeAreaScrollView = requireNativeComponent<NativeSafeAreaScrollViewProps>('NativeSafeAreaScrollView');
+
+export const NativeSafeAreaScrollView: React.FC<NativeSafeAreaScrollViewProps> = ({ 
+  showBlur = true,
+  scrollEnabled = true,
+  showsVerticalScrollIndicator = true,
+  showsHorizontalScrollIndicator = false,
+  children,
+  style,
+  ...props
+}) => {
+  return (
+    <RNNativeSafeAreaScrollView 
+      showBlur={showBlur}
+      scrollEnabled={scrollEnabled}
+      showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+      showsHorizontalScrollIndicator={showsHorizontalScrollIndicator}
+      style={style}
+      {...props}
+    >
+      {children}
+    </RNNativeSafeAreaScrollView>
+  );
+};

package/index.d.ts

@@ -0,0 +1,70 @@
+import { ComponentType } from 'react';
+import { ViewProps, ViewStyle } from 'react-native';
+
+export interface SafeAreaInsets {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}
+
+export interface NativeViewIOS26 {
+  /**
+   * Get the current safe area insets for the main window
+   * @returns Promise resolving to safe area insets
+   */
+  getSafeAreaInsets(): Promise<SafeAreaInsets>;
+  
+  /**
+   * Add listener for safe area changes
+   * @param callback Function to call when safe area changes
+   * @returns Subscription object with remove method
+   */
+  addSafeAreaListener(callback: (insets: SafeAreaInsets) => void): {
+    remove: () => void;
+  };
+}
+
+declare const NativeViewIOS26: NativeViewIOS26;
+
+export default NativeViewIOS26;
+
+// Native Components
+export interface NativeSafeAreaViewProps extends ViewProps {
+  /**
+   * Whether to show blur effect under status bar
+   * @default true
+   */
+  showBlur?: boolean;
+  style?: ViewStyle;
+  children?: React.ReactNode;
+}
+
+export interface NativeSafeAreaScrollViewProps extends ViewProps {
+  /**
+   * Whether to show blur effect under status bar
+   * @default true
+   */
+  showBlur?: boolean;
+  /**
+   * Whether scrolling is enabled
+   * @default true
+   */
+  scrollEnabled?: boolean;
+  /**
+   * Whether to show vertical scroll indicator
+   * @default true
+   */
+  showsVerticalScrollIndicator?: boolean;
+  /**
+   * Whether to show horizontal scroll indicator
+   * @default false
+   */
+  showsHorizontalScrollIndicator?: boolean;
+  style?: ViewStyle;
+  children?: React.ReactNode;
+}
+
+export const NativeSafeAreaView: ComponentType<NativeSafeAreaViewProps>;
+export const NativeSafeAreaScrollView: ComponentType<NativeSafeAreaScrollViewProps>;
+

package/index.js

@@ -0,0 +1,53 @@
+import { NativeModules, NativeEventEmitter } from 'react-native';
+
+const LINKING_ERROR =
+  `The package 'native-view-ios-26' doesn't seem to be linked. Make sure: \n\n` +
+  '- You rebuilt the app after installing the package\n' +
+  '- You are not using Expo Go\n' +
+  '- If you are using Pods, run `pod install` in the ios folder\n';
+
+const NativeViewIOS26Module = NativeModules.NativeViewIOS26
+  ? NativeModules.NativeViewIOS26
+  : new Proxy(
+      {},
+      {
+        get() {
+          throw new Error(LINKING_ERROR);
+        },
+      }
+    );
+
+const eventEmitter = new NativeEventEmitter(NativeViewIOS26Module);
+
+const NativeViewIOS26 = {
+  /**
+   * Get the current safe area insets for the main window
+   * @returns Promise resolving to safe area insets
+   */
+  getSafeAreaInsets() {
+    return NativeViewIOS26Module.getSafeAreaInsets();
+  },
+
+  /**
+   * Add listener for safe area changes
+   * @param callback Function to call when safe area changes
+   * @returns Subscription object with remove method
+   */
+  addSafeAreaListener(callback) {
+    const subscription = eventEmitter.addListener(
+      'onSafeAreaInsetsChange',
+      callback
+    );
+    
+    return {
+      remove: () => {
+        subscription.remove();
+      },
+    };
+  },
+};
+
+export default NativeViewIOS26;
+
+// Export components
+export { NativeSafeAreaView, NativeSafeAreaScrollView } from './components.ts';

package/ios/NativeSafeAreaScrollView.swift

@@ -0,0 +1,150 @@
+import Foundation
+import UIKit
+
+@available(iOS 13.0, *)
+class NativeSafeAreaScrollView: UIScrollView {
+    
+    private var blurEffectView: UIVisualEffectView?
+    private var showBlur: Bool = true
+    private var topBlurHeightConstraint: NSLayoutConstraint?
+    
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        setupView()
+    }
+    
+    required init?(coder: NSCoder) {
+        super.init(coder: coder)
+        setupView()
+    }
+    
+    private func setupView() {
+        backgroundColor = .clear
+        
+        // Enable automatic content inset adjustment
+        if #available(iOS 11.0, *) {
+            contentInsetAdjustmentBehavior = .never
+        }
+        
+        // Set up content insets for safe area
+        updateContentInsets()
+        setupBlurEffect()
+        
+        // Listen for safe area changes
+        NotificationCenter.default.addObserver(
+            self,
+            selector: #selector(updateInsets),
+            name: UIDevice.orientationDidChangeNotification,
+            object: nil
+        )
+    }
+    
+    private func setupBlurEffect() {
+        guard showBlur else { return }
+        
+        // Create blur effect for status bar area
+        let blurEffect = UIBlurEffect(style: .systemMaterial)
+        let blurView = UIVisualEffectView(effect: blurEffect)
+        blurView.translatesAutoresizingMaskIntoConstraints = false
+        blurView.alpha = 0.95
+        blurView.isUserInteractionEnabled = false
+        
+        // Add blur to the scroll view's parent or self
+        if let superview = self.superview {
+            superview.insertSubview(blurView, aboveSubview: self)
+            
+            topBlurHeightConstraint = blurView.heightAnchor.constraint(equalToConstant: safeAreaInsets.top)
+            
+            NSLayoutConstraint.activate([
+                blurView.topAnchor.constraint(equalTo: superview.topAnchor),
+                blurView.leadingAnchor.constraint(equalTo: superview.leadingAnchor),
+                blurView.trailingAnchor.constraint(equalTo: superview.trailingAnchor),
+                topBlurHeightConstraint!
+            ])
+        } else {
+            // Fallback: add as subview
+            addSubview(blurView)
+            
+            topBlurHeightConstraint = blurView.heightAnchor.constraint(equalToConstant: safeAreaInsets.top)
+            
+            NSLayoutConstraint.activate([
+                blurView.topAnchor.constraint(equalTo: topAnchor),
+                blurView.leadingAnchor.constraint(equalTo: leadingAnchor),
+                blurView.trailingAnchor.constraint(equalTo: trailingAnchor),
+                topBlurHeightConstraint!
+            ])
+        }
+        
+        blurEffectView = blurView
+    }
+    
+    override func didMoveToSuperview() {
+        super.didMoveToSuperview()
+        
+        // Re-setup blur if needed when added to view hierarchy
+        if superview != nil && showBlur && blurEffectView?.superview == nil {
+            blurEffectView?.removeFromSuperview()
+            blurEffectView = nil
+            setupBlurEffect()
+        }
+    }
+    
+    private func updateContentInsets() {
+        if #available(iOS 11.0, *) {
+            let insets = safeAreaInsets
+            contentInset = UIEdgeInsets(
+                top: insets.top,
+                left: insets.left,
+                bottom: insets.bottom,
+                right: insets.right
+            )
+            scrollIndicatorInsets = contentInset
+        }
+    }
+    
+    @objc private func updateInsets() {
+        updateContentInsets()
+        
+        // Update blur effect height
+        if let constraint = topBlurHeightConstraint {
+            constraint.constant = safeAreaInsets.top
+        }
+        
+        setNeedsLayout()
+        layoutIfNeeded()
+    }
+    
+    override func safeAreaInsetsDidChange() {
+        super.safeAreaInsetsDidChange()
+        updateInsets()
+    }
+    
+    func setShowBlur(_ show: Bool) {
+        guard showBlur != show else { return }
+        showBlur = show
+        
+        if show {
+            setupBlurEffect()
+        } else {
+            blurEffectView?.removeFromSuperview()
+            blurEffectView = nil
+            topBlurHeightConstraint = nil
+        }
+    }
+    
+    func setScrollEnabled(_ enabled: Bool) {
+        isScrollEnabled = enabled
+    }
+    
+    func setShowsVerticalScrollIndicator(_ shows: Bool) {
+        showsVerticalScrollIndicator = shows
+    }
+    
+    func setShowsHorizontalScrollIndicator(_ shows: Bool) {
+        showsHorizontalScrollIndicator = shows
+    }
+    
+    deinit {
+        NotificationCenter.default.removeObserver(self)
+    }
+}

package/ios/NativeSafeAreaScrollViewManager.swift

@@ -0,0 +1,31 @@
+import Foundation
+import UIKit
+import React
+
+@objc(NativeSafeAreaScrollViewManager)
+class NativeSafeAreaScrollViewManager: RCTViewManager {
+    
+    override func view() -> UIView! {
+        return NativeSafeAreaScrollView()
+    }
+    
+    override static func requiresMainQueueSetup() -> Bool {
+        return true
+    }
+    
+    @objc func setShowBlur(_ view: NativeSafeAreaScrollView, showBlur: Bool) {
+        view.setShowBlur(showBlur)
+    }
+    
+    @objc func setScrollEnabled(_ view: NativeSafeAreaScrollView, scrollEnabled: Bool) {
+        view.setScrollEnabled(scrollEnabled)
+    }
+    
+    @objc func setShowsVerticalScrollIndicator(_ view: NativeSafeAreaScrollView, shows: Bool) {
+        view.setShowsVerticalScrollIndicator(shows)
+    }
+    
+    @objc func setShowsHorizontalScrollIndicator(_ view: NativeSafeAreaScrollView, shows: Bool) {
+        view.setShowsHorizontalScrollIndicator(shows)
+    }
+}

package/ios/NativeSafeAreaView.swift

@@ -0,0 +1,117 @@
+import Foundation
+import UIKit
+
+@available(iOS 13.0, *)
+class NativeSafeAreaView: UIView {
+    
+    private var blurEffectView: UIVisualEffectView?
+    private var contentView: UIView!
+    private var showBlur: Bool = true
+    
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        setupView()
+    }
+    
+    required init?(coder: NSCoder) {
+        super.init(coder: coder)
+        setupView()
+    }
+    
+    private func setupView() {
+        backgroundColor = .clear
+        
+        // Create content view
+        contentView = UIView()
+        contentView.backgroundColor = .clear
+        contentView.translatesAutoresizingMaskIntoConstraints = false
+        addSubview(contentView)
+        
+        setupBlurEffect()
+        updateConstraints()
+        
+        // Listen for safe area changes
+        if #available(iOS 11.0, *) {
+            NotificationCenter.default.addObserver(
+                self,
+                selector: #selector(updateInsets),
+                name: UIDevice.orientationDidChangeNotification,
+                object: nil
+            )
+        }
+    }
+    
+    private func setupBlurEffect() {
+        guard showBlur else { return }
+        
+        // Create blur effect for status bar area
+        let blurEffect = UIBlurEffect(style: .systemMaterial)
+        let blurView = UIVisualEffectView(effect: blurEffect)
+        blurView.translatesAutoresizingMaskIntoConstraints = false
+        blurView.alpha = 0.95
+        
+        insertSubview(blurView, at: 0)
+        blurEffectView = blurView
+        
+        // Pin blur to top
+        NSLayoutConstraint.activate([
+            blurView.topAnchor.constraint(equalTo: topAnchor),
+            blurView.leadingAnchor.constraint(equalTo: leadingAnchor),
+            blurView.trailingAnchor.constraint(equalTo: trailingAnchor),
+            blurView.heightAnchor.constraint(equalToConstant: safeAreaInsets.top)
+        ])
+    }
+    
+    private func updateConstraints() {
+        NSLayoutConstraint.activate([
+            contentView.topAnchor.constraint(equalTo: safeAreaLayoutGuide.topAnchor),
+            contentView.leadingAnchor.constraint(equalTo: safeAreaLayoutGuide.leadingAnchor),
+            contentView.trailingAnchor.constraint(equalTo: safeAreaLayoutGuide.trailingAnchor),
+            contentView.bottomAnchor.constraint(equalTo: safeAreaLayoutGuide.bottomAnchor)
+        ])
+    }
+    
+    @objc private func updateInsets() {
+        setNeedsLayout()
+        layoutIfNeeded()
+        
+        // Update blur effect height
+        if let blurView = blurEffectView {
+            blurView.constraints.forEach { constraint in
+                if constraint.firstAttribute == .height {
+                    constraint.constant = safeAreaInsets.top
+                }
+            }
+        }
+    }
+    
+    override func safeAreaInsetsDidChange() {
+        super.safeAreaInsetsDidChange()
+        updateInsets()
+    }
+    
+    func setShowBlur(_ show: Bool) {
+        guard showBlur != show else { return }
+        showBlur = show
+        
+        if show {
+            setupBlurEffect()
+        } else {
+            blurEffectView?.removeFromSuperview()
+            blurEffectView = nil
+        }
+    }
+    
+    // Override to add subviews to contentView instead
+    override func insertReactSubview(_ subview: UIView!, at atIndex: Int) {
+        contentView.insertSubview(subview, at: atIndex)
+    }
+    
+    override func removeReactSubview(_ subview: UIView!) {
+        subview.removeFromSuperview()
+    }
+    
+    deinit {
+        NotificationCenter.default.removeObserver(self)
+    }
+}

package/ios/NativeSafeAreaViewManager.m

@@ -0,0 +1,16 @@
+#import <React/RCTViewManager.h>
+
+@interface RCT_EXTERN_MODULE(NativeSafeAreaViewManager, RCTViewManager)
+
+RCT_EXPORT_VIEW_PROPERTY(showBlur, BOOL)
+
+@end
+
+@interface RCT_EXTERN_MODULE(NativeSafeAreaScrollViewManager, RCTViewManager)
+
+RCT_EXPORT_VIEW_PROPERTY(showBlur, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(scrollEnabled, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(showsVerticalScrollIndicator, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(showsHorizontalScrollIndicator, BOOL)
+
+@end

package/ios/NativeSafeAreaViewManager.swift

@@ -0,0 +1,19 @@
+import Foundation
+import UIKit
+import React
+
+@objc(NativeSafeAreaViewManager)
+class NativeSafeAreaViewManager: RCTViewManager {
+    
+    override func view() -> UIView! {
+        return NativeSafeAreaView()
+    }
+    
+    override static func requiresMainQueueSetup() -> Bool {
+        return true
+    }
+    
+    @objc func setShowBlur(_ view: NativeSafeAreaView, showBlur: Bool) {
+        view.setShowBlur(showBlur)
+    }
+}

package/ios/NativeViewIOS26.m

@@ -0,0 +1,14 @@
+#import <React/RCTBridgeModule.h>
+#import <React/RCTEventEmitter.h>
+
+@interface RCT_EXTERN_MODULE(NativeViewIOS26, RCTEventEmitter)
+
+RCT_EXTERN_METHOD(getSafeAreaInsets:(RCTPromiseResolveBlock)resolve
+                  rejecter:(RCTPromiseRejectBlock)reject)
+
++ (BOOL)requiresMainQueueSetup
+{
+  return YES;
+}
+
+@end

package/ios/NativeViewIOS26.swift

@@ -0,0 +1,120 @@
+import Foundation
+import UIKit
+import React
+
+@objc(NativeViewIOS26)
+class NativeViewIOS26: RCTEventEmitter {
+    
+    private var hasListeners = false
+    private var observers: [NSObjectProtocol] = []
+    
+    override init() {
+        super.init()
+        setupObservers()
+    }
+    
+    deinit {
+        removeObservers()
+    }
+    
+    // MARK: - RCTEventEmitter
+    
+    override func supportedEvents() -> [String]! {
+        return ["onSafeAreaInsetsChange"]
+    }
+    
+    override func startObserving() {
+        hasListeners = true
+    }
+    
+    override func stopObserving() {
+        hasListeners = false
+    }
+    
+    override static func requiresMainQueueSetup() -> Bool {
+        return true
+    }
+    
+    // MARK: - Setup Observers
+    
+    private func setupObservers() {
+        let notificationNames: [NSNotification.Name] = [
+            UIDevice.orientationDidChangeNotification,
+            UIApplication.didBecomeActiveNotification
+        ]
+        
+        for name in notificationNames {
+            let observer = NotificationCenter.default.addObserver(
+                forName: name,
+                object: nil,
+                queue: .main
+            ) { [weak self] _ in
+                self?.notifySafeAreaChange()
+            }
+            observers.append(observer)
+        }
+    }
+    
+    private func removeObservers() {
+        observers.forEach { NotificationCenter.default.removeObserver($0) }
+        observers.removeAll()
+    }
+    
+    // MARK: - Public Methods
+    
+    @objc
+    func getSafeAreaInsets(
+        _ resolve: @escaping RCTPromiseResolveBlock,
+        rejecter reject: @escaping RCTPromiseRejectBlock
+    ) {
+        DispatchQueue.main.async { [weak self] in
+            guard let self = self else {
+                reject("ERROR", "Module deallocated", nil)
+                return
+            }
+            
+            if let insets = self.getCurrentSafeAreaInsets() {
+                resolve(insets)
+            } else {
+                reject("ERROR", "Failed to get safe area insets", nil)
+            }
+        }
+    }
+    
+    // MARK: - Helper Methods
+    
+    private func getCurrentSafeAreaInsets() -> [String: CGFloat]? {
+        guard let window = getKeyWindow() else {
+            return nil
+        }
+        
+        let safeAreaInsets = window.safeAreaInsets
+        
+        return [
+            "top": safeAreaInsets.top,
+            "bottom": safeAreaInsets.bottom,
+            "left": safeAreaInsets.left,
+            "right": safeAreaInsets.right
+        ]
+    }
+    
+    private func getKeyWindow() -> UIWindow? {
+        // iOS 13+ compatible way to get key window
+        if #available(iOS 13.0, *) {
+            return UIApplication.shared.connectedScenes
+                .compactMap { $0 as? UIWindowScene }
+                .flatMap { $0.windows }
+                .first { $0.isKeyWindow }
+        } else {
+            return UIApplication.shared.keyWindow
+        }
+    }
+    
+    private func notifySafeAreaChange() {
+        guard hasListeners else { return }
+        
+        if let insets = getCurrentSafeAreaInsets() {
+            sendEvent(withName: "onSafeAreaInsetsChange", body: insets)
+        }
+    }
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "native-view-ios-26",
+  "version": "1.0.0",
+  "description": "Native iOS Safe Area module for React Native with Swift bridge",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "safe-area",
+    "insets",
+    "swift",
+    "native-module",
+    "blur-effect"
+  ],
+  "author": "Jason Phan",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "react": "^18.2.0",
+    "react-native": "^0.73.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/JasonP205/native-view-ios-26.git"
+  },
+  "files": [
+    "ios",
+    "index.js",
+    "index.d.ts",
+    "components.ts",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "react-native": "index.js"
+}