1594114740
Using margin and padding to control spacing between components introduces too many ways to accomplish the same goal. React Native Spacing System seeks to standardize your React Native code and increase legibility though the usage of spacing components.
Factory method are provided so that you can use your own spacing key instead of raw value.
TypeScript and Flow are both supported!
npm install react-native-spacing-system
or
yarn add react-native-spacing-system
Inspired by Nathan Curtis’s Medium article Space In Design Systems and this react-spacing library by Nathan Winder, I figured I’d do something similar for React Native with slight tweaks.
![]() |
![]() |
For the full sentiment and rationalization, please check out my Medium blog post: Enforcing Component Spacing in React & React Native.
Stack
is a vertical spacing component, think of a pile of plates at a buffet.
Stack takes size: number
, debug?: boolean
and debugOptions?: {color?: string, border?: boolean, borderColor?: string, opacity?: number}
.
import * as React from "react";
import { View } from 'react-native';
import { Stack } from "react-native-spacing-system";
import { BuffetPlates } from "./BuffetPlates";
import { KitchenCounter } from "./KitchenCounter";
/*
Creates a vertical space with size of 16 between
<BuffetPlates /> and <KitchenCounter /> components.
*/
const QueueExample = () => {
return (
<View>
<BuffetPlates />
<Stack size={16} />
<BuffetPlates />
<Stack size={16} />
<KitchenCounter />
</View>
);
Queue
is a horizontal spacing component, think of people queueing for that new bubbletea joint.
Queue takes size: number
, debug?: boolean
and debugOptions?: {color?: string, border?: boolean, borderColor?: string, opacity?: number}
.
import * as React from "react";
import { View } from "react-native";
import { Queue } from "react-native-spacing-system";
import { BubbleTeaJoint } from "./BubbleTeaJoint";
import { PatientPatron } from "./PatientPatron";
/*
Creates a horizontal space with size of 16 between
<BubbleTeaJoint /> and <PatientPatron /> components.
Only works when flex direction is row.
*/
const StackExample = () => {
return (
<View style={{ flexDirection: "row" }}>
<BubbleTeaJoint />
<Queue size={16} />
<PatientPatron />
<Queue size={16} />
<PatientPatron />
</View>
);
};
Inset
is a boundary spacing component, think of adding frames around a picture (the child).
Inset takes children: ReactNode
, debug?: boolean
, debugOptions?: {color?: string}
, flex?: number
, and paddings: PaddingCombinations
.
The allowed PaddingCombinations
are as follows:
{all: number}
{horizontal: number, vertical: number}
{horizontal: number, bottom?: number, top?: number}
{vertical: number, left?: number, right?: number}
{left?: number, top?: number, right?:number, bottom: number}
import * as React from "react";
import { Inset } from "react-native-spacing-system";
import { PictureNeedingAFrame } from "./PictureNeedingAFrame";
/*
Creates a padding of size 16 around
the <PictureNeedingAFrame /> component.
*/
const InsetExample = () => {
return (
<Inset all={16}>
<PictureNeedingAFrame />
</Inset>
);
};
Create your own spacing component with custom keys by passing in the space mapping object into the factory method provided.
stackFactory()
queueFactory()
insetFactory()
import { stackFactory } from "react-native-spacing-system";
const spacing = {
tall: 8,
grande: 12,
venti: 16
};
const Stack = stackFactory(spacing);
<Stack size={16}/> // Error
<Stack size="venti"/> // Works
spacingFactory
If the spacing object is expected to be used in all Stack
, Queue
, and Inset
, spacingFactory
can be used to create the components in one function.
import { spacingFactory } from "react-native-spacing-system";
const spacing = {
tall: 8,
grande: 12,
venti: 16,
};
const { Stack, Queue, Inset } = spacingFactory(spacing);
Depending on your version of flow, you may have to pass in the type of your space object.
/* @flow */
import { stackFactory } from "react-native-spacing-system";
type SpacingKey = 'tall' | 'grande' | 'venti'
type Spacing = {[key: SpacingKey]: number}
const spacing: Spacing = {
tall: 8,
grande: 12,
venti: 16
};
const Stack = stackFactory<Spacing>(spacing);
<Stack size={16}/> // Error
<Stack size="venti"/> // Works
Each component supports a debug mode where their spacing is highlighted.
Import the DebugContext
and use the Provider
to toggle debug mode on and off.
import * as React from "react";
import { DebugContext } from "react-native-spacing-system";
import ComponentWithSpacingSystemComponents from "./ComponentWithSpacingSystemComponents";
const SomeComponent = () => {
return (
<DebugContext.Provider value={{ debug: booleanValue }}>
<ComponentWithSpacingSystemComponents />
</DebugContext.Provider>
);
};
You can also control debug mode of each type of spacing component as well as their border highlighting.
type DebugContextProps = {
debug: boolean;
inset?: {
debug?: boolean;
color?: string;
};
queue?: {
debug?: boolean;
color?: string;
border?: boolean;
borderColor?: string;
opacity?: number;
};
stack?: {
debug?: boolean;
color?: string;
border?: boolean;
borderColor?: string;
opacity?: number;
};
};
type DebugContextProps = {|
debug: boolean,
inset?: {|
debug?: boolean,
color?: string,
|},
queue?: {|
debug?: boolean,
color?: string,
border?: boolean,
borderColor?: string,
opacity?: number,
|},
stack?: {|
debug?: boolean,
color?: string,
border?: boolean,
borderColor?: string,
opacity?: number,
|},
|};
Author: hirokazutei
GitHub: https://github.com/hirokazutei/react-native-spacing-system
#react-native #react #mobile-apps
1619018024
At Worknomic coworking space, we provide the basic amenities like high-speed internet, a cafeteria, opera-terrace gym, meeting rooms, seminar and event rooms, storage space, thinking pods, and many more. We provide access to coworkers so they can customize their spacer as per their choice and requirements.
#best coworking space in noida #best leased space in noida #coworking space for the freelancers in noida #best coworking space in noida #worknomic
1591914960
Introduction
In our last tutorials we computed the position and velocity vectors of different celestial objects. We determined the apparent angular distance between objects (so called phase-angle) and worked on some small projects using Python and the NASA library SPICE (using the SPICE wrapper spiceypy).
#space-science-with-python #science #space #programming #pyhton
1624599189
There are many office spaces for rent in Singapore, but few are as affordable and flexible as GreenHub Singapore.
#office spaces #office spaces for rent #office spaces for rent in singapore
1592536680
Standard Deviation
Standard deviation measures the dispersion(variability) of the data in relation to the mean. In simple terms, the closest to zero the standard deviation is the more close to the mean the values in the studied dataset are. As mentioned in a previous article here for normally distributed data, the standard distribution gives us valuable information in terms of the percentage of data lying within 1, 2, 3 standard deviations from the mean.
Standard Error
There will be, of course, different means for different samples(from the same population), this is called “sampling distribution of the mean”. This variance between the means of different samples can be estimated by the standard deviation of this sampling distribution and it is the standard error of the estimate of the mean. Now, this is where everybody gets confused, the standard error is a type of standard deviation for the distribution of the means.
#standard-deviation #standard-error #data-science
1594114740
Using margin and padding to control spacing between components introduces too many ways to accomplish the same goal. React Native Spacing System seeks to standardize your React Native code and increase legibility though the usage of spacing components.
Factory method are provided so that you can use your own spacing key instead of raw value.
TypeScript and Flow are both supported!
npm install react-native-spacing-system
or
yarn add react-native-spacing-system
Inspired by Nathan Curtis’s Medium article Space In Design Systems and this react-spacing library by Nathan Winder, I figured I’d do something similar for React Native with slight tweaks.
![]() |
![]() |
For the full sentiment and rationalization, please check out my Medium blog post: Enforcing Component Spacing in React & React Native.
Stack
is a vertical spacing component, think of a pile of plates at a buffet.
Stack takes size: number
, debug?: boolean
and debugOptions?: {color?: string, border?: boolean, borderColor?: string, opacity?: number}
.
import * as React from "react";
import { View } from 'react-native';
import { Stack } from "react-native-spacing-system";
import { BuffetPlates } from "./BuffetPlates";
import { KitchenCounter } from "./KitchenCounter";
/*
Creates a vertical space with size of 16 between
<BuffetPlates /> and <KitchenCounter /> components.
*/
const QueueExample = () => {
return (
<View>
<BuffetPlates />
<Stack size={16} />
<BuffetPlates />
<Stack size={16} />
<KitchenCounter />
</View>
);
Queue
is a horizontal spacing component, think of people queueing for that new bubbletea joint.
Queue takes size: number
, debug?: boolean
and debugOptions?: {color?: string, border?: boolean, borderColor?: string, opacity?: number}
.
import * as React from "react";
import { View } from "react-native";
import { Queue } from "react-native-spacing-system";
import { BubbleTeaJoint } from "./BubbleTeaJoint";
import { PatientPatron } from "./PatientPatron";
/*
Creates a horizontal space with size of 16 between
<BubbleTeaJoint /> and <PatientPatron /> components.
Only works when flex direction is row.
*/
const StackExample = () => {
return (
<View style={{ flexDirection: "row" }}>
<BubbleTeaJoint />
<Queue size={16} />
<PatientPatron />
<Queue size={16} />
<PatientPatron />
</View>
);
};
Inset
is a boundary spacing component, think of adding frames around a picture (the child).
Inset takes children: ReactNode
, debug?: boolean
, debugOptions?: {color?: string}
, flex?: number
, and paddings: PaddingCombinations
.
The allowed PaddingCombinations
are as follows:
{all: number}
{horizontal: number, vertical: number}
{horizontal: number, bottom?: number, top?: number}
{vertical: number, left?: number, right?: number}
{left?: number, top?: number, right?:number, bottom: number}
import * as React from "react";
import { Inset } from "react-native-spacing-system";
import { PictureNeedingAFrame } from "./PictureNeedingAFrame";
/*
Creates a padding of size 16 around
the <PictureNeedingAFrame /> component.
*/
const InsetExample = () => {
return (
<Inset all={16}>
<PictureNeedingAFrame />
</Inset>
);
};
Create your own spacing component with custom keys by passing in the space mapping object into the factory method provided.
stackFactory()
queueFactory()
insetFactory()
import { stackFactory } from "react-native-spacing-system";
const spacing = {
tall: 8,
grande: 12,
venti: 16
};
const Stack = stackFactory(spacing);
<Stack size={16}/> // Error
<Stack size="venti"/> // Works
spacingFactory
If the spacing object is expected to be used in all Stack
, Queue
, and Inset
, spacingFactory
can be used to create the components in one function.
import { spacingFactory } from "react-native-spacing-system";
const spacing = {
tall: 8,
grande: 12,
venti: 16,
};
const { Stack, Queue, Inset } = spacingFactory(spacing);
Depending on your version of flow, you may have to pass in the type of your space object.
/* @flow */
import { stackFactory } from "react-native-spacing-system";
type SpacingKey = 'tall' | 'grande' | 'venti'
type Spacing = {[key: SpacingKey]: number}
const spacing: Spacing = {
tall: 8,
grande: 12,
venti: 16
};
const Stack = stackFactory<Spacing>(spacing);
<Stack size={16}/> // Error
<Stack size="venti"/> // Works
Each component supports a debug mode where their spacing is highlighted.
Import the DebugContext
and use the Provider
to toggle debug mode on and off.
import * as React from "react";
import { DebugContext } from "react-native-spacing-system";
import ComponentWithSpacingSystemComponents from "./ComponentWithSpacingSystemComponents";
const SomeComponent = () => {
return (
<DebugContext.Provider value={{ debug: booleanValue }}>
<ComponentWithSpacingSystemComponents />
</DebugContext.Provider>
);
};
You can also control debug mode of each type of spacing component as well as their border highlighting.
type DebugContextProps = {
debug: boolean;
inset?: {
debug?: boolean;
color?: string;
};
queue?: {
debug?: boolean;
color?: string;
border?: boolean;
borderColor?: string;
opacity?: number;
};
stack?: {
debug?: boolean;
color?: string;
border?: boolean;
borderColor?: string;
opacity?: number;
};
};
type DebugContextProps = {|
debug: boolean,
inset?: {|
debug?: boolean,
color?: string,
|},
queue?: {|
debug?: boolean,
color?: string,
border?: boolean,
borderColor?: string,
opacity?: number,
|},
stack?: {|
debug?: boolean,
color?: string,
border?: boolean,
borderColor?: string,
opacity?: number,
|},
|};
Author: hirokazutei
GitHub: https://github.com/hirokazutei/react-native-spacing-system
#react-native #react #mobile-apps