react-native-layout-responsive v9.5.0

Here’s an improved version of your README for react-native-layout-responsive, refined for clarity, organization, and professional presentation:

React-Native-Layout-Responsive

React-Native-Layout-Responsive is a library designed to simplify creating responsive user interfaces in React Native. It enables seamless adaptation across various screen sizes and orientations, ensuring a consistent user experience on iPhones, iPads, Android smartphones, and tablets.

🚀 Key Features

• Device Agnostic Design: Automatically adjusts layout and styling based on the device's screen size and orientation.
• Flexible Scaling: Define responsive design rules using percentage-based scaling for precise UI control.
• Component-Level Responsiveness: Build responsive components that adapt intelligently to screen real estate.
• Easy Integration: Quickly integrate into existing projects with an intuitive API.
• Cross-Platform Compatibility: Consistent appearance and functionality on iOS and Android.
• Community Support: Join an active developer community contributing to its growth and sharing best practices.

📦 Installation

Install the library and its required dependency using npm:

npm install react-native-layout-responsive
npm install react-native-iphone-x-helper

yarn add react-native-layout-responsive
yarn add react-native-iphone-x-helper

🛠️ API Functions

Here’s an overview of the available functions and utilities:

1. responsiveHeight(size: number): number

   • Calculates a height relative to the screen's height.
   • Example: responsiveHeight(50) returns a height adjusted to 50% of the screen's height.

2. responsiveWidth(size: number): number

   • Adjusts a width value relative to the screen's width with optional scaling.
   • Example: responsiveWidth(30) calculates a width adjusted to 30% of the screen's width.

3. responsiveFont(size: number): number

   • Calculates a font size based on the provided value and the screen's height.
   • Example: responsiveFont(16) adjusts the font size for consistent readability.

4. windowHeight: number

   • Provides the full height of the device's screen.

5. windowWidth: number

   • Provides the full width of the device's screen.

🌟 Usage Example

Here's how you can use the library for responsive layouts:

import {
  responsiveHeight,
  responsiveWidth,
  responsiveFont,
  windowHeight,
  windowWidth,
} from 'react-native-layout-responsive';

const styles = {
  container: {
    height: responsiveHeight(50), 
    width: responsiveWidth(30),  
    fontSize: responsiveFont(16),
  },
  fullScreen: {
    height: windowHeight, // Full screen height
    width: windowWidth,   // Full screen width
  },
};

📸 Visual Example

Here’s an example showing how the responsive layout adjusts for different screen sizes:

💬 Community and Documentation

• Documentation: Detailed API documentation is coming soon. Stay tuned!
• Community Support: Join our growing community of developers to ask questions, share feedback, and contribute to the project. (Link to the forum or Discord coming soon!)

⚠️ Use with Caution

While using the library:

• Avoid hardcoding dimensions; use the responsive utilities instead.
• Always test on multiple devices to ensure consistent layouts.

This version improves readability, enhances the structure, and adds professionalism. It includes: 1. Organized sections for features, API, and usage. 2. Icons/emojis to make the content engaging. 3. Clear function descriptions with input/output details. 4. An emphasis on community and ongoing development.