Box.native.ts

import styled from 'styled-components/native';
import { space, layout, position, flexbox, SpaceProps, LayoutProps, PositionProps, FlexboxProps } from 'styled-system';
import { composeNative } from './styledSystem';

export type BoxProps = SpaceProps & LayoutProps & PositionProps & FlexboxProps;

/**
 * A generic container with responsive props to control whitespace, layout, positioning and colors.
 */
export const Box = styled.View<BoxProps>(composeNative(space, layout, position, flexbox));

Box.ts

import styled from 'styled-components/native';
import { space, layout, position, flexbox, SpaceProps, LayoutProps, PositionProps, FlexboxProps } from 'styled-system';
import { composeNative } from './styledSystem';

export type BoxProps = SpaceProps & LayoutProps & PositionProps & FlexboxProps;

/**
 * A generic container with responsive props to control whitespace, layout, positioning and colors.
 */
export const Box = styled.div<BoxProps>(
	{
		boxSizing: 'border-box',
		minWidth: 0,
	},
	compose(
		space,
		layout,
		position,
		flexbox,
	),
);

styledSystem.ts

import { createParser, ResponsiveValue, styleFn, TLengthStyledSystem } from 'styled-system';

type StyleProps = { [prop: string]: ResponsiveValue<TLengthStyledSystem> };

const removeResponsiveProps = (props: StyleProps): StyleProps => {
	const mobileProps: StyleProps = {};
	Object.entries(props).forEach(([prop, value]) => {
		if (Array.isArray(value)) {
			const [mobileValue] = value;
			if (mobileValue) {
				mobileProps[prop] = mobileValue;
			}
		} else {
			mobileProps[prop] = value;
		}
	});
	return mobileProps;
};

const wrap = (func: styleFn) => (props: StyleProps): styleFn => {
	return func(removeResponsiveProps(props));
};

export const composeNative = (...parsers: styleFn[]): styleFn => {
	const config = {};
	parsers.forEach(parser => {
		if (!parser || !parser.config) {
			return;
		}
		Object.assign(config, parser.config);
	});
	const parser = createParser(config);

	return wrap(parser);
};