Add Show Border Around Root Main Container View in React Native

The Container View is the main view which would hold all the components in react native application. This View has Flex :1 which would automatically allows it to cover the complete device screen area. It is like the entire body of application like we did see in HTML body tag. We can set its background color, border and layout type. So in this tutorial we would going to create a react native application to Add Show Border Around Root Main Container View in Android iOS app example tutorial. We would use borderColor and borderWidth attributes using custom style sheet to add border.

Contents in Add Show Border Around Root Main Container View in React Native Android iOS App:

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

2. Create the Root Container View in render’s return block. We would simply adding a Text component in View just to show some text.

3. Create Style for View.

borderWidth : Setting up the border width in pixels.

borderColor : Setting up the complete border color.

4. Complete source code for App.js File :

Screenshot in Android device :

Add Show Border Around Root Main Container View

Screenshot in iOS device :

Leave a Reply

Your email address will not be published.