Guide to understand Flex-box in react-native (if you are a web developer)

Midha — Tue, 05 Oct 2021 20:23:55 +0000

If you are coming from web development background and your ultimate goal is to learn react-native now then this flex-box cheat sheet guide is surely for you.

As a react developer, I got slightly confused working with flex-box in react-native, so I created this cheat sheet 👆

There are few differences I want to conclude:

Flex-direction: row (by default in browser), Flex-direction: column (by default in react-native).
By default 'div' doesn't have flex in browser, whereas in react native's 'View' flex-box is already applied.
As you can see main points in cheat sheet, if you want to align things in main-axis then use justifyContent.
If you want to align things in cross-axis then use alignItems.

That's all for now, I hope you have enjoyed this :)

Nevertheless, Midha Coded in 2021!

Midha — Sun, 07 Mar 2021 21:09:30 +0000

My most recent achievement was completing my fiverr client project 😍

My biggest goal is to become best software engineer 💻 eventually becoming best seller in freelance market 😍

Designing Tips & Tricks for Developers

Midha — Thu, 17 Sep 2020 07:47:47 +0000

Being a web developer is not an easy task. You have to learn many things from making APIs to managing database😑. In this world of full-stack developers where organizations want everything from one developer, you might think that for you code optimization and performance is a great success but if your webapp don't look good nobody will give you praise for your work that should be given to you.

In this series, I will tell you some cool tricks and tools to decide layout, colors, typography, and illustrations.🚀

We will be working step by step towards this goal.
First of all draw layout for your website on a piece of paper. Yes, you heard right on a paper. You must be asking why we should start our work from the paper when we have many amazing tools available. Don't worry we will do it with tools also. There are some reasons for using paper:

Everyone can easily draw their thoughts on paper.
They don't need to install any software. They don't need to learn any tool for this.
When you are drawing on paper. You erase it redraws it then erase it through this whole process of drawing and erasing, you will certainly create the best thing which you can't create directly on any software.
If you are working in a team, give everyone tasks to depict their thoughts and present them on paper.

Now you have collected and drawn many designs. Ask your team which one is best to go with. Maybe you all come with a point where you merge different ideas together to create one masterpiece.
If you are working alone then maybe you can ask someone for advice or go with that thing which looks great from your perspective.

You must be thinking that since we are not good with frontend stuff how we will implement them? The answer to that is this: GridByExample 🤩🤩 just go to this website pick that layout which is matching most with your selected masterpiece, add some tweaks to it and yes now you are good to go. You can use many frontend libraries for your components.
e.g: bootstrap, material-ui, tailwind-css. But since you have created a proper layout of one part of your webpage, you now have to focus on other things like colors and fonts. But for that, you have to wait for the next part of this series 🙌

If you want to learn more go to this website and learn many things in 4 minutes WebDesignin4Minutes

DEV Community: Midha

Guide to understand Flex-box in react-native (if you are a web developer)

Nevertheless, Midha Coded in 2021!

Designing Tips & Tricks for Developers