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

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

<Meta title="utils/grid" />

### Modifying Grid Configuration

The grid is 100% modifiable, all values can be found in the config object in `src/utils/grid`. [Bootstrap Docs](https://getbootstrap.com/docs/5.0/layout/grid)

```js
/** Grid configuration */
let GRID_CONFIG: GRID_CONFIG_TYPE = {
  /** Grid Breakpoints */
  breakpoints: {
    xs: 0,
    sm: 375,
    md: 768,
    lg: 1024,
    xl: 1200,
  },
  /** Grid column count */
  colCount: 12,
  /** Common gutters used */
  gutters: {
    0: 0,
    1: SPACER * 0.25,
    2: SPACER * 0.5,
    3: SPACER,
    4: SPACER * 1.5,
    5: SPACER * 3,
  },
  /** Container max widths */
  containerMaxWidths: {
    xs: '100%',
    sm: '100%',
    md: '100%',
    lg: '100%',
    xl: 1140,
  },
  /** Container paddings horizontal */
  containerPaddingsHorizontal: {
    xs: 16,
    sm: 20,
    md: 40,
    lg: 48,
    xl: 48,
  },
};
```

To modify grid configuration, add these lines somewhere in your app before rendering the grid, eg: in App.js or in wrapper components:

```js
import { setConfig } from 'react-native-flex-grid';

setConfig({
  breakpoints: {
    xs: 0,
    sm: 390,
    md: 768,
    lg: 1024,
    xl: 1024,
  },
  colCount: 4,
  gutters: {
    0: 0,
    1: 4,
    2: 8,
    3: 12,
    4: 16,
    5: 20,
  },
});
```

example for wrapping library with a custom config:

```ts
// Layout.ts
import { setConfig } from 'react-native-flex-grid';

/** Base spacer -- equivalent to HTML font-size and rem */
const SPACER = 16;

/** override react-native-flex-grid config */
setConfig({
  /** Grid Breakpoints */
  breakpoints: {
    xs: 0,
    sm: 375,
    md: 768,
    lg: 1024,
    xl: 1200,
  },
  /** Grid column count */
  colCount: 12,
  /** Common gutters used */
  gutters: {
    0: 0,
    1: SPACER * 0.25,
    2: SPACER * 0.5,
    3: SPACER,
    4: SPACER * 1.5,
    5: SPACER * 3,
  },
  /** Container max widths */
  containerMaxWidths: {
    xs: '100%',
    sm: '100%',
    md: '100%',
    lg: '100%',
    xl: 1140,
  },
  /** Container paddings horizontal */
  containerPaddingsHorizontal: {
    xs: 16,
    sm: 20,
    md: 40,
    lg: 48,
    xl: 48,
  },
});

// export all from react native flex grid, now this file becomes our new entry point.
// later we can: `import { Container, Row, Col } from '../Layout'`
export * from 'react-native-flex-grid';
```

#### API

- getConfig: returns config object
- setConfig: modifies config object