react-native-flex-grid/src/utils/responsive.stories.mdx

🎨 A react-native flexbox grid similar to bootstap's web grid.

<Meta title="utils/responsive" />

### Useful responsive utils

A set of useful utilities for responsive design. [Bootstrap Docs](https://getbootstrap.com/docs/5.0/layout/breakpoints)

#### mediaQuery

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

- input:
  ```ts
  ({
    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,
  ```
- output:
  ```ts
  boolean; // whether the mediaQuery matches or not
  ```
- example:

  ```ts
  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
  ```

#### mediaQueryStyle

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

- input:
  ```ts
  ({
    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,
  ```
- output:
  ```ts
  Object | null; // returns style object if media query matches or null otherwise
  ```
- example:

  ```ts
  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} />;
  ```