# easy-responsive-dimensions

> easy responsive dimensions is a react native package that helps you to make responsive UI components and responsive font size whose it's size can be changed according to the size of the device screen

Latest version **0.0.3** (published 2021-05-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install easy-responsive-dimensions
pnpm add easy-responsive-dimensions
yarn add easy-responsive-dimensions
bun add easy-responsive-dimensions
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2021-05-12 |
| First published | 2021-05-07 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Hossam Abdel-Aziz |
| Maintainers | hossam.elgzeery |
| Keywords | react-native, react, native, responsive, dimensions, size, easy |

## Links

- npm: https://www.npmjs.com/package/easy-responsive-dimensions
- npm.io page: https://npm.io/package/easy-responsive-dimensions

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.3 (latest) — 2021-05-12
- 0.0.2 — 2021-05-07
- 0.0.1 — 2021-05-07

## README

<div align="center">
  
# :iphone: Easy Responsive Dimensions :fist:

:blue_book: **[Description](#description)**

:star: **[What is new ?](#what-is-new-)**

:zap: **[Installation](#installation)**

:key: **[Usage](#usage)**

:page_facing_up: **[Examples](#examples)**

[![npm](https://img.shields.io/npm/dw/easy-responsive-dimensions)]()
[![npm](https://img.shields.io/npm/v/easy-responsive-dimensions?color=green&label=Latest%20Version)]()

[![Twitter Follow](https://img.shields.io/twitter/follow/HossamElgzeery?label=Follow%20Me&style=social)](https://www.twitter.com/HossamElgzeery)

</div>

# Description

easy responsive dimensions is a react native package that helps you to make responsive UI components and responsive font size whose it's size can be changed according to the size of the device screen

# What is new ?

- **version 0.0.3** : adding responsive font size , and Documentation comments for easy usage

# Installation

```
#npm
npm install easy-responsive-dimensions

#yarn
yarn add easy-responsive-dimensions

```

# Usage

- you just need to pass the percentage of the screen height and width to generate the correct size (height, width or both) of the component

  - you have two types of height and width
    - screen height "**AHeight**" and width "**AWidth**" which include the size used by the status bar (if not translucent) and bottom navigation bar
    - window height "**Height**" and width "**Width**" which exclude the size used by the status bar (if not translucent) and bottom navigation bar

- for responsive font size you just need to pass the percentage to "**RFSize**" function

# Examples

## Package Import :

```javascript
import getResDimensions, {
  RAHeight,
  RAWidth,
  RHeight,
  RWidth,
  RFSize,
} from "easy-responsive-dimensions";
```

## First Example :

```javascript
import getResDimensions from "easy-responsive-dimensions";

const ResponsiveComponent = () => {
  const { Height, Width, AHeight, AWidth, FontSize } = getResDimensions(
    50,
    50,
    10
  );
  return (
    <View style={{ width: Width, height: Height, backgroundColor: "grey" }}>
      <Text style={{ fontSize: FontSize }}>Hello</Text>
    </View>
  );
};
```

## Second Example :

```javascript
import {
  RAHeight,
  RAWidth,
  RHeight,
  RWidth,
  RFSize,
} from "easy-responsive-dimensions";

const ResponsiveComponent = () => {
  return (
    <View style={styles.responsiveComponentStyle}>
      <Text style={styles.textStyles}>Hello</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  responsiveComponentStyle: {
    height: RHeight(80),
    width: RWidth(50),
    backgroundColor: "grey",
  },
  textStyles: {
    fontSize: RFSize(10),
  },
});
```

---
_Source: https://npm.io/package/easy-responsive-dimensions · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._