I want to have both BottomTabNavigator and the default Header that is generated by createStrackNavigator.
my problem is that when I try to use both of these options one gets ignored and react-navigation docs are all based on class component and I cant work it out.
here is my navigator.js file
import React from 'react';
import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import RegisterLoginScreen from './views/RegisterLoginScreen/RegisterLoginScreen';
import ConfirmCodeScreen from './views/ConfirmCodeScreen/ConfrimCodeScreen';
import QRCodeScreen from './views/QRCodeBuy/QRCodeBuyScreen';
import ServicesScreen from './views/ServicesScreen/ServicesScreen';
import ProfileEditScreen from './views/ProfileEditScreen/ProfileEditScreen';
import TransactionScreen from './views/TransactionScreen/TransactionScreen';
const HeaderNavigator = createStackNavigator({
RegisterLogin: RegisterLoginScreen,
confirmCode: ConfirmCodeScreen,
QRBuy: QRCodeScreen,
});
const BottomTabNavigator = createBottomTabNavigator({
ProfileEdit: ProfileEditScreen,
Services: ServicesScreen,
Transactions:TransactionScreen,
QRBuy: QRCodeScreen,
});
const AppSwitch = createSwitchNavigator({
BottomTabNavigator: BottomTabNavigator,
Header:HeaderNavigator
});
export default createAppContainer(AppSwitch);
QRScreen.js
import React from 'react';
import {View, Text} from 'react-native';
const QRCodeBuyScreen = () => {
return (
<View>
<Text>This is qr screen</Text>
</View>
);
};
QRCodeBuyScreen.navigationOptions = () => ({
title:'بارکد',
headerStyle: {
backgroundColor: '#CD0448',
},
});
QRCodeBuyScreen.tabBarOptions = () => ({
activeTintColor: '#e91e63',
labelStyle: {
fontSize: 12,
},
style: {
backgroundColor: 'blue',
},
});
export default QRCodeBuyScreen;
is there a way to have both in a screen? or any work around?