I am using typescript on my react native and I am just getting started learning it. Something nontrivial that shows off how to use TypeScript in React Native.
I have the following codes on my App.tsx
file:
import React from 'react';import {StyleSheet, View} from 'react-native';import Header from './src/components/Header';export interface Props { count: number;}interface State { count: number;}export class App extends React.Component<Props, State> { constructor(props: Props) { super(props); this.state = { count: props.count || 1, }; } render() { return (<View style={styles.container}><Header title="Header" /></View> ); }}const styles = StyleSheet.create({ container: { flex: 1, },});
And then on my Header.tsx
file:
import React from 'react';import {View, Text, StyleSheet} from 'react-native';interface Props { title: string;}const Header: React.FC<Props> = ({title}) => { return (<View style={styles.headerContainer}><Text style={styles.headerText}>{title}</Text></View> );};const styles = StyleSheet.create({ headerContainer: { paddingVertical: 20, borderBottomWidth: 1, borderBottomColor: '#cfcfcf', alignItems: 'center', }, headerText: { fontSize: 20, fontWeight: '600', },});export default Header;
This returned this error: Element type is invalid: expected a string (for built-in components) or a class function but got undefined.
Any idea what's causing this?
UPDATE here's the complete error log from the console:
LOG Running "MyApp" with {"rootTag":1,"initialProps":{}} ERROR Warning: React.createElement: 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 your code at renderApplication.js:48. 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.This error is located at: in RCTView (at View.js:32) in View (at AppContainer.js:106) in RCTView (at View.js:32) in View (at AppContainer.js:133) in AppContainer (at renderApplication.js:41) in MyApp(RootComponent) (at renderApplication.js:57)