Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 28468

How to Have both Header and BottomTabNavigator in functional component in ReactNative?

$
0
0

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?


Viewing all articles
Browse latest Browse all 28468

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>