Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Typescript React Native Element must be a string error

$
0
0

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)

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>