Conflict with createBottomTabNavigator and createStackNavigator in React Native - react-native

Question

I have started learning react-native and I'm experiencing some issues. I don't seem to be able to use both components (createBottomTabNavigator and createStackNavigator). Export default can only be used once and I would like to render both components(at the moment only one or the other is rendering).
It would be great to get some help. thanks
Navigation.js
import { createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import { createBottomTabNavigator } from 'react-navigation-tabs'
import Search from '../Components/Search'
import Favourites from '../Components/Favourites'
import FilmDetail from '../Components/FilmDetail'
const SearchStackNavigator = createStackNavigator({
Search: {
screen: Search,
navigationOptions: {
title: 'Search Film'
}
},
FilmDetail: {
screen: FilmDetail,
navigationOptions: {
title: 'Film Details'
}
}
})
const MoviesTabNavigator = createBottomTabNavigator({
Search: {
screen: Search
},
Favourites: {
screen: Favourites
}
})
export default createAppContainer(MoviesTabNavigator)
I'm aware that I'm not using the latest version of React-Native
Package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.10",
"expo": "~39.0.2",
"expo-cli": "^3.28.5",
"expo-status-bar": "~1.0.2",
"moment": "^2.29.1",
"numeral": "^2.0.6",
"react": "16.13.1",
"react-dom": "^16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
"react-native-gesture-handler": "^1.6.1",
"react-native-reanimated": "^1.8.0",
"react-native-safe-area-context": "^1.0.0",
"react-native-screens": "^2.7.0",
"react-native-web": "^0.11.7",
"react-navigation": "^4.3.9",
"react-navigation-stack": "^2.5.0",
"react-navigation-tabs": "^2.8.13",
"react-redux": "^7.2.2",
"redux": "^4.0.5"
},
"devDependencies": {
"#babel/core": "~7.9.0"
},
"private": true
}
here is my App.js
import React from 'react'
import Navigation from './Navigation/Navigation'
import { Provider } from 'react-redux'
import Store from './Store/configureStore'
export default class App extends React.Component {
render() {
return (
<Provider store={Store}>
<Navigation/>
</Provider>
);
}
}

Answer 1

Nesting your screen will solve your problem. I assume you want SearchStackNavigator within MoviesTabNavigator. Do something like below
const MoviesTabNavigator = createBottomTabNavigator({
Search: {
screen: SearchStackNavigator
},
Favourites: {
screen: Favourites
}
})
export default createAppContainer(MoviesTabNavigator)

Answer 2

To navigate between stacks and land in a specific screen use:
navigation.navigate('Stack', {screen: 'screenName')
Error seems to be that Search is not referring to your SearchStackNavigator but your "Search" component you import at the top.
Nested Stacks are possible. I'd recommend taking a look here: Master React Navigation 5

Answer 3

I recommend you to use react-navigation 5.x and follow this example:
SearchStackNavigator:
import {createStackNavigator} from '#react-navigation/stack';
const Stack = createStackNavigator();
const SearchStackNavigator = () =>
<Stack.Navigator>
<Stack.Screen
name="Search"
component={Search}
/>
<Stack.Screen
name="FilmDetail"
component={FilmDetail}
/>
</Stack.Navigator>
MoviesTabNavigator:
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import SearchStackNavigator from "./SearchStackNavigator";
const Tab = createBottomTabNavigator();
const MoviesTabNavigator = () =>
<Tab.Navigator>
<Tab.Screen
name="Search"
component={SearchStackNavigator} />
<Tab.Screen
name="Other tab"
component={OTHER STACK OR SCREEN HERE} />
</Tab.Navigator>
react-navigation docs:
bottom-tab docs
stack-navigation docs