react-native-notch-detector-pro

v2.0.0

Published

3 months ago

Advanced React Native package for notch detection with visual effects and screen adaptation utilities

Downloads

React Native Notch Detector Pro v2.0.0

🚀 Major Update! Advanced React Native package for comprehensive notch detection, device orientation, Dynamic Island support, foldable devices, and performance monitoring.

✨ New Features in v2.0.0

🧭 Device Orientation Detection: Real-time orientation tracking and change listeners
🏝️ Dynamic Island Support: Full iOS 16+ Dynamic Island detection and monitoring
📱 Foldable Device Support: Complete foldable device detection and state tracking
📊 Performance Monitoring: Real-time performance metrics and battery impact tracking
🔍 Enhanced Notch Detection: Advanced notch type, shape, and interactivity detection
🎯 Smart Layout Mode: AI-powered layout suggestions and optimal margin calculations
📐 Advanced Screen Adaptation: Intelligent UI adjustment utilities

Core Features

🔍 Notch Detection: Detect notch presence and get detailed information
📐 Dimensions & Position: Get accurate notch dimensions and position
✨ Visual Effects: Animate light pulses through the notch area
📱 Screen Adaptation: Dynamic UI adjustment utilities
🎨 Theme Integration: Customizable styling and effects
📦 TypeScript Support: Full TypeScript definitions
🚀 TurboModules: Modern React Native architecture
📱 Cross-Platform: Android (Kotlin) and iOS (Swift) support

Installation

npm install react-native-notch-detector-pro
# or
yarn add react-native-notch-detector-pro

iOS Setup

cd ios && pod install

Android Setup

No additional setup required for Android.

Usage

Basic Notch Detection

import { hasNotch, getNotchInfo, getSafeAreaInsets } from 'react-native-notch-detector-pro';

// Check if device has notch
const hasNotchDevice = await hasNotch();

// Get detailed notch information
const notchInfo = await getNotchInfo();
console.log(notchInfo);
// {
//   hasNotch: true,
//   height: 44,
//   width: 375,
//   position: 'top',
//   x: 0,
//   y: 0
// }

// Get safe area insets
const safeAreaInsets = await getSafeAreaInsets();
console.log(safeAreaInsets);
// {
//   top: 44,
//   bottom: 34,
//   left: 0,
//   right: 0
// }

Visual Light Effects

import { pulseNotchLight } from 'react-native-notch-detector-pro';

// Trigger a light pulse effect
await pulseNotchLight({
  color: '#00ff00',
  duration: 2000,
  intensity: 0.8,
  pulseType: 'moving',
  direction: 'horizontal'
});

Using the Enhanced NotchDetectorProView Component

import React from 'react';
import { NotchDetectorProView } from 'react-native-notch-detector-pro';

const App = () => {
  return (
    <NotchDetectorProView
      enableLightEffect={true}
      enableDynamicIsland={true}
      enableFoldableSupport={true}
      enablePerformanceMonitoring={true}
      lightConfig={{
        color: '#00ff00',
        duration: 1000,
        intensity: 0.7
      }}
      onNotchDetected={(info) => {
        console.log('Notch detected:', info);
      }}
      onOrientationChange={(orientation) => {
        console.log('Orientation changed:', orientation);
      }}
      onDynamicIslandChange={(info) => {
        console.log('Dynamic Island changed:', info);
      }}
      onFoldableStateChange={(info) => {
        console.log('Foldable state changed:', info);
      }}
      onPerformanceUpdate={(metrics) => {
        console.log('Performance updated:', metrics);
      }}
    >
      {/* Your app content */}
    </NotchDetectorProView>
  );
};

Advanced Features

Device Orientation Detection

import { 
  getDeviceOrientation, 
  addOrientationListener 
} from 'react-native-notch-detector-pro';

// Get current orientation
const orientation = await getDeviceOrientation();
console.log(orientation);
// {
//   orientation: 'portrait',
//   angle: 0,
//   isLandscape: false,
//   isPortrait: true
// }

// Listen for orientation changes
const removeOrientationListener = addOrientationListener((orientation) => {
  console.log('Orientation changed:', orientation);
});

Dynamic Island Support (iOS 16+)

import { 
  getDynamicIslandInfo, 
  addDynamicIslandListener 
} from 'react-native-notch-detector-pro';

// Get Dynamic Island information
const islandInfo = await getDynamicIslandInfo();
console.log(islandInfo);
// {
//   hasDynamicIsland: true,
//   height: 37,
//   width: 126,
//   position: 'top',
//   x: 124.5,
//   y: 11,
//   cornerRadius: 18.5,
//   isActive: true
// }

// Listen for Dynamic Island changes
const removeIslandListener = addDynamicIslandListener((info) => {
  console.log('Dynamic Island changed:', info);
});

Foldable Device Support

import { 
  getFoldableInfo, 
  addFoldableStateListener 
} from 'react-native-notch-detector-pro';

