react-native-layout-responsive
v9.2.0
Published
React-Native-Responsive" is a versatile library designed to simplify the process of creating responsive user interfaces for a wide range of devices, including iPhones, iPads, Android smartphones, and tablets. With this library, developers can ensure that
Downloads
183
Maintainers
Readme
react-native-layout-responsive
React-Native-Responsive is a library designed to simplify creating responsive user interfaces for React Native applications. It ensures seamless adaptation to various screen sizes and orientations, providing a consistent experience across iPhones, iPads, Android smartphones, and tablets.
Key Features
- Device Agnostic Design: Create UI components that automatically adjust layout and styling based on the device's screen size and orientation.
- Flexible Configuration: Define responsive design rules using breakpoints or percentage-based scaling for precise control over UI element display.
- Component-Level Responsiveness: Build responsive components that intelligently adapt appearance and behavior to available screen real estate.
- Effortless Integration: Easily integrate React-Native-Responsive into existing React Native projects with an intuitive API and comprehensive documentation (to be added).
- Cross-Platform Compatibility: Ensure consistent functionality and appearance across iOS and Android devices.
- Community Support: Benefit from an active community of developers contributing to ongoing development and providing assistance and best practices (link to community forum/channel to be added).
Installation
You can install the library via npm:
npm i react-native-layout-responsive
npm i react-native-iphone-x-helper
Use code with caution
responsivesHeight(number): Define a view or element's height based on the screen's height.
responsivesWidth(number): Define a view or element's width based on the screen's width.
responsiveFont(number): Set a responsive font size based on the provided value.
windowHeight: Access the entire screen's height for responsive layouts.
windowWidth: Access the entire screen's width for responsive layouts.
Example
import { responsivesHeight, responsivesWidth, responsiveFont, windowHeight, windowWidth } from 'react-native-layout-responsive';
const height = responsivesHeight(50);
const width = responsivesWidth(30);
const fontSize = responsiveFont(16);
const fullScreenHeight = windowHeight; // Accesses the full screen height
const fullScreenWidth = windowWidth; // Accesses the full screen width