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

rn-utils

v0.0.7

Published

React Native Utilities

Downloads

3

Readme

React Native Utils

npm version

React Native Utilities is a package born out of the incessant rewriting of utility functions while developing scalable and maintainable React Native applications. It aims to be a repository that holds trivial yet useful utility functions that are most times copied over/recreated in every new React Native project.

Installation

npm install rn-utils --save

Utilities

Dimensions

| Function | Usage | Utility | |-----------|-------|---------| | getDeviceHeight | RNUtils.getDeviceHeight() | Returns the device's current viewport height. | | getDeviceWidth | RNUtils.getDeviceWidth() | Returns the device's current viewport width. |

Orientation

Currently the only 3rd party package with native dependecies used by React Native Utilities is the React Native Orientation module. If you wish to use any of the Orientation functionalities of React Native Utils, remember to link its native dependencies.

react-native link react-native-orientation

| Function | Usage | Utility | |-----------|-------|---------| | addOrientationListener | RNUtils.addOrientationListener((orientation) => this.setState({ orientation })) | Creates an event listener that triggers whenever the orientation of the device changes. | | getOrientation | RNUtils.getOrientation() | Function that returns the current device's orientation. It uses getInitialOrientation method from React Native Orientation module to allow for Async/Initial orientation checks. Orientation will either return LANDSCAPE or PORTRAIT. | | isLandscape | RNUtils.isLandscape(orientation) | Helper that returns true if current device orientation is Landscape. The orientation argument must be passed. This is usually used with the addOrientationListener or getOrientation utility functions. | | lockLandscape | RNUtils.lockLandscape() | Locks the device's viewport to the Landscape mode. Disables portrait. | | lockPortrait | RNUtils.lockPortrait() | Locks the device's viewport to the Portrait mode. Disables landscape. | | unlockOrientations | RNUtils.unlockOrientations() | Unlocks any previous locking behavior applied by lockPortrait or lockLandscape. |

Text Helpers

| Function | Usage | Utility | |-----------|-------|---------| | getFontSize | textHelpers.getFontSize(size) | Returns a font size based on size argument | | getLineHeight | textHelpers.getLineHeight(size) | Returns a line height based on size argument | | getFontStyles | textHelpers.getFontStyles(size) | Returns an object with a font size and line height based on size argument |

Example Usage

import TextHelpers from 'rn-utils'

const fontSizes = {small: 8, medium: 12};
const lineHeights = {small: 12, medium: 16};

const textHelpers = new TextHelpers(fontSizes, lineHeights);

const fontStyles = {
  ...textHelpers.getFontStyles('small');
}

Roadmap

The aim for this package is to introduce an ever growing list of React Native utilities that can be used when developing real-world scalable applications. With that in mind, below is the list of items I'd like to tackle next. These could be full rewrites of utilities or extracting it from current React Native projects.

  • [x] Font Sizes / Line Heights
  • [ ] Legacy Operating Systems
  • [ ] Themes (?)
  • [ ] Animations (?)

Contributing & PRs

If you believe you have a utility that should be added to this list, please submit a Pull Request and I'll evaluate whether it should be merged. At this moment, I'd like to stay away from integrating other 3rd party libraries that have native dependencies as it creates yet another abstraction on top of those modules (harder to debug).

Issues

If you face issues while using this package, please open an issue on the Issues Tab. I'll try to resolve them as soon as possible.


MIT LICENSED