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

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

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