Switch between Tabnavigator and Stacknavigator in React Native

Question

I have a Tabnavigator (used with createBottomTabNavigator), and all my screens are on it, I use it as a navigation menu in the application and it works right too. But inside one of these screens I have a button and this button needs to go to another screen, and this other screen needs to be the Navigator stack type. I don’t know how to make this switch between tab and stack.

The code below is from index.js and is where all the routes are.

import Login from './paginas/Login';
import NovaConta from './paginas/NovaConta';
import Inicial from './paginas/Inicial';

import Produtos from './paginas/Produtos';
import Pedidos from './paginas/Pedidos';
import Financeiro from './paginas/Financeiro';
import Perfil from './paginas/Perfil';
import Carrinho from './paginas/Carrinho';
import CarrinhoSelecionarPautas from './paginas/CarrinhoSelecionarPautas';
import ProdutoDetalhes from './paginas/ProdutoDetalhes';
import PedidoDetalhes from './paginas/PedidoDetalhes';

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

const StackNavigator = createStackNavigator(
    {
        CarrinhoSelecionarPautas: CarrinhoSelecionarPautas
    }
);

const TabNavigator = createBottomTabNavigator(
    {
        Inicial: Inicial,
        Login: Login,
        NovaConta: NovaConta,
        Produtos: Produtos,
        Pedidos: Pedidos,
        Financeiro: Financeiro,
        Perfil: Perfil,
        Carrinho: Carrinho,
        CarrinhoSelecionarPautas: // go to CarrinhoSelecionarPautas, but through stack navigator,
        ProdutoDetalhes: ProdutoDetalhes,
        PedidoDetalhes: PedidoDetalhes
    },
    {
       backBehavior: 'history',
       initialRouteName: 'Inicial'
    }
);

export default {
    StackNavigator,
    TabNavigator
};

Inside the Cart screen I have the button that goes to the Cart screen select parts with some parameters. And this is where I want to send to the stack.

this.props.navigation.navigate('CarrinhoSelecionarPautas', {
    carrinho: this.state.carrinho,
    quantidade: this.state.quantidade2,
    pautas: this.state.pautas
})

I tried a few things, but without success, nothing worked. I started with React-Turn on a little while ago, so with this part I’m a little confused. If anyone can help I’d be very grateful.

Answer 1

To solve this problem, you can put your Stacknavigator inside the Tabnavigator.

Here is an example:

import React from "react";
import {
  createBottomTabNavigator,
  createStackNavigator
} from "react-navigation";

import { colors } from "../styles";
import Icon from "react-native-vector-icons/FontAwesome5";
import Dashboard from "../pages/Dashboard/";
import Perfil from "../pages/Perfil";
import NovoMeetup from "../pages/NovoMeetup";
import Busca from "../pages/Busca";
import DetalheMeetup from "../pages/DetalheMeetup";

export default createBottomTabNavigator(
  {
    NovoMeetup: {
      screen: NovoMeetup
    },
    App: {
      screen: createStackNavigator(
        {
          Dashboard: { screen: Dashboard },
          Perfil: { screen: Perfil },
          DetalheMeetup: { screen: DetalheMeetup }
        },
        {
          defaultNavigationOptions: {
            header: null
          }
        }
      ),
      navigationOptions: ({ navigation }) => {
        let tabBarVisible = true;
        const routesWithoutTabs = ["Perfil"];

        if (navigation.state.routes.length > 1) {
          navigation.state.routes.map(route => {
            if (routesWithoutTabs.includes(route.routeName)) {
              tabBarVisible = false;
            }
          });
        }
        let tabBarIcon = ({ tintColor }) => (
          <Icon name="home" size={20} color={tintColor} />
        );

        return {
          tabBarIcon,
          tabBarVisible
        };
      }
    },
    Busca: {
      screen: Busca
    }
  },
  {
    initialRouteName: "App",
    tabBarOptions: {
      showIcon: true,
      showLabel: false,
      activeTintColor: colors.white,
      inactiveTintColor: colors.whiteTransparent,
      style: {
        backgroundColor: colors.primary
      }
    }
  }
);

In this Tabnavigator, I have 3 buttons, one for the screen "Novomeetup", another for the screen "App" and another for the screen "Search". The default screen of this tab is the screen "App".

Inside the screen "App", I have a 3 screens. The first is the "Dashboard". Inside it, I have links to a screen of "Details". The profile screen has a different navigation, it opens without showing the tabs.