Walstar RN Responsive

Walstar RN Responsive is a utility package designed to enhance responsiveness in React Native applications. It provides utility functions that simplify the process of creating responsive layouts and adjusting font sizes based on screen dimensions and aspect ratios.

Table of Contents

• Installation
• Usage
• Functions
• Examples
• License
• Author

Installation

You can install Walstar RN Responsive via npm or yarn:

npm install walstar-rn-responsive

or

yarn add walstar-rn-responsive

Usage

To use Walstar RN Responsive, import the necessary functions into your React Native components. These utility functions will help you achieve responsive layouts effortlessly.

Example Usage

import React from 'react';
import { View, Text } from 'react-native';
import { responsiveHeight, responsiveWidth, responsiveFontSize } from 'walstar-rn-responsive';

const MyComponent = () => {
  return (
    <View style={{ height: responsiveHeight(50), width: responsiveWidth(80) }}>
      <Text style={{ fontSize: responsiveFontSize(16) }}>Responsive Text</Text>
    </View>
  );
};

export default MyComponent;

Functions

responsiveHeight(h: number)

Returns the percentage value of the provided height based on the larger dimension of the screen.

responsiveWidth(w: number)

Returns the percentage value of the provided width based on the smaller dimension of the screen.

responsiveFontSize(f: number)

Returns the adjusted font size based on the screen dimensions and aspect ratio.

responsiveScreenHeight(h: number)

Returns the percentage value of the provided height based on the larger dimension of the screen (including safe area).

responsiveScreenWidth(w: number)

Returns the percentage value of the provided width based on the smaller dimension of the screen (including safe area).

horizontalScale(size: number)

Scales the given size based on the current screen width relative to a base width (guidelineBaseWidth).

verticalScale(size: number)

Scales the given size based on the current screen height relative to a base height (guidelineBaseHeight).

moderateScale(size: number, factor: number = 0.5)

Scales the given size with moderation, applying a factor to adjust the scaling amount based on the screen width.

Aliases

• h(h: number): Alias for responsiveHeight(h).
• w(w: number): Alias for responsiveWidth(w).
• f(f: number): Alias for responsiveFontSize(f).
• sh(h: number): Alias for responsiveScreenHeight(h).
• sw(w: number): Alias for responsiveScreenWidth(w).
• m(size: number, factor: number = 0.5): Alias for moderateScale(size, factor).

License

This project is licensed under the ISC License.

Author

Aditya Shinde