Styles not getting Applied in React Native

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

try export default styles in the style file. And import styles from 'style file path', in the view, do <View style={styles.headerContainer1}>.... Also, the prop for view should be singular, so style=, not styles= — davidhu
– davidhu, Commented Sep 25, 2018 at 22:32

Michael Artman · Accepted Answer · 2018-09-25 22:34:14Z

12

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

answered Sep 25, 2018 at 22:34

Michael Artman

3572 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alwaysblue Over a year ago

That (s) was causing the problem. Thanks :)

Mote Zart Over a year ago

I had styles and not style. Simple answer that solved my problem.

JRK · Accepted Answer · 2018-09-25 22:31:52Z

1

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.

edited Sep 25, 2018 at 22:31

answered Sep 25, 2018 at 22:30

JRK

3,9741 gold badge15 silver badges20 bronze badges

3 Comments

Alwaysblue Over a year ago

Thanks a lot for your answer but that isn't working as well. Also, For some reason I find second approach sort of clean (just personal preference here)

JRK Over a year ago

Can you post the full component?

Alwaysblue Over a year ago

Thanks a lot JRK. There was a stupid s I added in styles which was causing the problem.

Shahrukh Sanjrani · Accepted Answer · 2020-11-21 14:22:02Z

0

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

answered Nov 21, 2020 at 14:22

Shahrukh Sanjrani

876 bronze badges

Collectives™ on Stack Overflow

Styles not getting Applied in React Native

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related