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 }
});
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.
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!
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.
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
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’
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.
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.
Sometime the View you defined must be in Capital letter.
const PresentationalComponent = (props) => {
return (
**<View>**
<HeaderText></HeaderText>
**</View>**
)
}
export default PresentationalComponent
