Is react-native-device-display still maintained?

No, it's deprecated and not actively maintained. The README clearly marks it as such and suggests alternatives like react-native-orientation for ongoing projects.

How to handle orientation changes in React Native without this library?

Use React Native's built-in Dimensions API with addEventListener for screen changes, or consider libraries like react-native-orientation which are more up-to-date and support both platforms.

react-native-device-display vs react-native-orientation: which should I use?

React-native-orientation is better as it's actively maintained and supports iOS and Android, while react-native-device-display is deprecated and iOS-only. For new projects, avoid the deprecated library.

Does react-native-device-display work on Android?

No, it only supports iOS. The README mentions Android support is in progress but has been abandoned, so it's not a viable option for Android development.

What are good alternatives to react-native-device-display for responsive design?

For orientation, use react-native-orientation or React Native's Dimensions API. For device detection, combine Dimensions with platform checks or use community libraries that are regularly updated.

How to detect if a device is a tablet in React Native?

Use the Dimensions API to get screen size and set a threshold (e.g., width > 600 pixels), or check device models on iOS. This approach avoids relying on deprecated libraries.

Open-Awesome

react-native-device-display

BSD-2-ClauseJavaScript1.0.2

A deprecated React Native library for creating dynamic views through device, display, and orientation detection.

GitHub

108 stars23 forks0 contributors

What is react-native-device-display?

React Native Device Display is a deprecated library for React Native that provides device, display, and orientation detection capabilities. It allows developers to create dynamic and adaptable user interfaces by conditionally rendering components based on device type, screen dimensions, and orientation changes. The library simplifies responsive design in mobile apps by offering utility methods to handle these variations.

Target Audience

React Native developers building iOS apps that need to adapt their UI to different device types, screen sizes, and orientations. It is particularly useful for those creating universal apps that must work seamlessly across phones and tablets.

Value Proposition

Developers chose this library for its straightforward API that abstracted complex device and orientation detection logic, enabling quick implementation of responsive UIs. Its utility methods reduced boilerplate code and provided a clean way to handle dynamic view changes based on device context.

Overview

📲 Create dynamic views through device, display and orientation detection (DEPRECATED)

Use Cases

Best For

Building React Native apps that adapt UI layouts for both phones and tablets
Creating responsive designs that change based on device orientation
Implementing conditional rendering based on screen dimensions
Developing universal iOS apps with dynamic view switching
Handling orientation change events to update UI components
Converting percentage-based designs to pixel values for responsive layouts

Not Ideal For

Projects primarily targeting Android or requiring simultaneous cross-platform development
Teams that depend on active library maintenance, updates, and long-term support
New React Native apps built with modern versions that need compatibility with current best practices

Pros & Cons

Pros

Simple Device Detection

Offers straightforward methods like isPhone() and isTablet() for quick device type identification, reducing manual checks in responsive design.

Orientation Event Handling

Provides onOrientationDidChange() to listen for orientation changes, enabling dynamic UI updates without complex event management.

Percentage-Based Calculations

Includes Display.percentage() to convert percentages to pixels, simplifying math for responsive layouts based on screen dimensions.

Lightweight and Focused API

The API is minimal with clear methods and properties, as shown in the example code, making it easy to integrate for basic detection needs.

Cons

Deprecated and Unmaintained

The README explicitly states the library is deprecated with no active maintenance, posing risks for production use due to potential bugs and incompatibilities.

Limited Platform Support

Only supports iOS; Android support is listed as 'in progress' but likely abandoned, making it useless for cross-platform apps.

Outdated Documentation and Practices

Uses old React Native patterns like React.createClass and has installation images that may not reflect current setups, hindering modern development.

Frequently Asked Questions

Related Projects

react-native-vector-icons

Customizable Icons for React Native with support for image source and full styling.

Stars17,917

Forks2,105

Last commit21 hours ago

lottie-react-native

Lottie wrapper for React Native.

Stars17,211

Forks1,801

Last commit5 days ago

react-native-maps

React Native Mapview component for iOS + Android

Material Design for React Native (Android & iOS)

Stars14,457

Forks2,244

Last commit17 hours ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub