React Native: How i followed "create once use many times"

My client hired me for saving his life from messy code so i started refactoring the code by converting them into reusable and smaller components that can be follow create once use many times.

Refactoring someone else code can be tough but i tried and successfully refactored whole code of more than 100 screens.
I tried so many libraries to achieve a theming system according to client requirement but every other library have own problem and less support for resolving issues so i started setup my own thing.

My First component was a Container which can be used everywhere and for every need. Believe me it saved me from boilerplate.

For ex: we have 4 Text component and i wanted to make space between them is 5. how we normally do like this

Make it in a Row

Don't you think it is getting start messy.
Check My Version, it is clean right 😁

Let's start baking it

	import {isArray, isNumber} from 'lodash';
	import React, {Fragment, useMemo} from 'react';
	import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
	import {height, totalSize, width} from 'react-native-dimension';
	type SizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | number;
	type Direction = 'vertical' | 'horizontal';
	export type SpaceBlockProps = {
	children?: React.ReactNode;
	size: SizeType;
	direction?: Direction;
	justify?: ViewStyle['justifyContent'];
	alignItems?: ViewStyle['alignItems'];
	alignSelf?: ViewStyle['alignSelf'];
	bgColor?: ViewStyle['backgroundColor'];
	flexWrap?: ViewStyle['flexWrap'];
	flex?: ViewStyle['flex'];
	borderRadius?: ViewStyle['borderRadius'];
	style?: StyleProp<ViewStyle>;
	};
	const SpaceBlock = (props: SpaceBlockProps) => {
	const {
	children,
	direction,
	size,
	justify,
	alignItems,
	alignSelf,
	bgColor,
	flex,
	flexWrap,
	borderRadius,
	style,
	} = props;
	const sizeStyle = useMemo(() => {
	if (direction === 'horizontal') {
	if (isNumber(size)) {
	return {width: width(size)};
	}
	return horizontalStyles[size];
	}
	if (isNumber(size)) {
	return {height: height(size)};
	}
	return verticalStyles[size];
	}, [direction, size]);
	const renderItems = () => {
	if (!children) {
	return <Fragment />;
	}
	// eslint-disable-next-line react/prop-types
	if (isArray(children) && children?.length > 1) {
	// eslint-disable-next-line react/prop-types
	return (
	children
	// eslint-disable-next-line react/prop-types
	.filter((p) => p)
	.map((element, i) => {
	if (!element) {
	return;
	}
	return (
	<Fragment key={i}>
	{i !== 0 && <View style={sizeStyle}></View>}
	{element}
	</Fragment>
	);
	})
	);
	}
	return <Fragment>{children}</Fragment>;
	};
	const internalStyle = useMemo(() => {
	const styles: StyleProp<ViewStyle>[] = [];
	if (flex) {
	styles.push({flex});
	}
	if (direction) {
	styles.push({
	flexDirection: direction === 'horizontal' ? 'row' : 'column',
	});
	}
	if (alignItems) {
	styles.push({
	alignItems: direction === 'horizontal' ? 'center' : alignItems,
	});
	}
	if (alignSelf) {
	styles.push({
	alignSelf: alignSelf,
	});
	}
	if (justify) {
	styles.push({
	justifyContent: justify,
	});
	}
	if (flexWrap) {
	styles.push({flexWrap});
	}
	if (borderRadius) {
	styles.push({borderRadius: totalSize(borderRadius)});
	}
	if (bgColor) {
	styles.push({backgroundColor: bgColor});
	}
	return styles;
	}, [
	flex,
	flexWrap,
	direction,
	justify,
	alignSelf,
	alignItems,
	borderRadius,
	bgColor,
	]);
	return <View style={[internalStyle, style]}>{renderItems()}</View>;
	};
	SpaceBlock.defaultProps = {
	size: 'md',
	direction: 'vertical',
	};
	export default SpaceBlock;
	const verticalStyles = StyleSheet.create({
	xs: {
	height: height(0.8),
	},
	sm: {
	height: height(1.2),
	},
	md: {
	height: height(1.5),
	},
	lg: {
	height: height(2.2),
	},
	xl: {
	height: height(2.8),
	},
	xxl: {
	height: height(3.4),
	},
	xxxl: {
	height: height(3.9),
	},
	});
	const horizontalStyles = StyleSheet.create({
	xs: {
	width: width(1),
	},
	sm: {
	width: width(2),
	},
	md: {
	width: width(3.4),
	},
	lg: {
	width: width(5),
	},
	xl: {
	width: width(6.4),
	},
	xxl: {
	width: width(7.9),
	},
	xxxl: {
	width: width(10),
	},
	});

