Qfyilyi

i m new to react native and trying to get working my navigation here. I have all JSON variables in one file which i will place here. I want to open Drawer with Home and Settings which is OK. But when i m on Settings screen, there is only backbutton instead of HamburgerIcon and DrawerNavigator. Here is my code, can you describe how to make a normal actionbar like in home page also in Settings(where is white header (action bar) instead of dark_cyan).

import React from 'react';

import { Platform } from 'react-native';

import {

  TabNavigator,

  StackNavigator,

  DrawerNavigator,

} from 'react-navigation';

import { FontAwesome, Ionicons } from '@expo/vector-icons';



import WelcomeScreen from './screens/Welcome';

import HomeScreen from './screens/Home';

import ProfileScreen from './screens/Profile';

import FavoritesScreen from './screens/Favorites';

import SettingsScreen from './screens/Settings';

import ImageIcon from './components/ImageIcon'

import { HamburgerIcon, SettingsIcon, BackIcon } from './components/icons';

const day_icon = require('../assets/icons/ic_day.png');

const week_icon = require('../assets/icons/ic_week.png');

const month_icon = require('../assets/icons/ic_month.png');



import { CustomDrawerContent } from './components';

import { colors } from './utils/constants';



const AppMainTab = TabNavigator({

  Home: {

    screen: HomeScreen,

    navigationOptions: ({ navigation }) => ({

      drawerLabel: 'Domů',

      drawerIcon: ({ tintColor }) => (

        <FontAwesome name="home" size={23} color={tintColor} />

      ),

      tabBarLabel: 'Denní program',

      tabBarIcon: ({ tintColor }) => (

        <ImageIcon tintColor={tintColor} text="DEN" src={day_icon} />

      ),

      headerStyle: {

        backgroundColor: colors.CYAN_DARK,

      },

      headerTitle: 'Denní program',

      headerTitleStyle: {

        color: colors.WHITE,

      },

      headerLeft: <HamburgerIcon onPress={() => navigation.navigate('DrawerOpen')} />,

    })

  },

  Favorites: {

    screen: FavoritesScreen,

    navigationOptions: ({ navigation }) => ({

      drawerLabel: 'Týdenní program',

      drawerIcon: ({ tintColor }) => (

        <ImageIcon tintColor={tintColor} text="TÝDEN" src={week_icon} />

      ),

      tabBarLabel: 'Týdenní program',

      tabBarIcon: ({ tintColor }) => (

        <ImageIcon tintColor={tintColor} text="TÝDEN" src={week_icon} />

      ),

      headerStyle: {

        backgroundColor: colors.CYAN_DARK,

      },

      headerTitle: 'Týdenní program',

      headerTitleStyle: {

        color: colors.WHITE,

      },

      headerLeft: <HamburgerIcon onPress={() => navigation.navigate('DrawerOpen')} />,

    })

  },

  Profile: {

    screen: ProfileScreen,

    navigationOptions: ({ navigation }) => ({

      drawerLabel: 'Měsíční program',

      drawerIcon: ({ tintColor }) => (

        <ImageIcon tintColor={tintColor} src={month_icon} text="MĚSÍC" />

      ),

      tabBarLabel: 'Měsíční program',

      tabBarIcon: ({ tintColor }) => (

        <ImageIcon tintColor={tintColor} src={month_icon} text="MĚSÍC" />

      ),

      headerStyle: {

        backgroundColor: colors.CYAN_DARK,

      },

      headerTitle: 'Měsíční program',

      headerTitleStyle: {

        color: colors.WHITE,

      },

      headerLeft: <HamburgerIcon onPress={() => navigation.navigate('DrawerOpen')} />,

      headerRight: <SettingsIcon onPress={() => navigation.navigate('Settings')} />,

    })

  },

}, {

  tabBarOptions: {

    activeTintColor: colors.WHITE,

      inactiveTintColor: colors.BLUE_LIGHT,

    inactiveBackgroundColor: colors.GRAY_LIGHT,

    activeBackgroundColor: colors.WHITE,

    showIcon: true,

    showLabel: Platform.OS === 'ios',

    indicatorStyle: {

      backgroundColor: colors.GRAY_LIGHT,

    },

    style: {

      backgroundColor: colors.CYAN_DARK,

    },

    upperCaseLabel: false,

  },

  tabBarPosition: 'bottom',

  swipeEnabled: false,

  animationEnabled: false,

});





const AppMainStack = StackNavigator({

  Home: { screen: AppMainTab },

  Settings: { screen: SettingsScreen },

}, {

  cardStyle: {

    backgroundColor: colors.GRAY_LIGHT,

  },

  mode: 'modal',

});

const AppDrawer = DrawerNavigator({

  Home: {

    screen: AppMainStack,

  },

  Settings: {

    screen: SettingsScreen,

    navigationOptions: ({ navigation }) => ({

      drawerLabel: 'Settings',

      drawerIcon: ({ tintColor }) => (

        <Ionicons name="md-settings" size={23} color={tintColor} />

      ),

      headerStyle: {

        backgroundColor: colors.DARK_CYAN,

      },

      headerTitle: 'Settings',

      headerTitleStyle: {

        color: colors.DARK_CYAN,

      },

      headerLeft: <HamburgerIcon onPress={() => navigation.navigate('DrawerOpen')} />,

        }),

  },

}, {

  contentComponent: props =>

    (<CustomDrawerContent

      {...props}

        />),

  contentOptions: {

    activeBackgroundColor: colors.CYAN_DARK,

    activeTintColor: colors.WHITE,

        inactiveTintColor: colors.CYAN_DARK,

  },

});

// const Navigator = TabNavigator({

//   Welcome: { screen: WelcomeScreen },

//   Main: { screen: AppDrawer },

// }, {

//   navigationOptions: {

//     tabBarVisible: false,

//   },

//   swipeEnabled: false,

// });



const Navigator = DrawerNavigator({

  Main: { screen: AppDrawer },

}, {

  navigationOptions: {

    tabBarVisible: false,

  },

  swipeEnabled: false,

});



export default Navigator;