A media query hook to manage responsive react native app for multiple platforms and orientation

by React Native Example

rn-media-query-hook

React Native Media Query Hook

Demo :

https://snack.expo.dev/@fateh999/rn-media-query-hook

Steps to install :

npm install rn-media-query-hook

or

yarn add rn-media-query-hook

import useMediaQuery from "rn-media-query-hook";

// In functional component
const { mediaQuery, mediaQueryLogic } = useMediaQuery();

or

import useMediaQuery from "rn-media-query-hook";

// In functional component
const { mQ, mQL } = useMediaQuery();

Usage :

// For dimensions
const responsiveWidth = mQ([100, 200, 300, 400, 500]);

// order is important [base, sm, md, lg, xl]

// or

const responsiveWidth = mQ({ base: 100, sm: 200, md: 300, lg: 400, xl: 500 });

// For any logic
const show = mQL([true, true, true, false, false]);

// order is important [base, sm, md, lg, xl]

// or

const show = mQ({ base: true, sm: true, md: true, lg: false, xl: false });

Default Breakpoints :

const initialBreakPoints: BREAK_POINTS = {
  base: 0,
  sm: 480,
  md: 768,
  lg: 992,
  xl: 1280,
};

Custom Breakpoints :

const newBreakPoints: BREAK_POINTS = {
  base: 0,
  sm: 380,
  md: 868,
  lg: 892,
  xl: 1180,
};

// In functional component

const { mediaQuery, mediaQueryLogic } = useMediaQuery(newBreakPoints);

Note :

  • Only base dimension or logic is required, rest are optional

GitHub

View Github