view config getter callback for component 'div' must be a function (received 'undefined'). Make sure to start component names with a capital letter

Question

Error is: Invariant Violation: view config getter callback for component 'div' must be a function (received 'undefined'). Make sure to start component names with a capital letter. I am getting this error while trying to retrieve data from firebase into table component of react native that is ReactTable and also giving an empty array in the console when viewing data in my console and hence nothing appears in the output.

import React, { Component } from 'react';
import { StyleSheet, View, Text, Button } from 'react-native';
import ReactTable from 'react-table';
import firebase from 'firebase';


const firebaseConfig = {
...
};
firebase.initializeApp(firebaseConfig);


export default class Form1 extends Component {
constructor(props) {
    super(props);

    this.state = {
        data: [],
        columns: [
            {
                Header: "email",
                accessor: "email"
            },
            {
                Header: "password",
                accessor: "password"
            }
        ]
    }
}

componentDidMount() {
    const data = [];
    var query = firebase.database().ref("users");
    query.once("value").then((snapshot) => {
        snapshot.forEach((childSnapshot, index) => {
            let singleObj = {
                email: childSnapshot.val().email,
                password: childSnapshot.val().password,
            }
            data.push(singleObj);

            if (index === snapshot.length - 1) {
                this.setState({ data: data });
            }
        });
    });
}

render() {
    return (
        <div>
            {this.state.data.length > 0 && <ReactTable data={this.state.data} columns= 
{this.state.columns} />}
        </div>
    );
}
}

const styles = StyleSheet.create({
container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
head: { height: 40, backgroundColor: '#f1f8ff' },
text: { margin: 6 }
});

Answer 1

Sometimes this error occurs when the import of your component is not correct. In my react-native project, FlatList got imported from react-native-web instead of react-native framework which resulted in above error. When I imported it from react-native framework it worked fine.

Answer 2

You cannot use div in react native change it with View

change

      <div>
            {this.state.data.length > 0 && <ReactTable data={this.state.data} columns= 
{this.state.columns} />}
        </div>

to

        <View>
            {this.state.data.length > 0 && <ReactTable data={this.state.data} columns= 
{this.state.columns} />}
        </View>

Hope this helps!

Answer 3

I got a similar error which says

Error is: Invariant Violation: view config getter callback for component 'form' must be a function (received 'undefined').

my problem was that I was using a web version that uses from formik so I just needed to use react native one which is changing Form to View.

Hope it helps Others.

Answer 4

The error occurs when you import the component from wrong component module for eq. if you import the "TouchableOpacity" from react-native-web instead of react-native