CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-navigation
Michal
Michal

Reputation: 153

Screen Navigation Header wont display in stacked Drawer Navigation ....React Navigation V2

So for some reason I can not seem to get any header titles to appear for screens nested within my Drawer Navigator. I have researched this topic pretty heavily and still haven't found a solution.

Some sites have said that the navigationOptions need to be called as a function => Tried and didnt work.

Some have said that because my Drawer Navigator is nested within a Stack Nav that my individual screens for the Drawer should be their own individual Stacks.... but when I did that it only created what seemed to be a small beneath the nav bar with the header inside, floated to the left.

Ive tried declaring the navigationOptions in the Navigators and statically via each screen but nothing seems to work and I have no clue why this is being so difficult.

Ive used the old React Navigation V1 and this was never a problem. If anyone has any solutions or suggestions, that 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: LoginScreen,
    DrawerNav: DrawerNavigator
  },
  {
   navigationOptions: {
    headerStyle: {
      backgroundColor: '#2b3991',
    },
    headerTintColor: '#fff',
    },
  },
);

export default StackNav;

And here is my individual screen with the navigationOptions declared there:

import React, { Component} from 'react';
import { View, Text } from 'react-native';
import { Container, Content, Card, CardItem, Header, Left, Body, Button, Icon, Title, H1 } from 'native-base';


class HomeScreen extends React.Component {
  static navigationOptions = {
    headerMode: 'screen',
    title: 'Home',
    headerTitle: 'Home'
  };
  render() {
    return (
       <View style={{ flex: 1 , flexDirection: 'column', justifyContent: 'center' }}>
            <Card>
              <CardItem header style={{ flex: 1, justifyContent: 'center'}} >
                <H1 style={{ justifyContent: 'center'}} >Charity</H1>
              </CardItem>
              <CardItem>
                <Body>
                  <Icon name="images" style={{ fontSize: 50, borderWidth: 5 , borderStyle: 'dashed', borderRadius: 10, padding: 20}} />
                </Body>
              </CardItem>
            </Card>
            <Card style={{ flex: 1, backgroundColor: 'white', borderWidth: 2 }}></Card>
            <Card style={{ flex: 1, backgroundColor: 'white', borderWidth: 2 }}></Card>
        </View>
    );
  }
}

export default HomeScreen;

Here is an image of my app when I created individual Stack Navs for each screen in my nested Drawer Nav. The code I have posted above does not produce this image.....but just wanted to add it to show what happened when I tried this....because this confuses me as well. Image of Rendered App

Upvotes: 4

Views: 2763

Answers (1)

Aung Myat Hein
Aung Myat Hein

Reputation: 4188

Navigation options can only be configured its direct parent in version 2.

  • Create individual stack for your each screen.
  • And then you can configure the navigation options of createStackNavigator at respective screen.

I have created the expo link for you.

Upvotes: 6

Related Questions