CODEWITHSUNDEEP
react-native
cldev
cldev

Reputation: 781

Error: Element type is invalid: expected a string (for build-in components) or a class/function... - REACT NATIVE

I got this error while working on my Content.js file: Before this everything was fine so I know it's not App.js or another file. I've tried 'npm install' just in case... Most people online that experienced similar errors mention that it might have to do with the way the component is exported but I already changed it to 'export default class Content extends Component' just like most people suggested.

Error

This is the file:

Content.js

import React, { Component } from "react";
import { StyleSheet, View, ActivityIndicator, ScrollView, Card, Text} from 'react-native';
import firebase from '../../firebase';

export default class Content extends Component {
  constructor() {
    super();
    this.state = {
      isLoading: true,
      article: {},
      key: ''
    };
  }
  componentDidMount() {
    const ref = firebase.firestore().collection('articles').doc('foo');
    ref.get().then((doc) => {
      if (doc.exists) {
        this.setState({
          article: doc.data(),
          key: doc.id,
          isLoading: false
        });
      } else {
        console.log("No such document!");
      }
    });
  }

  render() {
    if(this.state.isLoading){
      return(
        <View style={styles.activity}>
          <ActivityIndicator size="large" color="#0000ff" />
        </View>
      )
    }
    return (
      <ScrollView>
        <Card style={styles.container}>
          <View style={styles.subContainer}>
            <View>
              <Text h3>{this.state.article.title}</Text>
            </View>
            <View>
              <Text h5>{this.state.article.content}</Text>
            </View>
          </View>
        </Card>
      </ScrollView>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20
  },
  subContainer: {
    flex: 1,
    paddingBottom: 20,
    borderBottomWidth: 2,
    borderBottomColor: '#CCCCCC',
  },
  activity: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center'
  },
})

Upvotes: 0

Views: 63

Answers (1)

Amit Khatkar
Amit Khatkar

Reputation: 62

You have imported Card from the react-native but React native does not provide Card component inbuilt.

Upvotes: 1

Related Questions