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

``bash
npm install react-native-notch-detector-pro


or


yarn add react-native-notch-detector-pro
`

$3

`bash
cd ios && pod install
`

$3

No additional setup required for Android.

Usage

$3

`typescript
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
// }
`

$3

`typescript
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'
});
`

$3

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

const App = () => {
return (
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 /}

);
};
`

$3

#### Device Orientation Detection

`typescript
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+)

`typescript
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

`typescript
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

`typescript
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

`typescript
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

`typescript
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

`typescript
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

$3

#### hasNotch(): Promise
Returns whether the device has a notch or display cutout.

#### getNotchInfo(): Promise
Returns detailed notch information including dimensions and position.

#### getSafeAreaInsets(): Promise
Returns safe area insets for the current screen.

#### pulseNotchLight(config?: NotchLightConfig): Promise
Triggers a light pulse animation through the notch area.

#### getMultipleCutouts(): Promise
Returns information about multiple cutouts (useful for foldables).

#### addNotchLayoutListener(callback: (info: NotchInfo) => void): () => void
Adds a listener for notch-related layout changes.

$3

#### getDeviceOrientation(): Promise
Returns current device orientation information.

#### addOrientationListener(callback: (orientation: DeviceOrientation) => void): () => void
Adds a listener for device orientation changes.

$3

#### getDynamicIslandInfo(): Promise
Returns Dynamic Island information including dimensions and state.

#### addDynamicIslandListener(callback: (info: DynamicIslandInfo) => void): () => void
Adds a listener for Dynamic Island state changes.

$3

#### getFoldableInfo(): Promise
Returns foldable device information including fold state and display count.

#### addFoldableStateListener(callback: (info: FoldableInfo) => void): () => void
Adds a listener for foldable device state changes.

$3

#### getPerformanceMetrics(): Promise
Returns current performance metrics including detection time and resource usage.

#### startPerformanceMonitoring(): Promise
Starts real-time performance monitoring.

#### stopPerformanceMonitoring(): Promise
Stops performance monitoring.

#### addPerformanceListener(callback: (metrics: PerformanceMetrics) => void): () => void
Adds a listener for performance metrics updates.

$3

#### 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
Checks if the notch/cutout is interactive (like Dynamic Island).

$3

#### getOptimalLayoutMargins(): Promise
Returns optimized layout margins based on device characteristics.

#### suggestLayoutAdjustments(): Promise<{adjustments: string[], priority: 'high' | 'medium' | 'low'}[]>
Returns AI-powered layout adjustment suggestions.

#### enableSmartLayoutMode(): Promise
Enables smart layout mode for automatic UI adjustments.

#### disableSmartLayoutMode(): Promise
Disables smart layout mode.

$3

#### Core Types

`typescript
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

`typescript
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

$3

- 🚀 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

$3

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

Building

`bash


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.

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

Roadmap

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

License

MIT © Your Name

Support

- 📖 Documentation
- 🐛 Report Issues
- 💬 Discussions
- ⭐ Star on GitHub

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