@shaaz1000/rn-device-utils

A comprehensive utility package for React Native applications that handles device information, responsive design, keyboard management, and platform-specific features.

Features

• 📱 Complete device information and detection
• 📐 Responsive scaling utilities
• ⌨️ Advanced keyboard handling
• 🔍 Notch & Dynamic Island detection
• 💫 Safe area utilities
• 📏 Window dimension hooks
• 🎯 Platform-specific utilities
• 🔄 Orientation management
• 📦 Version management
• 📱 Dynamic Island support

Installation

1# Using npm
2npm install @shaaz1000/rn-device-utils
3
4# Using yarn
5yarn add @shaaz1000/rn-device-utils

Core Features

1. Device Information

1import { DeviceInfoManager } from '@shaaz1000/rn-device-utils';
2
3const deviceInfo = DeviceInfoManager.getInstance();
4
5// Get device details
6const info = deviceInfo.getDeviceInfo();
7console.log(info.isTablet); // true/false
8console.log(info.hasNotch); // true/false
9console.log(info.hasDynamicIsland); // true/false
10
11// Check if device has any display cutout
12const hasCutout = deviceInfo.hasDisplayCutout();
13
14// Get status bar height considering cutouts
15const statusBarHeight = deviceInfo.getStatusBarHeight();

2. Responsive Scaling

1import { 
2  scaleWidth, 
3  scaleHeight, 
4  moderateScale,
5  horizontalScale,
6  verticalScale,
7  pixelsToDp,
8  dpToPixels,
9  getPixelRatio,
10  getFontScale,
11  scaleText 
12} from '@shaaz1000/rn-device-utils';
13
14const styles = StyleSheet.create({
15  container: {
16    width: scaleWidth(300),
17    height: scaleHeight(200),
18    padding: moderateScale(10),
19    marginHorizontal: horizontalScale(20),
20    marginVertical: verticalScale(10)
21  },
22  text: {
23    fontSize: scaleText(16)
24  }
25});
26
27// Convert measurements
28const dpValue = pixelsToDp(100);
29const pixelValue = dpToPixels(50);
30const devicePixelRatio = getPixelRatio();
31const systemFontScale = getFontScale();

3. Keyboard Management

1import { useKeyboard, KeyboardManager } from '@shaaz1000/rn-device-utils';
2
3function MyComponent() {
4  const { 
5    keyboardHeight, 
6    keyboardVisible, 
7    dismissKeyboard,
8    keyboardAnimationDuration,
9    isAvoidingView,
10    defaultBehavior 
11  } = useKeyboard();
12
13  // Using KeyboardManager directly
14  KeyboardManager.addShowListener((event) => {
15    const height = KeyboardManager.getKeyboardHeight(event);
16    const duration = KeyboardManager.getAnimationDuration(event);
17  });
18
19  return (
20    <KeyboardAvoidingView 
21      behavior={defaultBehavior}
22      enabled={isAvoidingView}
23      style={{ paddingBottom: keyboardVisible ? keyboardHeight : 0 }}
24    >
25      {/* Your content */}
26    </KeyboardAvoidingView>
27  );
28}

4. Safe Area & Notch/Dynamic Island Handling

1import { useSafeArea, NotchHelper } from '@shaaz1000/rn-device-utils';
2
3function MyComponent() {
4  const safeArea = useSafeArea();
5  const displayCutout = NotchHelper.getDisplayCutout();
6
7  // Get specific display cutout info
8  const { type, topInset, bottomInset } = displayCutout;
9  const isNotch = type === 'notch';
10  const isDynamicIsland = type === 'dynamicIsland';
11
12  // Get safe padding
13  const padding = NotchHelper.getSafePadding();
14
15  return (
16    <View style={{
17      paddingTop: safeArea.top,
18      paddingBottom: safeArea.bottom,
19      // Handle notch or dynamic island
20      marginTop: displayCutout.topInset
21    }}>
22      {/* Your content */}
23    </View>
24  );
25}

5. Responsive Design Hook

