Myujth

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 ,
);