// Get foldable device information
const foldableInfo = await getFoldableInfo();
console.log(foldableInfo);
// {
//   isFoldable: true,
//   foldState: 'flat',
//   hingeAngle: 180,
//   displayCount: 2,
//   primaryDisplay: { /* NotchInfo */ },
//   secondaryDisplay: { /* NotchInfo */ }
// }

// Listen for foldable state changes
const removeFoldableListener = addFoldableStateListener((info) => {
  console.log('Foldable state changed:', info);
});

Performance Monitoring

import { 
  getPerformanceMetrics,
  startPerformanceMonitoring,
  stopPerformanceMonitoring,
  addPerformanceListener
} from 'react-native-notch-detector-pro';

// Start performance monitoring
await startPerformanceMonitoring();

// Get current performance metrics
const metrics = await getPerformanceMetrics();
console.log(metrics);
// {
//   detectionTime: 15,
//   memoryUsage: 45.2,
//   cpuUsage: 12.5,
//   batteryImpact: 'low'
// }

// Listen for performance updates
const removePerformanceListener = addPerformanceListener((metrics) => {
  console.log('Performance updated:', metrics);
});

// Stop monitoring when done
await stopPerformanceMonitoring();

Enhanced Notch Detection

import { 
  detectNotchType,
  getNotchShape,
  isNotchInteractive
} from 'react-native-notch-detector-pro';

// Detect notch type
const notchType = await detectNotchType();
console.log(notchType); // 'notch', 'punch-hole', 'dynamic-island', 'water-drop', or 'none'

// Get notch shape
const notchShape = await getNotchShape();
console.log(notchShape); // 'rectangular', 'rounded', 'oval', 'pill', or 'unknown'

// Check if notch is interactive
const isInteractive = await isNotchInteractive();
console.log(isInteractive); // true for Dynamic Island, false for regular notches

Smart Layout Mode

import { 
  getOptimalLayoutMargins,
  suggestLayoutAdjustments,
  enableSmartLayoutMode,
  disableSmartLayoutMode
} from 'react-native-notch-detector-pro';

// Enable smart layout mode
await enableSmartLayoutMode();

// Get optimal layout margins
const optimalMargins = await getOptimalLayoutMargins();
console.log(optimalMargins);
// { top: 44, bottom: 34, left: 0, right: 0 }

// Get layout suggestions
const suggestions = await suggestLayoutAdjustments();
console.log(suggestions);
// [
//   {
//     adjustments: ['Move header below notch area', 'Adjust button spacing'],
//     priority: 'high'
//   },
//   {
//     adjustments: ['Consider landscape layout optimization'],
//     priority: 'medium'
//   }
// ]

// Disable smart layout mode
await disableSmartLayoutMode();

Multiple Cutouts and Layout Listeners

import { 
  getMultipleCutouts, 
  avoidNotchArea, 
  addNotchLayoutListener 
} from 'react-native-notch-detector-pro';

// Get multiple cutouts (for foldables)
const cutouts = await getMultipleCutouts();

// Add listener for layout changes
const removeListener = addNotchLayoutListener((info) => {
  console.log('Notch layout changed:', info);
});

// Clean up listener
removeListener();

API Reference

Core Methods

`hasNotch(): Promise<boolean>`

Returns whether the device has a notch or display cutout.

`getNotchInfo(): Promise<NotchInfo>`

Returns detailed notch information including dimensions and position.

`getSafeAreaInsets(): Promise<SafeAreaInsets>`

Returns safe area insets for the current screen.

`pulseNotchLight(config?: NotchLightConfig): Promise<void>`

Triggers a light pulse animation through the notch area.

`getMultipleCutouts(): Promise<NotchInfo[]>`

Returns information about multiple cutouts (useful for foldables).

`addNotchLayoutListener(callback: (info: NotchInfo) => void): () => void`

Adds a listener for notch-related layout changes.

Device Orientation Methods

`getDeviceOrientation(): Promise<DeviceOrientation>`

Returns current device orientation information.

`addOrientationListener(callback: (orientation: DeviceOrientation) => void): () => void`

Adds a listener for device orientation changes.

Dynamic Island Methods (iOS 16+)

`getDynamicIslandInfo(): Promise<DynamicIslandInfo>`

Returns Dynamic Island information including dimensions and state.

`addDynamicIslandListener(callback: (info: DynamicIslandInfo) => void): () => void`

Adds a listener for Dynamic Island state changes.

Foldable Device Methods

`getFoldableInfo(): Promise<FoldableInfo>`

Returns foldable device information including fold state and display count.

`addFoldableStateListener(callback: (info: FoldableInfo) => void): () => void`

Adds a listener for foldable device state changes.

Performance Monitoring Methods

`getPerformanceMetrics(): Promise<PerformanceMetrics>`

Returns current performance metrics including detection time and resource usage.

`startPerformanceMonitoring(): Promise<void>`

Starts real-time performance monitoring.

`stopPerformanceMonitoring(): Promise<void>`

Stops performance monitoring.

`addPerformanceListener(callback: (metrics: PerformanceMetrics) => void): () => void`

