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

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 }
});

Solution 1:^[1]

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>

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

Hope this helps!

Solution 2:^[2]

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.

Solution 3:^[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.

Solution 4:^[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

Solution 5:^[5]

Sometime the View you defined must be in Capital letter.

const PresentationalComponent = (props) => {
   return (
    **<View>**
     <HeaderText></HeaderText>
    **</View>**
    
    
        
      
   )
}
export default PresentationalComponent

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Shweta
Solution 3	navidabasi
Solution 4	Sudhir Patil
Solution 5	Debendra Dash

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]