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

11
votes

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 }
});
3
javascriptreact-nativefirebase-realtime-databasedata-retrieval

3 Answers

16
votes

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!

1
votes

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.

0
votes

Sometime the View you defined must be in Capital letter.

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