https://github.com/eightyfive/react-native-spacing
[DEPRECATED] React Native View spacing utility
https://github.com/eightyfive/react-native-spacing
Last synced: 10 months ago
JSON representation
[DEPRECATED] React Native View spacing utility
- Host: GitHub
- URL: https://github.com/eightyfive/react-native-spacing
- Owner: eightyfive
- License: mit
- Created: 2021-01-04T17:48:19.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-07-06T17:09:43.000Z (almost 4 years ago)
- Last Synced: 2025-07-28T00:05:17.221Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 114 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `react-native-spacing`
Consitent React Native spacing utility.
## [DEPRECATED]
Use [`react-native-themesheet`](https://github.com/eightyfive/react-native-themesheet) + [`react-native-col`](https://github.com/eightyfive/react-native-col) instead.
## Installation
```
yarn add react-native-spacing
```
## Usage
```js
// src/theme.js
import { createMargin, createPadding } from 'react-native-spacing';
const sizes = [0, 5, 10, 20, 40, 80, 160];
export const m = createMargin(sizes);
export const p = createPadding(sizes);
// src/components/foo.js
import { View } from 'react-native';
import { m, p } from '../theme';
const $ = {
container: {
...m[6],
...p.v4,
},
};
// --> { margin: 160, marginBottom: 0, paddingVertical: 40 }
export default function Foo({ style, ...rest }) {
return ;
// --> ... + { marginBottom: 0 }, { paddingTop: 0 } + style
}
```
## Documentation
### `createMargin(sizes, aliases)`
```js
import { createMargin } from 'react-native-spacing';
const m = createMargin([0, 4, 8, 16, 32]);
m[1]; // --> { margin: 4 }
m[4]; // --> { margin: 32 }
m.v2; // --> { marginVertical: 8 }
m.b3; // --> { marginBottom: 16 }
// Etc...
```
You can pass custom aliases like so:
```js
const m = createMargin([0, 10, 20, 40, 80], {
T: 'Top',
R: 'Right',
B: 'Bottom',
L: 'Left',
Y: 'Vertical',
X: 'Horizontal',
});
m.Y2; // --> { marginVertical: 20 }
m.B3; // --> { marginBottom: 40 }
// Etc...
```
### `createPadding(sizes, aliases)`
```js
import { createPadding } from 'react-native-spacing';
const p = createPadding([0, 4, 8, 16, 32]);
p[4]; // --> { padding: 32 }
// Same as above...
```