feat(new styles guide): Added responsive functions and common styles

[khayym]

For a React Native application, it is best practice to use common styles and normalize functions to ensure responsive design and avoid creating multiple styles.
I added this docs about that, have a good checking )

[anisurrahman072]

Thanks again & great that you added a new Chapter 13. Will review it ASAP mate 🚀

[anisurrahman072]

Hi mate, please allow me couple of days to complete the merging. Planning to make it in upcoming weekend. Surely I will try to complete it before weekend.

You did really a great work 🔥💯

[khayym]

Hey there, just relax. Thank you. I plan to add new documentation regarding styling and icon usage at the end of this month.

[anisurrahman072]

Hi @khayym , you did really an amazing job by adding a Styling guide in this Book 🔥

It will really help the community. Thanks once again as the article you added really has some good knowledges.

However, I found that these changes can make it more understandable for beginners. If you have some free time please have a look. Waiting for your landing mate 🚀

FYI, I'm creating a Banner for this guide. Once all OK, I will publish it into main stream 🚀

[anisurrahman072]

Could you please explain what means by "normalize dimensions", "Normalization Functions" or "vertical and horizontal normalization" ?

Specifically what "Normalization" means throughout this awesome guide ?

It would be really great, if you can create a "Common Terms" section in this article at the top & under that section explain what this "Normalization" means really.

[anisurrahman072]

Will it be possible anyhow to add some photos like below to understand the common Flex styles, so that people can understand easily 👇

(You can skip it if it takes too much time)

[anisurrahman072]

Could you please add a more precise relation between the first 5 code chunks on Normalizations ?

I see in this guide, the first 5 code chunks are actually indicating a same file. It would be better, if it was mentioned more precisely that these code chunks indicating a same file by using a file name. Code chunks are under these sections 👇

1. The Core of Our Styling Metrics
2. Normalizing Width and Height
3. Font Size Adjustment
4. Additional Normalization Functions
5. Unified Normalization Function

🟢 It would be better really if you can do this below 2 steps 👇

1. Before the code chunk under section The Core of Our Styling Metrics you can add a text like below 👇

      Let's create a file under "/src/utils/NormalizeFunctions.js" & then paste this below code in that "NormalizeFunctions.js" file.
   

2. Then before all other 4 code chunks (mentioned above), you can add a text like below 👇

      Let's add this below code at the bottom of your "NormalizeFunctions.js"
   

These above 2 steps will make a more better relation between those 5 sections code chunks & it will be helpful really.

🟢 "Or" you can give the full code of Normalization Functions at the top of this article & then you can say, "Let's break each functions" & then show each part codes.

🟢 "Or" whatever step you can take to make a good relation between the first 5 code chunks please.

[anisurrahman072]

Could you please add a more specific file name. Ex: ./src/utils/NormalizeFunctions.js instead of './yourNormalizeFunctionPath' ?

It will help the readers to identify which codes were being indicated to import.

I added an another review on adding file name as ./src/utils/NormalizeFunctions.js. Could you please look at line number 20 to see the review.

[anisurrahman072]

Hello @khayym, are you there please to collaborate about the PR changes request ?

[khayym]

@anisurrahman072 Hi, I will make update for this week)