Adds a listener for performance metrics updates.

Enhanced Notch Detection Methods

`detectNotchType(): Promise<'notch' | 'punch-hole' | 'dynamic-island' | 'water-drop' | 'none'>`

Detects the specific type of notch or cutout.

`getNotchShape(): Promise<'rectangular' | 'rounded' | 'oval' | 'pill' | 'unknown'>`

Returns the shape of the notch or cutout.

`isNotchInteractive(): Promise<boolean>`

Checks if the notch/cutout is interactive (like Dynamic Island).

Smart Layout Methods

`getOptimalLayoutMargins(): Promise<SafeAreaInsets>`

Returns optimized layout margins based on device characteristics.

`suggestLayoutAdjustments(): Promise<{adjustments: string[], priority: 'high' | 'medium' | 'low'}[]>`

Returns AI-powered layout adjustment suggestions.

`enableSmartLayoutMode(): Promise<void>`

Enables smart layout mode for automatic UI adjustments.

`disableSmartLayoutMode(): Promise<void>`

Disables smart layout mode.

Types

Core Types

interface NotchInfo {
  hasNotch: boolean;
  height: number;
  width: number;
  position: 'top' | 'bottom' | 'left' | 'right';
  x?: number;
  y?: number;
}

interface SafeAreaInsets {
  top: number;
  bottom: number;
  left: number;
  right: number;
}

interface NotchLightConfig {
  color?: string;
  duration?: number;
  intensity?: number;
  gradient?: boolean;
  pulseType?: 'static' | 'moving' | 'wave';
  direction?: 'horizontal' | 'vertical' | 'diagonal';
}

New Advanced Types

interface DeviceOrientation {
  orientation: 'portrait' | 'landscape' | 'portrait-upsidedown' | 'landscape-left' | 'landscape-right';
  angle: number;
  isLandscape: boolean;
  isPortrait: boolean;
}

interface DynamicIslandInfo {
  hasDynamicIsland: boolean;
  height: number;
  width: number;
  position: 'top';
  x: number;
  y: number;
  cornerRadius: number;
  isActive: boolean;
}

interface FoldableInfo {
  isFoldable: boolean;
  foldState: 'flat' | 'half-folded' | 'folded';
  hingeAngle: number;
  displayCount: number;
  primaryDisplay: NotchInfo;
  secondaryDisplay?: NotchInfo;
}

interface PerformanceMetrics {
  detectionTime: number;
  memoryUsage: number;
  cpuUsage: number;
  batteryImpact: 'low' | 'medium' | 'high';
}

interface NotchDetectorProViewProps {
  style?: any;
  children?: React.ReactNode;
  lightConfig?: NotchLightConfig;
  enableLightEffect?: boolean;
  enableDynamicIsland?: boolean;
  enableFoldableSupport?: boolean;
  enablePerformanceMonitoring?: boolean;
  onNotchDetected?: (info: NotchInfo) => void;
  onLayoutChange?: (info: NotchInfo) => void;
  onOrientationChange?: (orientation: DeviceOrientation) => void;
  onDynamicIslandChange?: (info: DynamicIslandInfo) => void;
  onFoldableStateChange?: (info: FoldableInfo) => void;
  onPerformanceUpdate?: (metrics: PerformanceMetrics) => void;
}

Example App

Check out the /example directory for a complete demo app showing all features including:

Basic notch detection
Dynamic Island support
Foldable device detection
Performance monitoring
Device orientation tracking
Smart layout suggestions
Visual light effects

Changelog

v2.0.0 (Latest)

🚀 Major Release: Complete rewrite with advanced features
🧭 Device Orientation Detection: Real-time orientation tracking
🏝️ Dynamic Island Support: Full iOS 16+ Dynamic Island detection
📱 Foldable Device Support: Complete foldable device detection
📊 Performance Monitoring: Real-time performance metrics
🔍 Enhanced Notch Detection: Advanced notch type and shape detection
🎯 Smart Layout Mode: AI-powered layout suggestions
📐 Advanced Screen Adaptation: Intelligent UI adjustment utilities
🎨 Enhanced Visual Effects: Improved light effects with shape awareness
📦 Better TypeScript Support: Comprehensive type definitions

v1.0.0

Initial release with basic notch detection
Visual light effects
Safe area detection
Multiple cutouts support

Building

# Build the package
npm run build

# Build for Android
npm run build:android

# Build for iOS
npm run build:ios

# Run tests
npm test

# Lint code
npm run lint

# Type check
npm run typecheck

Requirements

React Native >= 0.72.0
iOS >= 12.0 (for Dynamic Island: iOS >= 16.0)
Android API Level >= 21

Contributing

We welcome contributions! Please see our Contributing Guidelines for details.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Roadmap

[ ] Web support
[ ] More visual effects
[ ] Advanced gesture recognition
[ ] Machine learning-based layout optimization
[ ] Plugin system for custom detectors

License

Support

If you find this package useful, please give it a ⭐ on GitHub!

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme