npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@lomray/react-native-responsive

v2.2.0

Published

React native responsive manager.

Downloads

111

Readme

React Native Responsive

npm GitHub

Quality Gate Status Reliability Rating Security Rating Vulnerabilities Lines of Code Coverage

Why is this library useful?

For the layout to look the same proportions on any device, we can’t just use pixel values for padding and sizes.

The best way is to convert pixels to screen percentages.

Only in this case will each element of the design look in the same proportions, regardless of how wide or elongated the device’s screen is.

There is also a built-in ability to set styles for different orientations conveniently.

How it works?

We most often know the dimensions of the device on which the design was made (for example, in Figma).

Therefore, relative to the maximum height and width of the device, we can calculate what percentage of the width or height should be occupied by a specific layout element.

Installation

npm or yarn

npm install --save @lomray/react-native-responsive

yarn add @lomray/react-native-responsive

How to use

Initialize ResponsiveManager with your device parameters by design to get helper functions.

/**
 * src/services/responsive-manager.ts
 */
import { ResponsiveManager } from '@lomray/react-native-responsive';

const { fs, hp, wp } = new ResponsiveManager({ height: 844, width: 390 });

export { fs, hp, wp };

| Helper | Description | |:-------|:-----------------------------------------------------------------------| | wp | Calculates width value from px to independent pixel (screen percent). | | hp | Calculates height value from px to independent pixel (screen percent). | | fs | Works as 'wp', but for the fonts size. |

Each function has the same parameters: (value: number, disableRatio = false) => number.

By default, DIMENSIONS_RATIO is used to reduce the layout for devices with larger screens.

Therefore, we don't need to do the layout based on breakpoints with these helpers. But we still have the option to disable this for specific layout cases.

More details can be found in src/constants:getDimensionsRatio.

Demo project

1. Base example (without orientation changing).

1.1. Create styles.

import { StyleSheet } from 'react-native';
import { fs, hp, wp } from '@services/responsive-manager';

const styles = StyleSheet.create({
  section: {
    paddingHorizontal: wp(24),
    height: hp(200),
    margin: hp(5),
    width: wp(380),
  },
  title: {
    fontSize: fs(24),
    fontWeight: '600',
  },
});

export default styles;

1.2. Use created styles in the component.

import React, { FC } from 'react';
import { Text, View } from 'react-native';
import styles from './styles';

interface ISection {
  title: string;
}

const Section: FC<ISection> = ({ title }) => (
  <View style={styles.section}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

export default Section;

2. Advanced example (with orientation changing).

2.1. Use styles as a function to access additional parameters.

import { TParams } from '@lomray/react-native-responsive';
import { StyleSheet } from 'react-native';
import { fs, hp, wp } from '@services/responsive-manager';

const styles = ({ orientation }: TParams) => StyleSheet.create({
  section: {
    paddingHorizontal: wp(24),
    height: hp(200),
    margin: hp(5),
    justifyContent: 'center',
    borderWidth: 1,
    ...(orientation === 'portrait'
      ? {
        backgroundColor: 'white',
        borderColor: 'black',
      }
      : {
        backgroundColor: 'black',
        borderColor: 'white',
        width: wp(220),
      }),
  },
  title: {
    fontSize: fs(24),
    fontWeight: '600',
    color: orientation === 'portrait' ? 'black' : 'white',
  },
  description: {
    marginTop: hp(8),
    fontSize: fs(18),
    fontWeight: '400',
    color: orientation === 'portrait' ? 'black' : 'white',
  },
});

export default styles;

2.2. Use created styles in the component using the useStyles hook.

import { useStyles } from '@lomray/react-native-responsive';
import React, { FC } from 'react';
import { Text, View } from 'react-native';
import stylesheet from './styles';

interface ISection {
  title: string;
}

const Section: FC<ISection> = ({ title }) => {
  const styles = useStyles(stylesheet);

  return (
    <View style={styles.section}>
      <Text style={styles.title}>{title}</Text>
    </View>
  );
};

export default Section;

3. Additional features.

3.1. Parameters from the component can be passed to the stylesheet.

The parameters will always contain "orientation" and also custom props that you pass by the second argument of the useStyles hook.

/**
 * index.tsx
 */
import { useStyles } from '@lomray/react-native-responsive';
import React from 'react';
import { View } from 'react-native';
import stylesheet from './styles';

const Component = () => {
  const styles = useStyles(stylesheet, { isWhite: true });

  return <View style={styles.wrapper} />;
};


export default Component;
/*
 * styles.ts
 */
import { TParams } from '@lomray/react-native-responsive';
import { StyleSheet } from 'react-native';

interface ICustomParams {
  isWhite: boolean;
}

const styles = ({ isWhite }: TParams<ICustomParams>) => StyleSheet.create({
  wrapper: {
    color: isWhite ? 'white' : 'black',
  },
});

export default styles;