0

Eu estou desenvolvendo um aplicativo em React Native e estou usando expo, eu estou tendo problemas com Stack Navigator, já revirei a documentação, não sei mais o que fazer. No App.js tenho isso:

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> 
  )
}

Meu package.json está assim:

{
  "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
}

Ele dá o seguinte erro:

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.

2
  • Em todos os imports você colocou a extensão .js. Talvez devesse acrescentar nesse também: import PlaylistDetail from './App/screens/PlaylistDetail'. Esse erro pode ser porque algum desses componentes deve estar com problema na importação. Commented 13/08/2021 às 14:34
  • Se eu comento o as coisas relacionadas ao Stack Navigator e no component do Tab.Screen coloco Playlist ao invés de PlaylistScreen funciona, porém não consigo acessar o PlaylistDetail Commented 13/08/2021 às 14:48

1 Resposta 1

0

A versão do seu stack navigator está na 6.0 e a do seu tab está na versão 5.0.

Existe duas possibilidades. Regredir para a versão 5.0 que está muito estável.

Faça o seguinte.

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

remova manualmente a pasta do node_modules e rode um yarn novamente ou no terminal utiliza o comando rm -rf node_modules.

Depois que já estiver limpo o teu node modules você irá instalar novamente as dependencias

rode um yarn ou npm, o pacote que preferir.

depois instala a versão 5.0ˆ do navigation.

yarn ou npm o que preferir.

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

Caso queira continuar na versão 6.0 do navigation, o que eu não indicaria já que ele está com uma incompatibilidade grande com o typescript eu te indicaria a instalar tanto o seu native quanto o seu stack para 6.0 dentro de um projeto expo ( versão 41 ou maior ) ou cli acima da 64.

eu indico seguir a documentação https://reactnavigation.org/docs/getting-started e ter atenção com a versão selecionada. 6x ou 5x indica se é a 6.0 ou 5.0

Boa sorte.

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .