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

score 70 · Answer 1 · answered May 07 '21 at 05:15

70

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.

answered May 07 '21 at 05:15

Shweta

1,099
1
9
9

6

This was the solution for me too! The Visual Studio Code has imported incorrectly from 'react-native-web' a few times now! – Jules May 10 '21 at 15:50
Yes. My 'SafeAreaView' was imported from react-native-web instead of react-native and that caused the problem. Thank you. – Raja C May 29 '22 at 08:14

Goskula Jayachandra · Accepted Answer · 2020-09-21T10:53:41.213

41

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!

edited Sep 21 '20 at 10:53

answered Apr 30 '20 at 12:17

Goskula Jayachandra

3,931
2
12
22

Thanks for solving my doubt now error is not showing after changing code, but not able to show any data of database on my screen @user12129132 – developer_user Apr 30 '20 at 12:23
Then there is a problem in retrieving data from firebase, check it once – Goskula Jayachandra Apr 30 '20 at 12:26
An empty array is printing in console @user12129132 – developer_user Apr 30 '20 at 12:27
can you just go through my code to check whether it is correct or not ? @user12129132 – developer_user Apr 30 '20 at 12:28
check what you are getting query.once("value").then((snapshot) => { after this by consoling snapshot – Goskula Jayachandra Apr 30 '20 at 12:32
console.log(snapshot) is correctly printing database values @user12129132 – developer_user Apr 30 '20 at 12:35
Have you checked whether you are getting correct data by consoling data after data.push(singleObj); – Goskula Jayachandra May 01 '20 at 06:16

score 6 · Answer 3 · answered Sep 27 '21 at 15:39

6

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.

answered Sep 27 '21 at 15:39

navidabasi

161
1
10

2

I got the same error because I imported View from react-native-web instead of react-native. – NightOwl Feb 12 '22 at 08:58

score 2 · Answer 4 · answered Apr 20 '22 at 10:48

2

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

answered Apr 20 '22 at 10:48

Sudhir Patil

21
1

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/31580008) – Stanley Apr 23 '22 at 04:19
1

This was super helpful... this is the cause of that error – David Attah May 24 '22 at 15:06
Indeed it does for me, thanks ! – Biologeek Jul 03 '22 at 07:59

score 2 · Answer 5 · answered Jul 19 '22 at 18:37

I was having the problem it got fixed by just changing destination from where I am importing

Eg. I had to import TouchableOpacity. Inside VSCode the code snippet chose wrong library and so it was inserted like this

import { TouchableOpacity } from "react-native-web";

instead of

import { TouchableOpacity } from "react-native";

Changing it inside correct import helped me fix the issue.

Just answered to let you know this is also a fixation.

score 1 · Answer 6 · answered Aug 19 '22 at 08:05

I just experienced this in another module: React-Insta-Stories. After spending about an hour troubleshooting, I now discovered that the module was never meant for React Native. So, if you have this type of error, check to confirm that the module is meant to work in React Native and not only for react.

Md. Sakibul Hasan · Answer 7 · 2022-06-16T17:47:28.370

0

A lot of times it happened to me. Whenever I Declare TouchableOpacity or other components, vscode automatically import the component from 'react-native-web'. But we should import it from 'react-native' So make sure that we import it from 'react-native'

edited Jun 16 '22 at 17:47

answered Jun 16 '22 at 17:46

Md. Sakibul Hasan

31
2

score 0 · Answer 8 · answered Jul 07 '23 at 11:07

The same problem may occur if you use the function as a component and write it in lower case. it should be MyStack in this example

  function myStack() {
        return (
            <Stack.Navigator>
               <Stack.Screen name="Drawer" component={MyDrawer} />
              <Stack.Screen name="Home" component={TabNavigator} />
            </Stack.Navigator>
          );
      }

export default function Router() {
  return (
    <NavigationContainer>
     <myStack/>
    </NavigationContainer>
  );
}

score -2 · Answer 9 · answered Apr 06 '21 at 17:43

-2

Sometime the View you defined must be in Capital letter.

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

answered Apr 06 '21 at 17:43

Debendra Dash

5,334
46
38

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

9 Answers9

Linked