@lomray/react-native-layout-helper

React Native Layout Helper

Library based on https://github.com/marudy/react-native-responsive-screen

Calculator program

To simplify calculations, it is better to use the program

Installation

npm or yarn

npm install --save @lomray/react-native-layout-helper

yarn add @lomray/react-native-layout-helper

Helper functions

Function name	Types	Description
isIOS	boolean	Check if platform is IOS
isAndroid	boolean	Check if platform is Android
wp	(widthPercent: number, disableRatio = false) => number	Converts provided width percentage to independent pixel (dp). Disable ratio is intended for some cases when the width on tablets should be the full width of the screen
hp	(heightPercent: number) => number	Converts provided height percentage to independent pixel (dp).
fs	(fontPercent: number) => number	Converts provided font size percentage to independent pixel (dp). Calculates based on the current screen width (including orientation)
orIsP	boolean	Check if orientation is portrait
orIsL	boolean	Check if orientation is landscape
lor	(that: Component, callback: (val: Component) => void	Event listener function that detects orientation change
rol	() => void	Wrapper function that removes orientation change listener
makePadding	(top: number, right?: number, bottom?: number, left?: number) => ({ paddingTop, paddingRight, paddingBottom, paddingLeft })	Make paddings

Basic example

The calculations in this example are made for an iPhone X screen 812x375

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { fs, hp, wp } from '@lomray/react-native-layout-helper';

const styles = StyleSheet.create({
  viewBlock: {
    paddingVertical: hp(1.478), // 12
    marginBottom: hp(3.941), // 32
    width: wp(56.267), // 211
  },
  text: {
    fontSize: fs(4.8), // 18
    lineHeight: fs(5.333), // 20
  },
  disableRatioWidth: {
    width: wp(100, true), // 375
  },
});

class Example extends Component {
  render() {
    return (
      <View style={styles.disableRatioWidth}>
        <View style={styles.viewBlock}>
          <Text style={styles.text}>Example</Text>
        </View>
      </View>
    );
  }
};

Change orientation example

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { fs, hp, wp, lor, rol, orIsP } from '@lomray/react-native-layout-helper';

const stylesF = () => StyleSheet.create({
  viewBlock: {
    paddingVertical: hp(1.478), // 12
    marginBottom: hp(3.941), // 32
    width: wp(56.267), // 211
    height: orIsP ? hp(3.5) : wp(5.5),
  },
  text: {
    fontSize: fs(4.8), // 18
    lineHeight: fs(5.333), // 20
  },
  disableRatioWidth: {
    width: wp(100, true), // 375
  },
});

let styles = stylesF();

class Example extends Component {
  componentDidMount() {
    lor(this, () => {
      styles = stylesF();
    });
  }

  componentWillUnmount() {
    rol();
  }

  render() {
    return (
      <View style={styles.disableRatioWidth}>
        <View style={styles.viewBlock}>
          <Text style={styles.text}>Example</Text>
        </View>
      </View>
    );
  }
};