title: Styles not getting Applied in React Native
body: <p>I was making my custom bottom Navbar for which I am unable to Apply styles on my <code>View</code> component </p>
  
  <p>This is what I am importing </p>
  
  <pre><code>import React, {PureComponent} from 'react';
  import {StyleSheet, View, Text} from 'react-native';
  import Icon from 'react-native-vector-icons/FontAwesome';
  </code></pre>
  
  <p>And then in return of render, I am calling it like this (<code>this.something</code> are icons here) </p>
  
  <pre><code>  &lt;View styles={headerContainer1}&gt; 
              &lt;Text&gt; {this.News}&lt;/Text&gt;
              &lt;Text&gt;{this.home}&lt;/Text&gt;
              &lt;Text&gt; {this.Exchange}&lt;/Text&gt;
              &lt;Text&gt; {this.about}&lt;/Text&gt;
              &lt;/View&gt;
  </code></pre>
  
  <p>Here my Header container looks/and is coming from here </p>
  
  <pre><code>const styles = StyleSheet.create({
      headerContainer1 : {
        display: "flex",
        flexDirection: "row",
        alignItems: 'center',
        backgroundColor: "red",
        borderBottomLeftRadius: 0,
        borderBottomRightRadius: 0
      }
    })
  
    const { 
      headerContainer1
    } = styles;
  </code></pre>
  
  <p>Here, I have done two things. <code>flexDirection: "row",</code>and <code>backgroundColor: "red"</code> but unfortunately I can't see any of the changes being Applied.</p>
  
  <p><strong>[Question:]</strong> What am I missing or doing wrong? I am attaching the image below for reference </p>
  
  <p><a href="https://i.stack.imgur.com/bT4n4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bT4n4.png" alt="enter image description here"></a></p>