Problems to render on screen in React Native

Question

I’m having trouble putting on the screen a simple "main page" what’s wrong with the code? (no error appears in the console)

main.js file

import React, { Component } from 'react'

import { View, Text } from 'react-native'

export default class Main extends Component {
    render() {
        return (
            <View>
                <Text>Página Main</Text>
            </View>
        )
    }
} 

index.js file

import { AppRegistry } from 'react-native';
import App from './src';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App); 

File Routes.js

import { createStackNavigator } from '@react-navigation/stack';
import Main from './pages/main'

export default creacteStackNavigator({
    Main
}) 

Answer 1

According to the documentation, in your Routes.js file it is necessary to configure it similar to this:

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

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Notifications" component={Notifications} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

You need to import your component(Screen) and include it in Component={Screen}