React.createElement: type is invalid

Question

I'm new to react and react native. I want to use a libary for react native. https://github.com/FaridSafi/react-native-gifted-chat But I got this error :

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.

Check your code at registerRootComponent.js:21. in ExponentRootComponent (at renderApplication.js:35) in RCTView (at View.js:128) in View (at AppContainer.js:93) in RCTView (at View.js:128) in View (at AppContainer.js:92) in AppContainer (at renderApplication.js:34)

Here my code :

import React from 'react';
import { StyleSheet, Text, View, KeyboardAvoidingView, Image, TextInput } from 'react-native';
import GiftedChat from 'react-native-gifted-chat';

class App extends React.Component {

  state = {
    messages: [],
  };


  componentWillMount() {
    this.setState({
      messages: [
        {
          _id: 1,
          text: 'Hello developer',
          createdAt: new Date(),
          user: {
            _id: 2,
            name: 'React Native',
            avatar: 'https://facebook.github.io/react/img/logo_og.png',
          },
        },
      ],
    });
  }

  onSend(messages = []) {
    this.setState((previousState) => ({
      messages: GiftedChat.append(previousState.messages, messages),
    }));
  }

  render() {
    return (
      <GiftedChat
        messages={this.state.messages}
        onSend={(messages) => this.onSend(messages)}
        user={{
          _id: 1,
        }}
      />
    );
  }

}

I add this lib with :

yarn add react-native-gifted-chat

I use Expo-XDE to launch my app on a android emulator.

Does this answer your question? [React.createElement: type is invalid -- expected a string](https://stackoverflow.com/questions/42813342/react-createelement-type-is-invalid-expected-a-string) — lifeisfoo, Jun 08 '20 at 12:31

score 2 · Accepted Answer · edited Apr 11 '23 at 21:44

2

Export the App component to render it.

For example:

export default function App() {

edited Apr 11 '23 at 21:44

Freewalker

6,329
4
51
70

answered Jul 17 '17 at 20:07

Vipul Singh

638
3
10

sorry it worked for a second then crash again... I added this 'export default App;' at the top – Xero Jul 17 '17 at 20:18
AppContainer.js:93, what is line of code at this line ? – Vipul Singh Jul 17 '17 at 20:23

score 1 · Answer 2 · answered Jul 17 '17 at 20:20

1

As said in the warning, you likely forgot to export your component from the file it's defined in.

Just add an export at the bottom of your file

App extends React.Component{ ... }
export default App

answered Jul 17 '17 at 20:20

paulnta

211
2
5

React.createElement: type is invalid

2 Answers2