Problem with Stack Navigator - React Native

Question

I’m developing an application in React Native and I’m using expo, I’m having problems with Stack Navigator, I’ve reviewed the documentation, I don’t know what else to do. On App.js I have this:

import React from 'react';
import { View, Text, Button, StyleSheet, TextInput, TouchableOpacity } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { NavigationContainer } from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import { FontAwesome, FontAwesome5 } from '@expo/vector-icons';
import { MaterialCommunityIcons } from '@expo/vector-icons';

import AudioProvider from './App/context/AudioProvider.js'
import AudioList from './App/screens/AudioList.js';
import Player from './App/screens/Player.js';
import Download from './App/screens/Download.js'
import Playlist from './App/screens/Playlist.js';
import PlaylistDetail from './App/screens/PlaylistDetail';


const Tab = createBottomTabNavigator()
const StackPlaylist = createStackNavigator()

const PlaylistScreen = () => {
  return (
    <StackPlaylist.Navigator screenOptions={{headerShown: false}}>
      <StackPlaylist.Screen name="Playlist" component={Playlist} />
      <StackPlaylist.Screen name="PlaylistDetail" component={PlaylistDetail} />
    </StackPlaylist.Navigator>
  )
}

export default function App() {
  return (
    <AudioProvider>
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen name="Musics" component={AudioList} options={{
            tabBarIcon: () => {
              return <FontAwesome name="music" size={24} color="black" />
            }
          }}/>
          <Tab.Screen name="Player" component={Player} options={{
            tabBarIcon: () => {
              return <FontAwesome5 name="compact-disc" size={24} color="black" />
            }
          }}/>
          <Tab.Screen name="Download" component={Download} options={{
            tabBarIcon: () => {
              return <FontAwesome name="download" size={24} color="black" />
            }
          }}/>
          <Tab.Screen name="Playlist" component={PlaylistScreen} options={{
            tabBarIcon: () => {
              return <MaterialCommunityIcons name="playlist-music" size={24} color="black" />
            }
          }}/>
        </Tab.Navigator>
      </NavigationContainer>
    </AudioProvider> 
  )
}

My package.json looks like this:

{
  "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-async-storage/async-storage": "~1.15.0",
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-community/slider": "^3.0.3",
    "@react-navigation/bottom-tabs": "^5.11.11",
    "@react-navigation/native": "^5.9.6",
    "@react-navigation/native-stack": "^6.0.5",
    "@react-navigation/stack": "^6.0.6",
    "downloadjs": "^1.4.7",
    "expo": "~42.0.1",
    "expo-ads-admob": "~10.1.2",
    "expo-av": "~9.2.3",
    "expo-media-library": "~12.1.2",
    "expo-status-bar": "~1.0.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-icons": "^4.2.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-reanimated": "~2.2.0",
    "react-native-safe-area-context": "3.2.0",
    "react-native-screens": "~3.4.0",
    "react-native-web": "~0.13.12",
    "react-native-webview": "11.6.2",
    "recyclerlistview": "^3.0.5"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0"
  },
  "private": true
}

He makes the following mistake:

Error: Element type is invalid: expected a string (for built-in Components) or a class/Function (for Composite Components) but got: Undefined. You likely forgot to export your Component from the file it’s defined in, or you Might have Mixed up default and named Imports.
Check the render method of StackNavigator.

Answer 1

Your Navigator stack version is on 6.0 and your tab version is on 5.0.

There are two possibilities. Regress to version 5.0 which is very stable.

Do the following.

yarn remove @react-navigation/stack @react-navigation/native 

manually remove the folder from the node_modules and run a Yarn again or in the terminal uses the command rm -rf node_modules.

After it is already cleaned your modules Node you will install again dependencies

spin a yarn or npm, the package you prefer.

then install navigation version 5.0ˆ.

Yarn or npm whichever you prefer.

npm install @react-navigation/native@^5.x
yarn add @react-navigation/native@^5.x

If you want to continue in version 6.0 of the navigation, which I would not indicate since it is with a great incompatibility with typescript I would indicate you to install both your Native and your stack for 6.0 within an expo project ( version 41 or higher ) or cli above 64.

i state to follow the documentation https://reactnavigation.org/docs/getting-started and watch out for the selected version. 6x or 5x indicates whether it is 6.0 or 5.0

Good luck.