1import { useResponsive } from '@shaaz1000/rn-device-utils';
2
3function MyComponent() {
4  const responsive = useResponsive();
5
6  const fontSize = responsive.getFontSize(16);
7  const isSmall = responsive.isSmallDevice;
8  const percentage = responsive.getPercentage(50); // 50% of screen width
9
10  // Get responsive values based on screen size
11  const padding = responsive.getValue(10, 15, 20); // small, medium, large devices
12
13  return (
14    <View style={{
15      width: responsive.widthScale(300),
16      padding: responsive.moderateScale(10)
17    }}>
18      <Text style={{ fontSize }}>
19        {isSmall ? 'Small Device' : 'Regular Device'}
20      </Text>
21    </View>
22  );
23}

6. Platform Utilities

1import { PlatformManager, VersionManager } from '@shaaz1000/rn-device-utils';
2
3const platform = PlatformManager.getInstance();
4
5// Platform-specific values
6const padding = platform.select({
7  ios: 20,
8  android: 16,
9  default: 10
10});
11
12// Version checking
13if (platform.isAtLeastiOS('15.0')) {
14  // Use iOS 15+ features
15}
16
17// Version comparison
18const isNewer = VersionManager.compareVersions('1.2.0', '1.1.0'); // Returns 1
19const isSupported = VersionManager.isAtLeast('15.0');
20
21// Get platform info
22const info = platform.getPlatformInfo();
23console.log(info.isTablet, info.isTV, info.majorVersion);

7. Orientation Management

1import { useOrientation, OrientationManager } from '@shaaz1000/rn-device-utils';
2
3function MyComponent() {
4  const orientation = useOrientation();
5  
6  // Or use the manager directly
7  const isPortrait = OrientationManager.isPortrait();
8  const dimensions = OrientationManager.getDimensionsForOrientation();
9
10  return (
11    <View style={{
12      flexDirection: orientation === 'portrait' ? 'column' : 'row',
13      width: dimensions.width,
14      height: dimensions.height
15    }}>
16      {/* Your content */}
17    </View>
18  );
19}

8. Window Dimensions

1import { useWindowDimensions } from '@shaaz1000/rn-device-utils';
2
3function MyComponent() {
4  const { 
5    width,
6    height,
7    scale,
8    fontScale,
9    isPortrait,
10    isLandscape 
11  } = useWindowDimensions();
12
13  return (
14    <View style={{
15      width: isPortrait ? '100%' : '50%',
16      height: height * 0.5,
17      fontSize: 16 * fontScale
18    }}>
19      {/* Your content */}
20    </View>
21  );
22}

API Reference

Hooks

• useKeyboard() - Keyboard state and dimensions
• useSafeArea() - Safe area insets
• useResponsive() - Responsive design utilities
• useOrientation() - Device orientation
• useWindowDimensions() - Screen dimensions and orientation

Managers

• DeviceInfoManager - Device information and capabilities
• PlatformManager - Platform-specific utilities
• KeyboardManager - Keyboard event handling
• OrientationManager - Orientation utilities
• NotchHelper - Notch and Dynamic Island detection
• VersionManager - Version comparison and checking

Scaling Utilities

• scaleWidth(dimension: number) - Scale width dimension
• scaleHeight(dimension: number) - Scale height dimension
• horizontalScale(size: number) - Scale size horizontally
• verticalScale(size: number) - Scale size vertically
• moderateScale(dimension: number, factor = 0.5) - Moderate scaling for better UX
• pixelsToDp(pixels: number) - Convert pixels to DP
• dpToPixels(dp: number) - Convert DP to pixels
• getPixelRatio() - Get device pixel ratio
• getFontScale() - Get font scale
• scaleText(size: number) - Scale text size

Platform Support

• iOS 11.0 and above
• Android API level 21 and above
• Supports both phones and tablets
• Special handling for notched devices and Dynamic Island
• iPhone models support:
  • iPhone X through iPhone 14 Pro Max (Notch)
  • iPhone 14 Pro through iPhone 16 Pro Max (Dynamic Island)

Contributing

Contributions are welcome! Please read our contributing guide to get started.

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

License

MIT License - see the LICENSE file for details

Author

Shaaz Khan

Support

For support, issues, or feature requests, please file an issue in the GitHub repository.