header none is not working in drawer navigator react native

Question

Hi I am using the following packages

    {
  "name": "awesome",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "@babel/runtime": "^7.0.0",
    "@expo/vector-icons": "^8.0.0",
    "@types/expo__vector-icons": "^6.2.3",
    "native-base": "^2.8.1",
    "react": "16.5.0",
    "react-dom": "^16.5.0",
    "react-native": "0.57.1",
    "react-native-form": "^2.1.3",
    "react-native-material-dropdown": "^0.11.1",
    "react-native-vector-icons": "^6.0.0",
    "react-navigation": "^2.0.0-rc.1",
    "react-select": "^2.1.0"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.46.0",
    "react-test-renderer": "16.5.0"
  },
  "jest": {
    "preset": "react-native"
  },
  "rnpm": {
    "assets": [
      "./assets/fonts/"
    ]
  }
}

enter image description here

In drawer navigator, I have 2 screens in which header: none is not working in every screen. I have tried different versions of react-navigation but I didn't get the output. I got it when I used it with "react-navigation": "^1.0.0-beta.11" but it is outdated. Pardon me If it is a silly question. Thanks in advance

Home.js

import React, { Component } from "react";
import { Text, View } from "react-native";
import { createDrawerNavigator } from "react-navigation";
import Home from "./Dashboard";
import Setting from "./Setting";

const AppDrawerNavigator = new createDrawerNavigator({
Home: { screen: Home },
Tasks: { screen: Setting }
});

export default AppDrawerNavigator;

Setting.js

import React, { Component } from "react";
import { Text, View } from "react-native";
import { Button, Container, Header, Content, Left } from "native- 
base";
import Icon from "react-native-vector-icons/Feather";
import styles from "../style";

export default class Setting extends Component {
  static navigationOptions = ({ navigation }) => ({
    header: "none"
  });
  render() {
    return (
      <Container>
        <Header>
          <Left>
            <Icon
              style={{ right: 110 }}
              size={40}
              name="menu"
              onPress={() => this.props.navigation.openDrawer()}
            />
          </Left>
        </Header>
        <View style={styles.backgroundContainer}>
          <View style={styles.logoContainer}>
            <Text style={styles.logoText}>Planning</Text>
          </View>
          <View />
        </View>
      </Container>
    );
  }
}

dashboard.js

    import React, { Component } from "react";
    import { Text, View, TextInput, Button, Picker } from "react-native";
    import { Container, Header, Content, Left } from "native-base";
    import Icon from "react-native-vector-icons/Feather";
    import styles from "../style";

    export default class Dashboard extends Component {
      state = { user: "" };
      updateUser = user => {
        this.setState({ user: user });
      };
      static navigationOptions = {
        header: "none"
      };
      render() {
        return (
          <Container>
            <Header>
              <Left>
                <Icon
                  style={{ right: 110 }}
                  size={40}
                  name="menu"
                  onPress={() => this.props.navigation.openDrawer()}
                />
              </Left>
            </Header>
            <View style={styles.backgroundContainer}>
              <View style={styles.logoContainer}>
                <Text style={styles.logoText}>Lead Capture</Text>
              </View>
              <View>
                <View>
                  <Picker
                    selectedValue={this.state.user}
                    onValueChange={this.updateUser}
                    style={{ height: 50, width: 200 }}
                  >
                    <Picker.Item
                      label="franchise partners"
                      value="franchise partners"
                    />
                    <Picker.Item label="distributors" value="distributors" />
                    <Picker.Item label="schools" value="schools" />
                    <Picker.Item label="stem partners" value="stem partners" />
                    <Picker.Item label="parents" value="parents" />
                  </Picker>
                </View>
              </View>
            </View>
          </Container>
        );
      }
    }

Answer 1

Try something like this help none ur header.

static navigationOptions = {
    header: null,
};