Skip to content

Instantly share code, notes, and snippets.

@eightyfive
Last active November 23, 2020 20:55
Show Gist options
  • Save eightyfive/1de004712440d2ca898ce70a4decbe1a to your computer and use it in GitHub Desktop.
Save eightyfive/1de004712440d2ca898ce70a4decbe1a to your computer and use it in GitHub Desktop.
Simple react-native spacing strategy: `mb[3]`, `px[0]`, ...
import { StyleSheet } from 'react-native';
export const sizes = [0, 4, 8, 16, 32, 64, 128];
// https://stackoverflow.com/a/56219676/925307
const make = (key, sizes) => sizes.map((size) => ({ [key]: size }));
export const m = make('margin', sizes);
export const mt = make('marginTop', sizes);
export const mr = make('marginRight', sizes);
export const mb = make('marginBottom', sizes);
export const ml = make('marginLeft', sizes);
export const mx = make('marginHorizontal', sizes);
export const my = make('marginVertical', sizes);
export const p = make('padding', sizes);
export const pt = make('paddingTop', sizes);
export const pr = make('paddingRight', sizes);
export const pb = make('paddingBottom', sizes);
export const pl = make('paddingLeft', sizes);
export const px = make('paddingHorizontal', sizes);
export const py = make('paddingVertical', sizes);
// https://reactnative.dev/docs/stylesheet#setstyleattributepreprocessor
[
'margin',
'marginTop',
'marginRight',
'marginBottom',
'marginLeft',
'marginHorizontal',
'marginVertical',
'padding',
'paddingTop',
'paddingRight',
'paddingBottom',
'paddingLeft',
'paddingHorizontal',
'paddingVertical',
].forEach((key) =>
StyleSheet.setStyleAttributePreprocessor(key, (val) => sizes[val] || val)
);
{
"dir": "app/views"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment