2
A media query hook to manage responsive react native app for multiple platforms...
source link: https://reactnativeexample.com/a-media-query-hook-to-manage-responsive-react-native-app-for-multiple-platforms-and-orientation/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
A media query hook to manage responsive react native app for multiple platforms and orientation
Jun 06, 2022
2 min read
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
yarn add rn-media-query-hook
import useMediaQuery from "rn-media-query-hook";
// In functional component
const { mediaQuery, mediaQueryLogic } = useMediaQuery();
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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK