Example of React Native Easy Grid Yarn NPM Package

Hello friends, In today’s tutorial we would learn about React Native Easy Grid package. After heard the name of package many of us things it’s a Grid View creating package. But friends they are trying to make Flex box designs easy for us. Now we can simply divide screen into multiple sections without defining any complex code. The React Native Easy Grid package gives us Rows and columns and we can divide our screen into these formats. We can control area of screen using their size prop. For example If we have to create 3 section on our screen First with 50% of screen and other two with 25% each then all we have to do is define the percentage into Size prop. So for us this package is very useful if we know how it works? So in this tutorial we would learn about Example of React Native Easy Grid Yarn NPM Package.

Contents in this project Example of React Native Easy Grid Yarn NPM Package :-

1. First of all we have to install the React Native Easy Grid package in our project. You can use either NPM or Yarn package installer as per your choice. I’m using NPM command. So open your project’s Root directory into Command Prompt or Terminal and execute below command.

or

Screenshot of CMD :-

Screenshot after done installation :-

Example of React Native Easy Grid Yarn NPM Package2. Writing code for App.js file for creating 2 Columns each with 1 Row.

3. Writing code for making 2 Columns. In the first column we would make 1 Row and in the second column we would make 2 rows.

4. Creating code for making 2 Columns, In the first column we would make 2 Rows and in the second column we would make 4 rows.

Example of React Native Easy Grid Yarn NPM Package5. Now finally we would make 2 columns each with 4 – 4 rows.

Important Note :- I have defined height of our main View, That’s why they are not covering the whole device screen. If you want them to cover the whole screen simply remove the height style prop.

Leave a Reply

Your email address will not be published.