Cfrgtkky

I've build an app with a BottomTabNavigator and createSwitchNavigator.

If I declare my screen inside the MainTabNavigator, the top header of my screens work as intended, but as soon as I import my screens (for example my HomeScreen) I get a double header.

I've tried adding:

{

  headerMode: 'none',

  navigationOptions: {

    headerVisible: false,

  }

}

To my StackNavigator, but doesn't seem to have an effect.

I've tried looking at similar posted questions, but have not been set off into the right direction.

Is anyone else familiar with this problem and how to solve it?

App JS

import React from 'react';

import { View, Text } from 'react-native';

import { createStackNavigator,createBottomTabNavigator } from 'react-navigation';

import AppNavigator from './navigation/AppNavigator';



export default class App extends React.Component {

    render() {

        return <AppNavigator />;

    }

}

App Navigator

import React from 'react';

import { createSwitchNavigator } from 'react-navigation';

import MainTabNavigator from './MainTabNavigator';



export default createSwitchNavigator(

  {

    Main: MainTabNavigator,

  },

);

MainTabNavigator

import React from 'react';

import { Button, Text, View } from 'react-native';

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

import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';

import HomeScreen from '../screens/clubs/Home';

import DetailsScreen from '../screens/clubs/Details';



class SettingsScreen extends React.Component {

  static navigationOptions = {

    // title: ' Alpha',

    header: null,

  };

  render() {

    return (

      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

        <Text>Settings!</Text>

        <Button

          title="Go to Home"

          onPress={() => this.props.navigation.navigate('Home')}

        />

        <Button

          title="Go to Details"

          onPress={() => this.props.navigation.navigate('Details')}

        />

      </View>

    );

  }

}



const HomeStack = createStackNavigator({

  Home: { screen: HomeScreen },

  Details: { screen: DetailsScreen },

});



const SettingsStack = createStackNavigator({

  Settings: { screen: SettingsScreen },

  Details: { screen: DetailsScreen },

});



export default createBottomTabNavigator(

  {

    Home: { screen: HomeStack },

    Settings: { screen: SettingsStack },

  },

  {

    navigationOptions: ({ navigation }) => ({

      tabBarIcon: ({ focused, tintColor }) => {

        const { routeName } = navigation.state;

        let iconName;

        if (routeName === 'Home') {

          iconName = `ios-information-circle${focused ? '' : '-outline'}`;

        } else if (routeName === 'Settings') {

          iconName = `ios-information-circle${focused ? '' : '-outline'}`;

        }

        return <Ionicons name={iconName} size={25} color={tintColor} />;

      },

    }),

    tabBarOptions: {

      activeTintColor: '#DD016B',

      inactiveTintColor: 'white',

      tabStyle: {

          width: 100,

          backgroundColor: 'black',

        },

      labelStyle:{

            color: 'white',

          },

    }

  },

);

Home JS

import React, { Component } from 'react';

import { 

    AppRegistry,

    ListView, 

    View, 

    Text, 

    StyleSheet, 

    Image, 

    Button, 

    TouchableOpacity, 

    TextInput, 

    ScrollView,

    Icon,

    FlatList,

} from 'react-native';

import { createStackNavigator, } from 'react-navigation';



export class HomeScreen extends Component {

    static navigationOptions = {

        // title: ' Alpha',

        header: null,

    };

   ....... App content

}



AppRegistry.registerComponent('App', () => App)



export default createStackNavigator({

  Home: {

    screen: HomeScreen,

  },

}, 



{

    initialRouteName: 'Home',

});

In your MainTabNavigator file, try this:

const HomeStack = createStackNavigator({

  Home: { screen: HomeScreen, navigationOptions: { header: null } },

  Details: { screen: DetailsScreen, navigationOptions: { header: null } },

});