React native error - expected a string or a class but got object

Question

I am new to react-native. I was trying to write simple programs found from tutorials in order to familiar with react-native environment. I have researched on the same bug on stackoverflow itself and couldn't find any helpful solution, that's the reason I am writing again.

I was referring to the following tutorial

https://levelup.gitconnected.com/getting-started-with-react-native-in-2019-build-your-first-app-a41ebc0617e2

Following is the code that I have used. Created a new class named EmojiDict.js

import React, { Component } from 'react'
import { View, Text, StyleSheet } from 'react-native'

class EmojiDict extends Component {
state = {
    '😃': '😃 Smiley',
    '🚀': '🚀 Rocket',
    '⚛️': '⚛️ Atom Symbol'
};

render() {
    return (
        <View style={styles.container} >
            <Text>this.state['😃'] </Text>
        </View>
    );
  }
}

const styles = StyleSheet.create({
container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
},
instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5
  }
});

Then modified the App.js class as follows:

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import EmojiDict from './src/components/EmojiDict';

export default class App extends Component {
render() {
    return <EmojiDict />;
  }
}

I have tried various examples and nothing worked when the App.js class gets modified. I am not able to go forward due to this error.

Adarsh · Accepted Answer · 2019-11-19 06:07:38Z

1

It's looks like you forgot to export the EmojiDict component

instead of class EmojiDict extends Component {

try

export default class EmojiDict extends Component {

may resolve this issue

answered Nov 19, 2019 at 6:07

Adarsh

2,2792 gold badges25 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sree_iphonedev Over a year ago

Thanks Adarsh. That resolved the issue and would like to clarify that export default has to be used with all the classes defining.

Adarsh Over a year ago

yes, we need to exoprt a class component in-order to use it in other components, please refer : developer.mozilla.org/en-US/docs/web/javascript/reference/…

sree_iphonedev Over a year ago

Thanks a lot Adarsh for the reference.

Collectives™ on Stack Overflow

React native error - expected a string or a class but got object

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related