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.

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, View, Text, Platform} from ‘react-native’;

import React, { Component } from ‘react’;

import { StyleSheet, View, Text, Platform} from ‘react-native’;

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.

<br />
render() {</p>
<p>   return (</p>
<p>      <View style={styles.MainContainer}></p>
<p>        {/* Put Your Components Here Inside The Root View. */}</p>
<p>        <Text style={{textAlign: ‘center’, fontSize: 20}}> Root Main View With Border </Text></p>
<p>      </View></p>
<p>   );<br />
 }

render() {

return (

{/* Put Your Components Here Inside The Root View. */}

<Text style={{textAlign: ‘center’, fontSize: 20}}> Root Main View With Border </Text>

</View>

);

}

3. Create Style for View.

borderWidth : Setting up the border width in pixels.

borderColor : Setting up the complete border color.

<br />
const styles = StyleSheet.create({</p>
<p>  MainContainer :</p>
<p>  {<br />
      flex:1,<br />
      padding: 10,<br />
      justifyContent: ‘center’,<br />
      alignItems: ‘center’,<br />
      borderWidth: 5,<br />
      borderColor: ‘#FF1744’,<br />
      marginTop: (Platform.OS === ‘ios’) ? 20 : 0<br />
  }</p>
<p>});

const styles = StyleSheet.create({

MainContainer :

{

flex:1,

padding: 10,

justifyContent: ‘center’,

alignItems: ‘center’,

borderWidth: 5,

borderColor: ‘#FF1744’,

marginTop: (Platform.OS === ‘ios’) ? 20 : 0

}

});

4. Complete source code for App.js File :

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, View, Text, Platform} from ‘react-native’;</p>
<p>export default class Mynewproject extends Component {</p>
<p>render() {</p>
<p>   return (</p>
<p>      <View style={styles.MainContainer}></p>
<p>        {/* Put Your Components Here Inside The Root View. */}</p>
<p>        <Text style={{textAlign: ‘center’, fontSize: 20}}> Root Main View With Border </Text></p>
<p>      </View></p>
<p>   );<br />
 }<br />
}</p>
<p>const styles = StyleSheet.create({</p>
<p>  MainContainer :</p>
<p>  {<br />
      flex:1,<br />
      padding: 10,<br />
      justifyContent: ‘center’,<br />
      alignItems: ‘center’,<br />
      borderWidth: 5,<br />
      borderColor: ‘#FF1744’,<br />
      marginTop: (Platform.OS === ‘ios’) ? 20 : 0<br />
  }</p>
<p>});