Remove the navigation header from the react-native screen - stack navigation

Question

I have a screen which has tab-bar navigation where each screen is of type stack navigation with a couple of screens defined in each. When I navigate from FamilyMembers to SingleContact screen I don't want to see the navigation bar with the back button on top. I want my view (the blue one) in single contact to start from the top. But it appears although I set the header to null! Please help.

//------------------- Single Contact Screen----------//

    import { Text, AsyncStorage, Image, FlatList, Alert, ActivityIndicator, Platform, StyleSheet, View } from 'react-native';
    import { Icon, Container, Spinner, Content, Left, Right, Header, ListItem } from 'native-base'
    import profileService from '../services/Api/ProfileService';
    import { SafeAreaView } from 'react-navigation';

    HEADER_MAX_HEIGHT = 100
    HEADER_MIN_HEIGHT = 60
    PROFILE_IMAGE_MAX_HEIGHT = 80
    PROFILE_IMAGE_MIN_HEIGHT = 40

    export default class SingleContact extends Component {

        constructor(props) {
            super(props);
            this.state = { userName: "", contacts: [], userID: "", cookie: null, memberShips: [] };
        }
        async componentDidMount() {

        }
        onDataLoaded(result, userName) {

        }
        render() {
            return (
                <SafeAreaView>
                    <View style={{ flex: 1 }}>

//--------------------App.js navigation setup --------------------------//

    const FamilyMembersStack = createStackNavigator({
  FamilyMembers: {
    screen: FamilyMembers,
    navigationOptions: ({ navigation }) => {
      return {
        headerTitle: "Family members",       
      }
    }
  },
  SingleContact: {
    screen: SingleContact,
    navigationOptions: ({ navigation }) => {     
      return {
        headerTitle: "Contact"          
      }
    }
  },
}
  , {
    mode: 'modal',
    headerMode: 'none'
  });

const HomeScreenStack = createStackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: ({ navigation }) => {
      return {
        header: null,
      }
    },
  },
  FamilyMembersStack: {
    screen: FamilyMembersStack,
    navigationOptions: ({ navigation }) => {
      return {
        header: null
      }
    }
  },
  AttendanceHistory: {
    screen: AttendanceHistory,
    navigationOptions: ({ navigation }) => {
      return {
        headerTitle: "Attendance history"
      }
    }
  },
  OrderHistory: {
    screen: OrderHistory,
    navigationOptions: ({ navigation }) => {
      return {
        headerTitle: "Order history"
      }
    }
  }
});

HomeScreenStack.navigationOptions = {
  tabBarLabel: 'My info',
  tabBarIcon: ({ tintColor }) => (
    <FaIcon name="user" size={20} color={tintColor} />
  ),
};
const ScheduleScreenStack = createStackNavigator({
  Schedule: {
    screen: ScheduleScreen,
    navigationOptions: ({ navigation }) => {
      return {
        header: null,
      }
    },
  }
});

ScheduleScreenStack.navigationOptions = {
  tabBarLabel: 'Find a class',
  tabBarIcon: ({ tintColor }) => (
    <Icon name="md-calendar" size={20} color={tintColor} />
  ),
};

const ShopScreenStack = createStackNavigator({
  Shop: {
    screen: ShopScreen,
    navigationOptions: ({ navigation }) => {
      return {
        header: null,
      }
    },
  }
});

ShopScreenStack.navigationOptions = {
  tabBarLabel: 'Get a pass',
  tabBarIcon: ({ tintColor }) => (
    <Icon name="md-basket" size={20} color={tintColor} />
  ),
};

const NotificationsScreenStack = createStackNavigator({
  Notifications: {
    screen: NotificationsScreen,
    navigationOptions: ({ navigation }) => {
      return {
        header: null,
      }
    },
  }
});

NotificationsScreenStack.navigationOptions = {
  tabBarLabel: 'Notifications',
  tabBarIcon: ({ tintColor }) => (
    <Icon name="md-alert" size={20} color={tintColor} />
  ),
};




const EventsStack = createStackNavigator({
  Events: {
    screen: Events,
    navigationOptions: ({ navigation }) => {
      return {
        tabBarLabel: "Events",
        tabBarIcon: ({ tintColor }) => (
          <Icon name="md-calendar" size={20} />
        ),
        headerLeft: (
          <Icon name="md-menu" style={{ paddingLeft: 10 }}
            onPress={() => navigation.openDrawer()}
            size={30} />
        )
      }
    }
  }
});

EventsStack.navigationOptions = {
  tabBarLabel: 'Events',
  tabBarIcon: ({ tintColor }) => (
    <Icon name="md-calendar" size={20} color={tintColor} />
  ),
};
const DashboardTabNavigator = createBottomTabNavigator({
  HomeScreenStack,
  ScheduleScreenStack,
  ShopScreenStack,
  NotificationsScreenStack
},
  {
    navigationOptions: ({ navigation }) => {
      const { routeName } = navigation.state.routes[navigation.state.index];
      return {
        header: null,
        headerTitle: routeName,
      }
    },
    tabBarOptions: {
      activeTintColor: 'white',
      inactiveTintColor: 'silver',
      labelStyle: {
        fontSize: 12,
      },
      style: {
        backgroundColor: 'rgba(24,130,201,1);',
      },
    }
  }, { initialRouteName: HomeScreenStack }
);

const DashboardStackNavigator = createStackNavigator({
  DashboardTabNavigator: DashboardTabNavigator
});

const AppDrawerNavigator = createDrawerNavigator({
  Dashboard: {
    screen: DashboardStackNavigator
  }
}, {
    contentComponent: props => <DrawerContent {...props} />
  });
const AppSwitchNavigator = createSwitchNavigator({
  AuthLoading: AuthLoadingScreen,
  Login: { screen: Login },
  Dashboard: { screen: AppDrawerNavigator }
}, {
    initialRouteName: 'AuthLoading',
  }
);


const AppContainer = createAppContainer(AppSwitchNavigator);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

Answer 1

Did you already modify your FamilyMembersStack inside HomeScreenStack like this?

    const HomeScreenStack = createStackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: ({ navigation }) => {
      return {
        header: null,
      }
    },
  },

  // modify this Stack

  FamilyMembersStack:{
    screen: FamilyMembersStack,
    navigationOptions: ({ navigation }) => {
      return {
        header: null
      }
    }
  }
  AttendanceHistory: {
    screen: AttendanceHistory,
    navigationOptions: ({ navigation }) => {
      return {
        headerTitle: "Attendance history"
      }
    }
  },
  OrderHistory: {
    screen: OrderHistory,
    navigationOptions: ({ navigation }) => {
      return {
        headerTitle: "Order history"
      }
    }
  }
});

Follow up answer, remove the following. so that the header will render on the designated screen:

 export default class SingleContact extends Component {
    static navigationOptions = {

        header: null, // remove this
    }
    constructor(props) {
        super(props);
        this.state = { userName: "", contacts: [], userID: "", cookie: null, memberShips: [] };
    }
    async componentDidMount() {

    }
    onDataLoaded(result, userName) {

    }
    render() {

//------------------------------//

const FamilyMembersStack  = createStackNavigator({
  FamilyMembers: {
    screen: FamilyMembers,
    navigationOptions: ({ navigation }) => {     
      return {
        headerTitle: "Family members",
        header:null        
      }
    }
  },
  SingleContact: {
    screen: SingleContact,
    navigationOptions: ({ navigation }) => {     
      return {
        headerTitle: "Contact",
        header:null // and remove this        
      }
    }
  },
});