How to display a nested screen within another nested screen?

Question

My app is currently set up as follows, and I want to show the Hub screen when the user presses on Study:

App.js:

import React, { Component } from 'react';

...

import { View } from 'react-native'

import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux'
import rootReducer from './redux/reducers'
import thunk from 'redux-thunk'
const store = createStore(rootReducer, applyMiddleware(thunk))

...

export class App extends Component {
  
...
render() {
    return (
      <Provider store={store}>
        <NavigationContainer>
          <Stack.Navigator initialRouteName="Main">
            <Stack.Screen name="Main" component={MainScreen} options={{ headerShown: false }}/>
          </Stack.Navigator>
        </NavigationContainer>
      </Provider>
    )
  }
}

export default App

Main:

import React, { Component } from 'react'
import { View } from 'react-native'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { fetchUser, clearData } from '../redux/actions/index'

import ProfileScreen from './main/Profile'
import HomeScreen from './main/Home'
import StudyScreen from './main/Study'
import TestScreen from './main/Test'

import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'
const Tab = createMaterialBottomTabNavigator();
// https://reactnavigation.org/docs/bottom-tab-navigator/

export class Main extends Component {
    componentDidMount() {
        this.props.clearData();
        this.props.fetchUser();
    }
    render() {
        
    ...

        return (
            <Tab.Navigator initialRouteName="Home" activeColor="#f0edf6" barStyle={{ backgroundColor: '#694fad' }} shifting='true'>
                <Tab.Screen name="Home" component={HomeScreen}
                options={{
                    tabBarLabel: 'Home', tabBarColor: '#FF6347', tabBarIcon: ({ color, size }) => (
                        <MaterialCommunityIcons name="home" color={color} size={26}/>
                    ),
                }} />
                <Tab.Screen name="Study" component={StudyScreen}
                options={{
                    tabBarLabel: 'Study', tabBarColor: '#694FAD', tabBarIcon: ({ color, size }) => (
                        <MaterialCommunityIcons name="school" color={color} size={26}/>
                    ),
                }} />
                <Tab.Screen name="Profile" component={ProfileScreen}
                options={{
                    tabBarLabel: 'Profile', tabBarColor: '#1F65FF', tabBarIcon: ({ color, size }) => (
                        <MaterialCommunityIcons name="account" color={color} size={26}/>
                    ),
                }} />
                <Tab.Screen name="Test" component={TestScreen}
                options={{
                    tabBarLabel: 'Test', tabBarColor: '#3490AA', tabBarIcon: ({ color, size }) => (
                        <MaterialCommunityIcons name="history" color={color} size={26}/>
                    ),
                }} />
            </Tab.Navigator>
        )
    }
}

const mapStateToProps = (store) => ({
    currentUser: store.userState.currentUser
})
const mapDispatchProps = (dispatch) => bindActionCreators({fetchUser, clearData}, dispatch)

export default connect(mapStateToProps, mapDispatchProps)(Main);

Study:

import React, { Component } from 'react'

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

import HubScreen from './studyWebviews/Hub'

export class Study extends Component {
    render() {
        return (
            <NavigationContainer>
            <Stack.Navigator initialRouteName="Hub">
                <Stack.Screen name="Hub" component={HubScreen} options={{ headerShown: false }}/>
            </Stack.Navigator>
            </NavigationContainer>
        );
    }
}

Hub:

import React from 'react'
import { Text } from 'react-native'

export default function Hub() {

    return (
        <Text>Hub</Text>
    )
}

Trying to load my app gives this error:

× Error: Couldn't find a 'component', 'getComponent' or 'children' prop for the screen 'Study'. This can happen if you passed 'undefined'. You likely forgot to export your component from the file it's defined in, or mixed up default import and named import when importing.

How do I fix this? Please let me know if I need to clarify anything or make any changes for the sake of readability, thank you.

Answer 1

I believe you are importing the components incorrectly, as the message suggests: "...or mixed up default import and named import when importing."

Try export default class Study...