Multiple screens in one Tab Navigator

Question

I am new to React Native and I am trying to create an app with a bottom tab navigator. However, in HomeScreen.js, which is the first tab navigator screen, I want the user to be able to navigate to antoher screen by pressing a button, while in the same Tab Navigator.

For example: In HomeScreen.js, when the user presses a button it navigates to AnotherScreen.js while staying in Tab Navigator which is, in this case, the Home one.

This is my Apps.js

import React from 'react';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import {Ionicons} from '@expo/vector-icons';
import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';

import newPassScreen from './screens/newPassScreen';
import BaseScreen from './screens/BaseScreen';
import LoadingScreen from './screens/LoadingScreen';
import RegisterScreen from './screens/RegisterScreen';
import LoginScreen from './screens/LoginScreen';

import DrawerNavigator from './screens/Drawer/DrawerNavigator';
import HomeScreen from './screens/HomeScreen';
import NotificationScreen from './screens/NotificationScreen';
import MessageScreen from './screens/MessageScreen';

import helder from './screens/companies/helder'

import {decode, encode} from 'base-64'
if (!global.btoa) {  global.btoa = encode }
if (!global.atob) { global.atob = decode }

const AppContainer = createStackNavigator(
  {
default: createBottomTabNavigator (
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => <Ionicons name='ios-home' size={24} color={tintColor}/>
      }
    },
    Message: {
      screen: MessageScreen,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => <Ionicons name='ios-chatboxes' size={24} color={tintColor}/>
      }
    },      
    Notification: {
      screen: NotificationScreen,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => <Ionicons name='ios-notifications' size={24} color={tintColor}/>
      }
    },
    Profile: {
      screen: DrawerNavigator,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => <Ionicons name='ios-person' size={24} color={tintColor}/>
      }
    },
  },
  {
    defaultNavigationOptions:{
      tabBarOnPress: ({navigation, defaultHandler}) => {
        if (navigation.state.key === 'Post'){
          navigation.navigate('postModal')
        } else {
          defaultHandler()
        }
      }
    },

    tabBarOptions:{
      activeTintColor: 'orange',
      inactiveTintColor: 'black',
      showLabel: false
    }
  }
),
postModal:{
  screen: HomeScreen
}
  },
   {
    mode: 'modal',
    headerMode: 'none'
  }
)

const AuthStack = createStackNavigator({
  Base: BaseScreen,
  Login: LoginScreen,
  Register: RegisterScreen,
  Password: newPassScreen
}, {
  initialRouteName:''
}
)

export default createAppContainer(
  createSwitchNavigator(
    {
  Loading: LoadingScreen,
  App: AppContainer,
  Auth: AuthStack
},
{
  initialRouteName: 'Loading'
}
  )
)

Could you please help me?

Answer 1

import React from "react";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
import SecureScreen from "../screens/SecureScreen";
import WetterScreen from "../screens/WetterScreen";
import SecureLogin from "../screens/SecureLogin";
import TermineScreen from "../screens/TermineScreen";
import SavedImages from "../screens/SavedImages";
import Expo from "expo";

import {init} from "./db";
import {initDB} from "./dbTodo";

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

init()
.then(() => {
  console.log("Database initialized! - Secure")
})
.catch(err=> console.log("DB ERROR: " + err))

initDB()
.then(() => {
  console.log("Database initialized! - ToDo")
})
.catch(err=> console.log("DB ERROR: " + err))

const SecureStack = createStackNavigator({
  Login: {
    screen: SecureLogin,
    navigationOptions: () => ({
      title: "Security Login"
    })
  },
  Secure: {
    screen: SecureScreen,
    navigationOptions: () => ({
      title: "Safe Folder"
    })
  },
  SavedImg : {
    screen: SavedImages,
    navigationOptions: () => ({
      title: "Locked Images"
    })
  }
});

const tabNavigator = createMaterialBottomTabNavigator({
  Wetter: {
    screen: WetterScreen,
    navigationOptions: {
      tabBarIcon: () => {
        return <Ionicons name="md-cloudy-night" size={24} color="#ccc" />;
      },
      title: "Wetter"
    }
  },
  Termine: {
    screen: TermineScreen,
    navigationOptions: {
      tabBarIcon: () => {
        return <Ionicons name="md-clipboard" size={24} color="#ccc" />;
      },
      title: "Termine"
    }
  },
  Secure: {
    screen: SecureStack,
    navigationOptions: {
      tabBarIcon: ({ focused }) => {
        if (focused) {
          return <Ionicons name="md-unlock" size={24} color="#ccc" />;
        } else {
          return <Ionicons name="md-lock" size={24} color="#ccc" />;
        }
      },
      title: "Secure"
    }
  }
},
  {
    barStyle: { backgroundColor: "black"}
  }
);

const mainNavigator = createAppContainer(tabNavigator);

// export default Expo.registerRootComponent(mainNavigator);
export default mainNavigator;

As you can see I have a StackNavigator and inside my tabnavigator I call the stack as a screen! It is important that you also look up my last lines because in react navigation you need to createAppContainer on your tabnavigator (mainnavigator). Does this code help you undertand the structure? feel free to ask if something might be unclear and ignore the init() functions.