Set View Width Height in Percentage in React Native | Responsive View

Hello friends, We have seen so many web applications websites in our daily life. When we visit a website then we would see that the website is responsive and adjust itself according to every screen in which it will open. Why should not make mobile applications responsive also? In react native we can easily make responsive mobile applications. Now the main part of our tutorial is how to set view width height in percentage in react native. The View component in react native does support percentage dimensions, all we have to do is pass width and height in percentage format.

Contents in this project Set View Width Height in Percentage in React Native | Responsive View :-

1. Open your project’s main App.js file and import View, StyleSheet, Text and Platform component.

2. Creating our main App component.

3. Creating return block, Now we would make 2 View component with width and height defined in percentage.

4. Creating Style.

5. Complete Source Code for App.js File :-

Screenshots in Android :-

Set View Width Height in Percentage in React Native | Responsive View

Screenshots in iOS :-

Leave a Reply

Your email address will not be published. Required fields are marked *