view raw SpaceBlock.tsx hosted with ❤ by GitHub

We have not finished yet, now it's time to create Container

p - padding
m - margin
x - horizontal
y - vertical
l - left
r - right
pr - padding right
pl - padding left
px - padding horizontal
py - padding vertical
pxy - padding all
mr - margin right
ml - margin left
mx - margin horizontal
my - margin vertical
mxy - margin all

	import React, {Fragment, useMemo} from 'react';
	import {StyleProp, ViewStyle} from 'react-native';
	import {height, totalSize, width} from 'react-native-dimension';
	import SpaceBlock, {SpaceBlockProps} from '../SpaceBlock';
	export type ContainerProps = {
	/**
	* Padding
	*/
	px?: boolean | number;
	py?: boolean | number;
	pb?: number;
	pt?: number;
	pl?: number;
	pr?: number;
	pxy?: number;
	/**
	* Margins
	*/
	mx?: number;
	my?: number;
	mb?: number;
	mt?: number;
	ml?: number;
	mr?: number;
	mxy?: number;
	width?: number;
	height?: number;
	spaceBetween?: SpaceBlockProps['size'];
	hidden?: boolean;
	} & Omit<Partial<SpaceBlockProps>, 'size'>;
	const Container = (props: ContainerProps) => {
	const {
	pb,
	pl,
	pr,
	pt,
	px,
	py,
	pxy,
	mb,
	ml,
	mr,
	mt,
	mx,
	my,
	mxy,
	width: nativeWidth,
	height: nativeHeight,
	divider,
	spaceBetween,
	flexWrap,
	dividerColor,
	hidden,
	...restProps
	} = props;
	const marginStyle = useMemo(() => {
	const styles: StyleProp<ViewStyle>[] = [];
	if (ml) {
	styles.push({marginLeft: width(ml)});
	}
	if (mr) {
	styles.push({marginRight: width(mr)});
	}
	if (mt) {
	styles.push({marginTop: height(mt)});
	}
	if (mb) {
	styles.push({marginBottom: height(mb)});
	}
	if (mx) {
	styles.push({marginHorizontal: width(mx)});
	}
	if (my) {
	styles.push({marginVertical: height(my)});
	}
	if (mxy) {
	styles.push({margin: totalSize(mxy)});
	}
	return styles;
	}, [ml, mr, mt, mb, mx, my, mxy]);
	const paddingStyle = useMemo(() => {
	const styles: StyleProp<ViewStyle>[] = [];
	if (pl) {
	styles.push({paddingLeft: width(pl)});
	}
	if (pr) {
	styles.push({paddingRight: width(pr)});
	}
	if (pt) {
	styles.push({paddingTop: height(pt)});
	}
	if (pb) {
	styles.push({paddingBottom: height(pb)});
	}
	if (px && typeof px === 'number') {
	styles.push({paddingHorizontal: width(px)});
	}
	if (px && typeof px === 'boolean') {
	styles.push({paddingHorizontal: width(5)});
	}
	if (py && typeof py === 'number') {
	styles.push({paddingVertical: height(py)});
	}
	if (py && typeof py === 'boolean') {
	styles.push({paddingVertical: height(3)});
	}
	if (pxy) {
	styles.push({padding: totalSize(pxy)});
	}
	return styles;
	}, [pl, pr, pt, pb, px, py, pxy]);
	const widthStyle = useMemo(() => {
	if (nativeWidth) {
	return {width: width(nativeWidth)};
	}
	return {};
	}, [nativeWidth]);
	const heightStyle = useMemo(() => {
	if (nativeHeight) {
	return {height: height(nativeHeight)};
	}
	return {};
	}, [nativeHeight]);
	if (hidden) {
	return <></>;
	}
	return (
	<SpaceBlock
	{...restProps}
	size={spaceBetween ?? 0}
	flexWrap={flexWrap}
	style={[
	marginStyle,
	paddingStyle,
	widthStyle,
	heightStyle,
	restProps.style,
	]}>
	{props.children}
	</SpaceBlock>
	);
	};
	export default Container;

view raw Container.tsx hosted with ❤ by GitHub

spaceBetween - space between components
hidden - hide component based on condition

😁😁😁😁😁 We just saved so much boilerplate.
Happy Coding

React Native: How i followed “create once use many times” | by Akash Gupta | Jul, 2021 | Medium

Akash Gupta ・ Jul 29, 2021 ・

Medium