React Native Set View Height Width in Percentage format Respect of Root View

React native components did support the percentage(%) format like we have already seen in web applications, Developer can Set View Height Width in Percentage format Respect of Root View. It will automatically determine the Parent component height width and according to that it will set children view height width in both android and iOS react native applications.

Contents in this project Set View Height Width in Percentage format Respect of Root View in react native app:

1. Import Platform, StyleSheet, View and Text component in your project.

2. Create a Root view in render’s return block, This would be our main View covert the complete application screen.

3. Creating a children View inside Root Parent View. We are using the inline CSS technique to implement CSS on child view. As you can see in below child view we are applying the Width and Height of view in percentage format in respect of Root View.

4. Creating Style for Root View.

5. Complete source code for App.js File :

Screenshot in android device:

Set View Height Width in Percentage format

Screenshots in iOS device:

Leave a Reply

Your email address will not be published.