DEV Community

loading...
Cover image for React Native: How i followed "create once use many times"

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

Akash Gupta
Freelancer | Free Consultation | Full Stack Developer | Angular | ReactJs | Ionic | Flutter | React Native | NestJs | ExpressJs | NodeJs | AWS Amplify | MongoDB
・2 min read

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

unpotimized-code

Make it in a Row

unpotimized-code

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
Enter fullscreen mode Exit fullscreen mode
spaceBetween - space between components
hidden - hide component based on condition
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)