No Preview

Useful responsive utils

A set of useful utilities for responsive design. Bootstrap Docs

mediaQuery

Media Query to check for the grid breakpoint matching current screen size.

• input:

  ({
    up, // media query for this breakpoint and upwards
    down, // media query for this breakpoint and downwards
    exact, // media query for this breakpoint exactly
  }: {
    up: GridBreakpointType;
    down: GridBreakpointType;
    exact: GridBreakpointType;
  }) => boolean,
  Copy

• output:

  boolean; // whether the mediaQuery matches or not
  Copy

• example:

  import { mediaQuery } from 'react-native-flex-grid';
  
  mediaQuery({ up: 'sm' }); // true or false
  mediaQuery({ down: 'md' }); // true or false
  mediaQuery({ exact: 'lg' }); // true or false
  Copy

mediaQueryStyle

Media Query to check for the grid breakpoint matching current screen size and return style.

• input:

  ({
    up, // media query for this breakpoint and upwards
    down, // media query for this breakpoint and downwards
    exact, // media query for this breakpoint exactly
    style, // style object to return if media query matches
  }: {
    up: GridBreakpointType;
    down: GridBreakpointType;
    exact: GridBreakpointType;
    style: Object;
  }) => Object | null,
  Copy

• output:

  Object | null; // returns style object if media query matches or null otherwise
  Copy

• example:

  import { StyleSheet } from 'react-native';
  import { mediaQueryStyle } from 'react-native-flex-grid';
  
  const styles = StyleSheet.create({
    item: {
      backgroundColor: 'blue',
      height: 50,
      ...mediaQueryStyle({ down: 'sm', style: { width: 20 } }), // `{ width: 20 }` or `null`
      ...mediaQueryStyle({ up: 'md', style: { width: 30 } }), // `{ width: 30 }` or `null`
      ...mediaQueryStyle({ exact: 'xl', style: { width: 40 } }), // `{ width: 40 }` or `null`
    },
  });
  
  const Item = () => <View style={styles.item} />;
  Copy