Spacing

Spacing is an easy way to customize the global spacing and sizing scale for your project.

By default, these spacing value can be referenced by the height, width padding, margin, and top, left , right, bottom styles.

This is how spacing works by default:

<Box h={4} w={4} /> // equals to `{ height: 4, width: 4 }`

This is fine for most cases, however, there are some cases where you may want to customize the spacing behavior.

For example, you may want to use a custom spacing multiplier (e.g. Material Design uses multiples of 8 to layout elements) or you may want to use a different unit of measurement (e.g. rem instead of px in case your app works on web).

To do this, you can wrap your app in a SpacingFuncProvider component and pass in a spacingFunc prop.

import { SpacingFuncProvider } from 'react-native-flex-layout';

const App = () => {
  return (
    <SpacingFuncProvider spacingFunc={(spacing) => spacing * 8}>
      <MyApp />
    </SpacingFuncProvider>
  );
};

export default App;

Now the spacing values will be multiplied by 8 when they are referenced.

<Box h={4} w={4} /> // equals to `{ height: 32, width: 32 }`

useSpacing

useSpacing is a hook that returns spacing values for the given size.

import { useSpacing } from 'react-native-flex-layout';

const App = () => {
  const height = useSpacing(2);
  const width = useSpacing(2);

  return <MyCustomComponent style={{ width, height }} />;
};

useSpacingFunc

useSpacingFunc is a hook that returns the current spacing function.

import { useSpacingFunc } from 'react-native-flex-layout';

const App = () => {
  const spacingFunc = useSpacingFunc();

  return (
    <MyCustomComponent
      style={{ width: spacingFunc(2), height: spacingFunc(2) }}
    />
  );
};