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

react-native-style-queries

v0.1.1

Published

React Native responsive design

Downloads

19

Readme

react-native-style-queries

Declarative responsive design for React Native. react-native-style-queries allows you to specify styles for different conditions such as screen sizes and dark mode in a simple declarative way, inspired by CSS media queries:

import {useStyleQueries, screenWidthMin} from 'react-native-style-queries';

function MyComponent() {
  const styles = useStyleQueries(styleQueries);

  return (
    <Text style={styles.componentA}>Component A</Text>
  );
}

const styleQueries = {
  componentA: [
    { fontSize: 12 }, // defaults

    screenWidthMin(375, {
      fontSize: 16,
    }),
  ],
};

Installation

yarn add react-native-style-queries

or

npm install --save react-native-style-queries

Usage

Using react-native-style-queries involves two steps:

  1. Configuring your conditional styles outside a component.
  2. Passing the configuration to the useStyleQueries() hook within a component, which returns an object containing normal React Native styles that can be passed to the style prop of components.

Here's what configuring conditional styles looks like:

import {screenWidthMin} from 'react-native-style-queries';

// at the root of the JavaScript file, outside of any component
const conditionalStyles = {
  myComponentA: [
    { fontSize: 12 },

    screenWidthMin(375, {
      fontSize: 16,
    }),

    screenWidthMin(600, {
      fontSize: 20,
    }),
  ],

  myComponentB: {
    fontSize: 12,
  },
};

Note the following:

  • Like with React Native StyleSheet.create() calls, conditional styles are defined outside of a component, at the root of the file.
  • A conditional styles object can contain multiple named styles, just like a StyleSheet. The value of a named style can be a simple style object, but it can also be an array.
  • That array can contain simple style objects, in which case those styles are always applied.
  • The array can also contain calls to style query functions such as screenWidthMin(). Style query functions check the condition you specify and apply the styles only when that condition is met. For example, screenWidthMin(375, styles) will only apply styles when the screen width is greater than or equal to 375 pixels.

To use these conditional styles within a component:

import {useStyleQueries} from 'react-native-style-queries';

function MyComponent() {
  const styles = useStyleQueries(styleQueries);

  return (
    <>
      <Text style={styles.myComponentA}>Component A</Text>
      <Text style={styles.myComponentB}>Component B</Text>
    </>
  );
}

When any device info changes (such as screen dimensions based on device rotation), useStyleQueries() will cause the component to rerender, recomputing the styles.

Style Query Functions

The following style query functions are exported by react-native-style-queries:

  • screenWidthMin(widthInPixels, styles)
  • screenWidthMax(widthInPixels, styles)
  • screenHeightMin(heightInPixels, styles)
  • screenHeightMax(heightInPixels, styles)
  • colorScheme(scheme, styles) - values of scheme are the values of the React Native useColorScheme hook: "light", "dark", or null

To learn more about how style query functions work or how to define your own custom logic, see Conditional Styles.

Alternatives

The following are other approaches to responsive design in React Native:

  • You can manually create style objects based on the return values of hooks like useWindowDimensions and useColorScheme. This tends to be fairly verbose and can clutter up your logic.
  • react-native-size-matters allows automatically scaling measurements for different screen sizes. This is a different approach from using breakpoints, an appraoch that is common on the web and that react-native-style-queries also takes.
  • react-native-media-query is directly modeled after CSS media queries. One limitation it has, though, is that it doesn't automatically rerender to handle device rotations. It also implements queries within strings that closely match CSS media query syntax, whereas react-native-style-queries uses plain functions to avoid a layer of indirection and allow writing arbitrary JavaScript logic.

To learn more about how we landed on react-native-style-queries' API design, see API Design.

Example

An example React Native app using react-native-style-queries can be found in the example/ directory.

License

MIT