Error running TaskApp

[RWCoding58]

React Lesson 6
I seem to encounter multiple errors while running my TaskApp. I am currently at the part where I have to make the title and the floating button. It appears that my index.js has errors even though it is the same as the one in the video (which didn't seem to have any errors). Here is my index.js:

import * as React from 'react';
import {AppRegistry} from 'react-native';
import {Provider as PaperProvider} from 'react-native-paper';
import {name as appName} from './app.json';
import HomePage from './App';

export default function Main() {
  return (
    <PaperProvider>
      <HomePage />
    </PaperProvider>
  );
}

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

These are the errors that show in Visual Studio Code:

These are the three errors that show in the simulator (I don't know why but the last two seem to be the same):

If needed, I'll add the App.tsx.

[ghost]

Can you please attach App.tsx?

[RWCoding58]

Here:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * Generated with the TypeScript template
 * https://github.com/react-native-community/react-native-template-typescript
 *
 * @format
 */

import React from 'react';
import {SafeAreaView, StatusBar, StyleSheet, Text, View} from 'react-native';
import {FAB, Provider as PaperProvider} from 'react-native-paper';

export const HomePage = () => {
  return (
    <PaperProvider>
      <SafeAreaView style={styles.mainView}>
        <StatusBar />
        <View style={styles.emptySpace} />
        <Text style={styles.titleText}>My Tasks</Text>
        <View style={styles.emptySpace} />
        <FAB style={styles.fab} small icon="plus" onPress={() => {}} />
      </SafeAreaView>
    </PaperProvider>
  );
};

const styles = StyleSheet.create({
  mainView: {
    flex: 1,
  },
  emptySpace: {
    height: 20,
  },
  titleText: {
    fontSize: 40,
    fontWeight: 'bold',
  },
  fab: {
    position: 'absolute',
    margin: 16,
    right: 0,
    bottom: 0,
  },
});

By the way, there weren't any errors in the App.tsx.

[ghost]

I think I found your error. In App.tsx, you exported HomePage as (export const xxx), but you imported HomePage in index.js as a default import (i.e. import HomePage from "./App"). HomePage was not exported as a default export, and there are two ways to solve this:

1. Don't import HomePage in index.js as default import. Just do import {HomePage} from "./App" as shown in the video.
2. Export HomePage as a default export. Do export default const instead of export const in App.tsx for the HomePage.

I hope this helped!

[RWCoding58]

Thanks, the code still shows the same errors in the editor, but the app runs perfectly fine.

[ghost]

Cool, glad it worked!