CODEWITHSUNDEEP
reactjsreact-native
Alwaysblue
Alwaysblue

Reputation: 11830

Styles not getting Applied in React Native

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

enter image description here

Upvotes: 8

Views: 13654

Answers (3)

Shahrukh Sanjrani
Shahrukh Sanjrani

Reputation: 87

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

Upvotes: 0

Michael Artman
Michael Artman

Reputation: 357

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 :>

Upvotes: 12

JRK
JRK

Reputation: 3904

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.

Upvotes: 1

Related Questions