Styles not getting Applied in React Native - reactjs

Question

I was making my custom bottom Navbar for which I am unable to Apply styles on my View component
This is what I am importing
import React, {PureComponent} from 'react';
import {StyleSheet, View, Text} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
And then in return of render, I am calling it like this (this.something are icons here)
<View styles={headerContainer1}>
<Text> {this.News}</Text>
<Text>{this.home}</Text>
<Text> {this.Exchange}</Text>
<Text> {this.about}</Text>
</View>
Here my Header container looks/and is coming from here
const styles = StyleSheet.create({
headerContainer1 : {
display: "flex",
flexDirection: "row",
alignItems: 'center',
backgroundColor: "red",
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0
}
})
const {
headerContainer1
} = styles;
Here, I have done two things. flexDirection: "row",and backgroundColor: "red" but unfortunately I can't see any of the changes being Applied.
[Question:] What am I missing or doing wrong? I am attaching the image below for reference

Answer 1

First thing in your view you have styles where it should be style. A quick questions, why are you setting a const to the style sheet? Perhaps try bypassing the const and use:
<View style={styles.headerContainer1}>
<Text> {this.News}</Text>
<Text>{this.home}</Text>
<Text> {this.Exchange}</Text>
<Text> {this.about}</Text>
</View>
Or perhaps just fix the view to change styles to style
<View style={headerContainer1}>
<Text> {this.News}</Text>
<Text>{this.home}</Text>
<Text> {this.Exchange}</Text>
<Text> {this.about}</Text>
</View>
I'm not sure why you would do it like this, but I'm sure you have your reasons :>

Answer 2

Just use your Stylesheet like this:
<View style={styles.headerContainer1}>
<Text> {this.News}</Text>
<Text>{this.home}</Text>
<Text> {this.Exchange}</Text>
<Text> {this.about}</Text>
</View>
You just need to reference the Stylesheet, you wouldn't need the second one.

Answer 3

You need to add style={styles.name} in your desire components