无法导出组件 React Native

Question

I am new to React Native and trying to implement some of my knowledge from React like in this case: the function component. However, after I changed the layout a bit it shows an error in how I didn't export the component. Here's the error:

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 'App'.

Here's a snapshot of the component:

import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import {
    StyleSheet,
    Text,
    View,
    Card,
    Background,
    Logo,
    Header,
    Title,
    Button,
    Divider,
} from "react-native";
import AudioRecorderPlayer, {
    AVEncoderAudioQualityIOSType,
    AVEncodingOption,
    AudioEncoderAndroidType,
    AudioSet,
    AudioSourceAndroidType,
} from "react-native-audio-recorder-player";

const App = () => {
    const [initialtime, setInitialTime] = useState({
        isLoggingIn: false,
        recordSecs: 0,
        recordTime: "00:00:00",
        currentPositionSec: 0,
        currentDurationSec: 0,
        playTime: "00:00:00",
        duration: "00:00:00",
    });
    const audioRecorderPlayer = new AudioRecorderPlayer();
    audioRecorderPlayer.setSubscriptionDuration(0.09);
    return (
        <Card
            style={{
                flex: 1,
                flexDirection: "row",
                alignItems: "center",
                alignContent: "center",
                alignSelf: "center",
            }}
        >
            <Background>
                <Logo />
                <Header>InstaPlayer</Header>
                <Title>{initialtime[2]}</Title>
            </Background>
        </Card>
    );
};

export default App;

The file which import the App.js is AppEntry.js within node_modules/expo/AppEntry.js has the following content:

import registerRootComponent from 'expo/build/launch/registerRootComponent';

import App from '../../src/App';

registerRootComponent(App);

Does anyone have an answer to this or had a similar case? Any information would help. Thank you

Answer 1

Try this version

import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import {
    StyleSheet,
    Text,
    View,
    Card,
    Background,
    Logo,
    Header,
    Title,
    Button,
    Divider,
} from "react-native";
import AudioRecorderPlayer, {
    AVEncoderAudioQualityIOSType,
    AVEncodingOption,
    AudioEncoderAndroidType,
    AudioSet,
    AudioSourceAndroidType,
} from "react-native-audio-recorder-player";

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {

    const [initialtime, setInitialTime] = useState({
        isLoggingIn: false,
        recordSecs: 0,
        recordTime: "00:00:00",
        currentPositionSec: 0,
        currentDurationSec: 0,
        playTime: "00:00:00",
        duration: "00:00:00",
    });
    const audioRecorderPlayer = new AudioRecorderPlayer();
    audioRecorderPlayer.setSubscriptionDuration(0.09);

    return (
      <Card
            style={{
                flex: 1,
                flexDirection: "row",
                alignItems: "center",
                alignContent: "center",
                alignSelf: "center",
            }}
        >
            <Background>
                <Logo />
                <Header>InstaPlayer</Header>
                <Title>{initialtime[2]}</Title>
            </Background>
        </Card>
    );
  }
}

export default App;

Answer 2

This is what my code looks like for the first file.

import {AppRegistry} from 'react-native';
import App from './App';

AppRegistry.registerComponent('App Name', () => App);