The headerStyle does not have any impact on the header component in React-Native

Currently diving into React-Native with Typescript and working on a project. Encountered a bug where the header color isn't changing as expected.

Any help or insight would be greatly appreciated!

-Viggo

index.tsx

import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableWithoutFeedback } from 'react-native';

import AddCity from './components/AddCity/AddCity'
import Cities from './components/Cities/Cities'
import City from './components/Cities/City'
import { createAppContainer } from 'react-navigation'
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation'
import { colors } from './theme'

const CitiesNav = createStackNavigator({
    Cities: { screen: Cities },
    City: { screen: City }
}, {
    navigationOptions: {
        headerStyle: {
            backgroundColor: colors.primary
        },
        headerTintColor: '#8e44ad'
    }
})

const Tabs = createBottomTabNavigator({
    Cities: { screen: CitiesNav },
    AddCity: { screen: AddCity }
})

const App = createAppContainer(Tabs);

export default App;

theme.tsx

const colors = {
    primary: '#D81B60',
}

export { 
    colors
}

Answer №1

Give defaultNavigationOptions a shot instead of navigationOptions. Hopefully, it will do the trick

 defaultNavigationOptions: {
    headerStyle: {
        backgroundColor: colors.primary
    },
    headerTintColor: '#8e44ad'
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Experiencing unexpected behavior with Jest's mock and toHaveBeenCalled() function?

I'm puzzled as to why the Mock function isn't indicating that toHaveBeenCalled is being called when I attempt to mock it in the manner below //my App.js import useAuth from "./src/hooks/useAuth"; import useBrunch from "./src/hooks ...

How can a class be imported into a Firebase Cloud function in order to reduce cold start time?

When optimizing cold start time for Firebase Cloud functions, it is recommended in this Firebase Tutorial to import modules only where necessary. But can you also import a class with its own dependencies inside a function? In my scenario, I need to use Bc ...

Ways to update the UI dynamically in Angular without the need to refresh the entire page

On my page, I have multiple charts and I'm facing an issue where the chart UI does not update immediately when I try to make a delete call by clicking the delete button. I always have to refresh the browser to see the changes. I have provided the ful ...

Animating the blur effect in React Native images

I want to create a unique effect for the top of one of my views by blurring out a "cover" image as it scrolls out of view. Within my state, I have a property called blurRadius, which is bound to blurRadius={this.state.blurRadius} in my <Image> compo ...

The parameter type 'router' cannot be replaced with the type 'typeof ...'. The 'param' property is not included in the type 'typeof'

I'm currently working on a node application using TypeScript and have set up routing in a separate file named 'route.ts' import home = require('../controller/homeController'); import express = require('express'); let ro ...

Generating a type definition from a JavaScript file

Looking to convert a .js file to a d.ts file, I've noticed that most resources on this topic are from 2 years ago How do you produce a .d.ts "typings" definition file from an existing JavaScript library? My question is, after 2 years, is there a simp ...

Leverage the Nuxeo client SDK with Angular 6 for seamless integration with RESTClient in

Looking to integrate the Nuxeo ClientSdk with my Angular 6 client to consume its REST API, but facing issues due to the lack of typescript definitions for this JavaScript package. Tried importing the library into my project using the following code snippe ...

How can Typescript generics verify the value type for a specific key in a generic object?

I am facing an issue with a function called sortData. This function takes in a key and is designed to sort an array of objects based on the values for that key: function compare(v1: string | number, v2: string | number) { return (v1 < v2 ? -1 : v1 > ...

When another page is refreshed, Angular routing redirects back to the home page

Within my application, there is a homepage that appears after the user logs in, along with some other pages. However, I've encountered an issue where when I navigate to one of these other pages and then refresh the page, it redirects me back to the ho ...

What is the best way to retrieve props for computed properties using Vue with Typescript?

Seeking help on accessing props data for my computed property. Here is the code snippet: <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ props: { color: String, shape: String, ...

Watchman encountered an error upon initialization

Hi there, I'm encountering an error when trying to start my app with 'react-native start'. Can anyone provide guidance on how to resolve this issue? I attempted changing the permissions of the watchman folder and project folder using chmod - ...

Error in ReactJS VSCode while integrating Cypress testing: The name 'cy' cannot be found

Currently working on a ReactJS Typescript project using NPM and VSCode. Despite all my Cypress tests running smoothly, I am encountering a syntax error in VSCode: Error: Cannot find name 'cy' Any ideas on how to resolve this issue? https://i.ss ...

In TypeScript version 2.4.1, the fontWeight property encounters an error where a value of type 'number' cannot be assigned to the types of '"inherit", 400'

When attempting to set the fontWeight property in TypeScript, I encounter the following error: Types of property 'test' are incompatible. Type '{ fontWeight: number; }' is not assignable to type 'Partial<CSSProperties>&a ...

Utilize Azure Functions: Employ the Apollo Azure handler within an asynchronous function

Looking to incorporate some checks before executing the apollo handler function, I attempted to wrap it in an async function. However, when exporting the function as async, it consistently returns an empty response. functions.json { "bindings" ...

Successive type label

Looking to create an object that can have either primitives or objects as properties? Avoid pitfalls like the following: const obj: DesiredType = { correctProp1: 'string', correctProp2: 123, correctProp3: true, wrongProp4: [1, 2, 3], pr ...

Exploring ways to destructure the useContext hook with a null default value in your Typescript code

Initially, I set up a context with a null value and now I am trying to access it in another component. However, when I destructure it to retrieve the variables from the context, I encounter a TypeScript error: Property 'users' does not exist on ...

Grouping elements of an array of objects in JavaScript

I've been struggling to categorize elements with similar values in the array for quite some time, but I seem to be stuck Array: list = [ {id: "0", created_at: "foo1", value: "35"}, {id: "1", created_at: "foo1", value: "26"}, {id: "2", cr ...

What could be causing the DOM not to update after updating the data set in Angular 2?

Currently, I am facing an issue in Angular 2 where I call a function of a child component from the parent. The child function updates my data set which initially loads the HTML. However, when I call the function again while on the same HTML, it displays in ...

The error message encountered while using webpack with TypeScript and React is: "Unexpected token React.Component

I am currently working on setting up a project using webpack, typescript, and react. I have implemented babel to transpile my typscript/react code. However, when starting the development server, I encountered the following error: Module parse failed: Un ...

Develop a JSON parsing function for VUE reusability

Currently, I am iterating through an array in Vue that contains objects with strings nested within. These objects have various properties such as idType, type, user, visibility, seller, product, company, and additionalData. notifications: [ 0: { idTy ...