Sharing common navigationOptions across screens

Question

so I'm having trouble setting global header styles across multiple screens in my React Native Project.

Ive followed the steps outlined in https://reactnavigation.org/docs/en/headers.html but im getting a syntax error every time I try to run it.

All im doing is setting the header background color and the tint for the button and header.

Ive attached my code below....if anyone can point to me what it is I'm doing wrong it would be greatly appreciated.

[import React, { Component } from 'react';
import { createStackNavigator, createDrawerNavigator } from 'react-navigation';

import {View,Text,StyleSheet,Platform,TouchableOpacity,Image,StatusBar} from 'react-native';

import LoginScreen from '../screens/LoginScreen';
import HomeScreen from '../screens/HomeScreen';
import ProfileScreen from '../screens/ProfileScreen';
import CharityScreen from '../screens/CharityScreen';
import RunScreen from '../screens/RunScreen';

const DrawerNavigator = createDrawerNavigator({
  Home: {
    screen: HomeScreen
  },
  Profile: {
    screen: ProfileScreen
  },
  Charity: {
    screen: CharityScreen
  },
  Run: {
    screen: RunScreen
  }

});

const StackNav = createStackNavigator({
  Login: {
    screen: LoginScreen
  },
  DrawerNav: {
    screen: DrawerNavigator
  },
  {
    navigationOptions: {
      headerStyle: {
        backgroundColor: '#2b3991',
      },
      headerTintColor: '#fff'
    },
  },
});

export default StackNav;][1]

Error Message:

error: bundling failed: SyntaxError in C:\\Users\\Michal\\apps\\run\\src\\nav\\rootnav.js: C:/Users/Michal/apps/run/src/nav/rootnav.js: Unexpected token (35:4) 33 | DrawerNav: { 34 | screen: DrawerNavigator,

35 | { | ^ 36 | navigationOptions: { 37 | headerStyle: { 38 | backgroundColor: '#2b3991',

Answer 1

Try this code because there is a syntext error at navigationOptions in your code

const StackNav = createStackNavigator({
   Login: {
    screen: LoginScreen
   },
   DrawerNav: {
   screen: DrawerNavigator
  },
}, 
{
 navigationOptions: {
  headerStyle: {
    backgroundColor: '#2b3991',
  },
  headerTintColor: '#fff'
 },
  }, 
);

Answer 2

Try designing the navigator like below:-

const StackNav = createStackNavigator(
  {
    Login: LoginScreen,
    DrawerNav: DrawerNavigator,
  },
  {
    navigationOptions: {
      headerStyle: {
        backgroundColor: '#2b3991',
      },
      headerTintColor: '#fff'
    }
  }
);