Package Exports

easy-responsive-dimensions

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (easy-responsive-dimensions) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Description

easy responsive dimensions is a react native package that can help you to make responsive UI components that it's size can changed accrording to size of device screen

How To Use

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

How to Import

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

Example Code

First Example :

import getResDimensions from "easy-responsive-dimensions";

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

Second Example :

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

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

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