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

Image Example