React native responsive query

Responsive style hook for React Native apps.

Why?

  • This hook aims to provide an API that can be useful for universal design systems like dripsy, NativeBase and React Native apps that uses responsive styling.
  • It transforms styles to CSS media-query on react native web that can be useful for responsive SSR react native web apps.

You might not need this if,

  • You are not using SSR + React Native Web + Responsive Styling.
  • We’re relying on internal RNW functions for injecting + generating styles. (most of these functions are pure (and memoises) but the current injecting solution might not be the cleanest). Checkout source
  • Read more here and evaluate – #1688 and RNW talk

Installation

yarn add react-native-responsive-query

// or

npm install react-native-responsive-query

Usage

import { View } from 'react-native';
import { useResponsiveQuery } from 'react-native-responsive-query';

export default function App() {
  const { dataSet, styles } = useResponsiveQuery({
    initial: {
      backgroundColor: 'yellow',
      height: 200,
      width: 200,
    },
    query: [
      {
        minWidth: 400,
        style: {
          backgroundColor: 'pink',
        },
      },
      {
        minWidth: 1200,
        style: {
          backgroundColor: 'black',
        },
      },
      {
        minWidth: 1600,
        style: {
          backgroundColor: 'purple',
        },
      },
    ],
  });

  return <View dataSet={dataSet} style={styles} />;
}
  • Here, the View will have background color yellow as default, pink when width >= 400, black when width >= 1200, purple when width >= 1600. It’ll have the height and width equals to 200.

API

useResponsiveQuery(params?: UseResponsiveQueryParams)

UseResponsiveQueryParams
  • initial (optional): ReactNativeStyle
  • query: Array<{minWidth: number, maxWidth: number, style: ReactNativeStyle}>

getResponsiveStyles(params?: UseResponsiveQueryParams)

  • useResponsiveQuery also returns a function named getResponsiveStyles for cases where a hook might be inconvenient.

import { View } from 'react-native';
import { useResponsiveQuery } from 'react-native-responsive-query';

export default function App() {
  const { getResponsiveStyles } = useResponsiveQuery();

  const { dataSet, styles } = getResponsiveStyles({
    initial: {
      height: 200,
      width: 200,
    },
    query: [
      {
        minWidth: 400,
        style: {
          backgroundColor: 'pink',
        },
      },
    ],
  });

  return <View dataSet={dataSet} style={styles} />;
}

Range query

const { getResponsiveStyles } = useResponsiveQuery();

const { dataSet, styles } = getResponsiveStyles({
  initial: {
    height: 200,
    width: 200,
  },
  query: [
    {
      minWidth: 400,
      maxWidth: 800,
      style: {
        backgroundColor: 'pink',
      },
    },
  ],
});

return <View dataSet={dataSet} style={styles} />;
  • Here, background color pink will be applied only when screen width is >= 400 and <= 800.

How it works?

  • It uses dataSet prop to add responsive styling.
  • This library uses some internal/undocumented functions used by React Native web to transform react native styles to web/css styles. Checkout src/useResponsiveQuery.web.ts for comments.

Examples

Credits

  • Thanks to Fernando for the hook idea and helping to shape the hook API ?

Contributing

See the contributing guide to learn how to contribute to the repository and the development

License

MIT

GitHub

View Github